<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 data-feather="at-sign"></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 -->
          <!-- <a href="javascript:void(0)" class="content-color font-sm forgot mb-3">忘記密碼 ?</a> -->
          <br/>
          <button type="button" class="btn-solid" @click="handleLogin">登入</button>
          <span class="content-color font-sm d-block text-center fw-600">還沒有帳號？ <router-link to="/register" 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"> 其他登入方式 </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 { ref } from 'vue'
import { useRoute , useRouter } from 'vue-router'

import { login } from '@/api/auth'

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

const form = ref({
  // username:'0983214434',
  // password:'123456'
})

const handleLogin = async ()=>{
  let res = await login(form.value)
  if(res.code === 200){
    Cookies.set('token', res.data.token, { expires: 365 ,domain: process.env.VUE_APP_DOMAIN})
    Cookies.set('uid', res.data.uid, { expires: 365 ,domain: process.env.VUE_APP_DOMAIN})
    router.push('/')
  }
}

const handleLineLogin = async () => {
  // router.push('/')
    const client_id = process.env.VUE_APP_LINE_CLINE_ID
    const redirect_uri = process.env.VUE_APP_BASE_URL + '/home/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=login'
    link += '&scope=openid%20profile'
    window.location.href = link
}
</script>

<style lang="less" scoped>

</style>
