<template>
    <div class="bg-pattern-wrap ratio2_1">
        <!-- Background Image -->
        <div class="bg-patter">
            <!-- <img src="@/assets/images/banner/bg-pattern2.png" class="bg-img" alt="pattern" /> -->
        </div>
    </div>

    <!-- Main Start -->
    <main class="main-wrap login-page mb-xxl">
        <!-- <img class="logo" src="@/assets/images/logo/logo.png" alt="logo" />
      <img class="logo logo-w" src="@/assets/images/logo/logo-w.png" alt="logo" /> -->
        <p class="font-sm content-color"></p>

        <!-- Login Section Start -->
        <section class="login-section p-0">
            <!-- Login Form Start -->
            <form class="custom-form" @submit.prevent="onSubmit">
                <h1 class="font-md title-color fw-600">加入會員</h1>
                <div class="input-box" v-if="$route.query.type !== 'mobile'">
                    <input type="text" placeholder="行動電話" v-model="form.phone" required class="form-control" />
                    <i class="icon-cellphone icli"></i>
                </div>
                <template v-if="isRegister">
                    <div class="input-box">
                        <input type="text" placeholder="真實姓名" v-model="form.name" required class="form-control" />
                        <i class="icon-account icli"></i>
                    </div>
                    <div class="input-box">
                        <input type="text" placeholder="Email" v-model="form.email" required class="form-control" />
                        <i class="icon-email icli"></i>
                    </div>
                    <button type="submit" class="btn-solid">送出註冊</button>
                </template>
                <template v-else>
                    <button type="text" class="btn-solid" @click.prevent="onCheckPhone">驗證手機號碼</button>
                </template>
            </form>
            <!-- Social Section End -->
        </section>
        <!-- Login Section End -->
    </main>
    <!-- Main End -->
</template>

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

import { ref } from "vue";

import { useRouter, useRoute } from "vue-router";
import { useShopStore } from "@/store/Shop";

import { showToast, showLoadingToast } from "vant";

import { register, checkPhone } from "@/services/auth";

const URL = window.URL || window.webkitURL;

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

const shopStore = useShopStore();

const isRegister = ref(route.query.type == "mobile" ? true : false);

const form = ref({
    phone: "",
    real_name: "",
    email: "",
});

const onCheckPhone = async () => {
  if (form.value.phone.length == 10) {
    let { id_token } = JSON.parse(sessionStorage.getItem("reg"));
    let res = await checkPhone({ token: id_token, phone: form.value.phone });
    if (res.code === 200) {
      showToast("您已是會員，已幫您綁定手機號碼");
      Cookies.set("token", res.data.token, {
        expires: 365,
        domain: sso_domain.value,
      });
      Cookies.set("uid", res.data.uid, {
        expires: 365,
        domain: sso_domain.value,
      });
      router.push("/");
    } else if (res.code === 201) {
        showToast("您是我們的新會員，請輸入基本資料");
      isRegister.value = true;
    } else if (res.code === 202) {
        showToast("該手機號已綁定Line帳號,請使用Line登入，或更換手機號碼");
      router.push('/login')
    } else if (res.code === 401) {
        showToast("line 登入已過期");
      return router.push("/login");
    }
  } else {
    showToast("手機號碼格式錯誤");
  }
};

const onSubmit = async () => {
    let token = "";

    if (route.query.type == "line") {
        let { id_token } = JSON.parse(sessionStorage.getItem("reg"));
        token = id_token;
    } else {
        token = sessionStorage.getItem("reg");
    }

    showLoadingToast({
        duration: 0,
        message: "資料傳送中...",
        forbidClick: true,
    });

    if (Cookies.get("refer_code")) {
        form.value.refer_code = Cookies.get("refer_code");
    }

    let regRes = await register({ token, type: route.query.type, ...form.value });
    if (regRes.code === 500) {
        showToast("line 登入已過期");
        return router.push("/login");
    } else if (regRes.code === 200) {
        showToast("註冊成功");
        Cookies.set("token", regRes.data.token, { expires: 365, domain: shopStore.sso_domain });
        Cookies.set("uid", regRes.data.uid, { expires: 365, domain: shopStore.sso_domain });

        return router.push("/user");
    } else {
        showToast("註冊失敗");
        return router.push("/login");
    }
};
</script>

<style lang="less" scoped></style>
