<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="handleLineReg">
          <input type="hidden" v-model="form.refer"/>
          <h1 class="font-md title-color fw-600">您是第一次使用Line登入，<br/>請輸入您的行動電話號碼</h1>

          <!-- Email Input start -->
          <div class="input-box">
            <input type="number" placeholder="行動電話" required class="form-control" v-model="form.mobile"/>
            <i class="icon-cellphone icli"></i>
          </div>
          <!-- Email Input End -->
          <button type="submit" class="btn-solid">確認送出</button>
        </form>
        <!-- Login Form End -->

      </section>
      <!-- Login Section End -->
    </main>
    <!-- Main End -->
</template>

<script setup lang="ts">
import liff from '@line/liff'
import Cookies from 'js-cookie'

import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router';

import { lineReg } from '@/services/auth'

const router = useRouter()

onMounted(async()=>{

  await liff.init({ liffId: '1657782615-qGK9WQ5m' })

  if (!liff.isLoggedIn())
      liff.login({ redirectUri: window.location.href })

  form.value.refer = Cookies.get('refer_code') || ''
})

const form = ref({
  mobile: '',
  refer: ''
})

const handleLineReg = async () => {
  const regData = {
    id_token: liff.getIDToken(),
    mobile: form.value.mobile,
    refer: form.value.refer
  }

  let res: any = await lineReg(regData)

  if(res.code === 200){
    Cookies.set('token',res.data.token,{ expires: 30 ,domain: import.meta.env.VITE_APP_SSO_DOMAIN})
    return router.push('/my')
  }
  return router.push('/login')
}

</script>

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