<template>
    <!-- Main Start -->
    <main class="main-wrap login-page mb-xxl">
        <!-- Login Section Start -->
        <section class="login-section p-0">
            <!-- Login Form Start -->
            <form class="custom-form">
                <h1 class="font-md title-color fw-600">會員登入</h1>

                <!-- Email Input start -->
                <div class="input-box">
                    <input type="tel" placeholder="手機號碼" required class="form-control" v-model="form.username" />
                    <i class="verify" :class="{ disable: !showGetVerifyBtn }" @click="handleGetVerify"
                        >{{ getVerifyMsg }}
                        <template v-if="countdown > 0">({{ countdown }})</template>
                    </i>
                </div>
                <!-- Email Input End -->

                <!-- Password Input start -->
                <div class="input-box">
                    <input type="password" placeholder="驗證碼" required class="form-control" v-model="form.password" />
                    <i class="iconly-Hide icli showHidePassword"></i>
                </div>
                <!-- Password Input End -->
                <button type="button" class="btn-solid" @click="handleLogin">登入</button>
            </form>
            <!-- Login Form End -->

            <!-- Social Section Start -->
            <div class="socila-section">
                <span>
                    <span class="font-sm fw-600 font-theme"> 其他登入方式 </span>
                </span>
                <div class="social-wrap">
                    <a href="javascript:void(0)" class="font-md title-color fw-600" @click.prevent="handleLineLogin">
                        <img src="@/assets/icons/png/line.png" alt="line login" /> Line 登入
                    </a>
                    <!-- <a href="https://accounts.google.com/ServiceLogin" class="font-md title-color fw-600"><img src="@/assets/icons/png/google.png" alt="phone" /> Continue with Google </a> -->
                </div>
            </div>
            <!-- Social Section End -->
        </section>
        <!-- Login Section End -->
    </main>
    <!-- Main End -->
</template>

<script setup>
import Cookies from "js-cookie";

// import liff from '@line/liff'
import { ref, watch, onUnmounted } from "vue";

import { useRoute, useRouter } from "vue-router";

import { useShopStore } from "@/store/Shop";

import { showToast } from "vant";
import "vant/es/toast/style";

import { login, sendVerify } from "@/services/auth";

const route = useRoute();
const router = useRouter();

const shopStore = useShopStore();

const form = ref({
    username: "",
    password: "",
});

const getVerifyMsg = ref("獲取驗證碼");
const showGetVerifyBtn = ref(false);
const countdown = ref(0);

const handleGetVerify = async () => {
    if (!showGetVerifyBtn.value) {
        return;
    }
    if (!form.value.username) {
        return showToast({
            message: "請輸入手機號",
            duration: 1000,
        });
    }

    let res = await sendVerify(form.value.username);
    if (res.code === 200) {
        getVerifyMsg.value = "重新發送";
        countdown.value = 60;
        showToast({
            message: "驗證碼已發送",
            duration: 1000,
        });
    } else {
        countdown.value = res.data.countdown;
        showToast({
            message: res.message,
            duration: 1000,
        });
    }
};

watch(
    () => form.value.username,
    (nVal) => {
        //檢查vVal是否為電話號碼
        let reg = /^09[0-9]{8}$/;

        if (reg.test(nVal)) {
            if (countdown.value === 0) {
                return (showGetVerifyBtn.value = true);
            } else {
                return (showGetVerifyBtn.value = false);
            }
        } else {
            return (showGetVerifyBtn.value = false);
        }
    }
);

let timer = null;

watch(
    () => countdown.value,
    (nVal) => {
        if (nVal > 0) {
            showGetVerifyBtn.value = false;
            if (!timer) {
                timer = setInterval(() => {
                    if (countdown.value > 0) {
                        countdown.value--;
                    }
                }, 1000);
            }
        } else {
            clearInterval(timer);
            timer = null;
            showGetVerifyBtn.value = true;
        }
    }
);

const handleLogin = async () => {
    //檢查手機號是否為空
    if (!form.value.username) {
        return showToast({
            message: "請輸入手機號",
            duration: 1000,
        });
    }
    //檢查帳號密碼是否為空
    if (!form.value.username || !form.value.password) {
        return showToast({
            message: "請輸入帳號及驗證碼",
            duration: 1000,
        });
    }

    let res = await login(form.value);
    // console.log("res", res);
    if (res.code === 200) {
        Cookies.set("token", res.data.token, { expires: 365, domain: shopStore.sso_domain });
        Cookies.set("uid", res.data.uid, { expires: 365, domain: shopStore.sso_domain });
        if (route.query.redirect) {
            router.push(route.query.redirect);
            return;
        }
        return router.push("/user");
    } else if (res.code === 201) {
        sessionStorage.setItem("reg", form.value.username);

        router.push({ name: "Register", query: { type: "mobile" } });
    } else {
        showToast({
            message: "登入失敗",
            duration: 1000,
        });
    }
};

const handleLineLogin = async () => {
    const client_id = import.meta.env.VITE_APP_LINE_CLIENT_ID;
    //判斷domain是否包含localhost
    let redirect_uri = "";
    if (shopStore.domain.includes("localhost")) {
        redirect_uri = "http://" + shopStore.domain + ":5173/m/linelogin";
    } else {
        redirect_uri = "https://" + shopStore.domain + "/m/linelogin";
    }

    let link = "https://access.line.me/oauth2/v2.1/authorize?";
    link = link + "response_type=code";
    link += "&client_id=" + client_id;
    link += "&redirect_uri=" + redirect_uri;
    link += "&state=" + (route.query.redirect || "login");
    link += "&scope=openid%20profile";
    window.location.href = link;
};

onUnmounted(() => {
    clearInterval(timer);
});
</script>

<style lang="less" scoped>
.input-box {
    .verify {
        font-size: calc(14px + (28 - 22) * ((100vw - 320px) / (1920 - 320)));
        position: absolute;
        right: 16px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .disable {
        color: #c9ccd0;
        cursor: not-allowed;
    }
}
</style>
