<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">
                    <input type="text" placeholder="真實姓名" v-model="form.name" required class="form-control" />
                    <i class="icon-cellphone icli"></i>
                </div>
                <div class="input-box">
                    <input type="text" placeholder="行動電話" v-model="form.phone" required class="form-control" />
                    <i class="icon-cellphone icli"></i>
                </div>
                <!-- <div class="input-box">
                    <input type="text" placeholder="Email" v-model="form.email" required class="form-control" />
                    <i class="icon-cellphone icli"></i>
                </div> -->

                <!-- Password Input start -->
                <!-- <div class="input-box">
            <input type="password" placeholder="登入密碼" required class="form-control" />
            <i class="icon-lock icli showHidePassword"></i>
          </div> -->
                <!-- Password Input End -->

                <button type="submit" class="btn-solid">送出註冊</button>
                <!-- <span class="content-color font-sm d-block text-center fw-600">已經有帳號了? <router-link to="/login" class="underline">登入 </router-link></span> -->
            </form>
            <!-- Login Form End -->

            <!-- Social Section Start -->
            <!-- <div class="socila-section">
          <span>
            <span class="font-sm fw-600 font-theme"> Or login with </span>
          </span>
          <div class="social-wrap">
            <a href="javascript:void(0)" class="font-md title-color fw-600"><img src="@/assets/icons/png/phone.png" alt="phone" /> Continue with Phone </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 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 } from "@/services/auth";

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

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

const shopStore = useShopStore();

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

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,
    });

    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>
