<template>
  <AppPage :show-footer="true" bg-cover :style="{ backgroundImage: `url(${bgImg})` }">
    <div
      style="transform: translateY(25px)"
      class="m-auto max-w-1500 min-w-750 f-c-c rounded-12 bg-white bg-opacity-80"
      dark:bg-dark
    >
      <div w-750 px-20 style="height: 400px; padding-top: 50px; text-align: center;">
        <img style="width: 371px; height: 60px; margin: auto;" src="@/assets/images/logo.png" alt="">
        <div mt-50 style="text-align: center; font-size: 48px; color: #303133; line-height: 48px; font-weight: 600; ">
          非遗IP价值评估系统
        </div>
        <div style="text-align: center; margin-top: 16px; color: #606266;">
          基于深度学习算法的智能评估系统，为您的知识产权和非物质文化遗产提供专业的价值评估服务
        </div>
        <div mt-30>
          <n-input
            v-model:value="loginInfo.phone"
            style="display: inline-block; width: 260px; height: 42px; text-align: left; line-height: 42px;"
            placeholder="请输入手机号"
            :maxlength="20"
            @keypress.enter="handleRegister"
          >
           <template #prefix>
            <img style="width: 18px; height: 18px; margin-right: 8px;" src="@/assets/images/phone.png" alt="">
          </template>
          </n-input>

          <n-button
            w-126
            h-42
            rounded-5
            type="primary"
            style="background: linear-gradient( 93deg, #880C22 0%, #A30113 100%); margin-left: 20px; font-size: 16px; border: none !important;"
            @click="handleRegister"
          >
            立即登录
            <img style="width: 18px; height: 18px; margin-left: 2px;" src="@/assets/images/go.png" alt="">
          </n-button>
        </div>
      </div>
    </div>
  </AppPage>
</template>

<script setup>
import { lStorage, setToken } from '@/utils'
import bgImg from '@/assets/images/login_bg.png'
import api from '@/api'
import { addDynamicRoutes } from '@/router'
import { useI18n } from 'vue-i18n'

const router = useRouter()
const { query } = useRoute()
const { t } = useI18n({ useScope: 'global' })

const loginInfo = ref({
  phone: '',
})

initLoginInfo()

function initLoginInfo() {
  const localLoginInfo = lStorage.get('loginInfo')
  if (localLoginInfo) {
    loginInfo.value.phone = localLoginInfo.phone || ''
    loginInfo.value.password = localLoginInfo.password || ''
  }
}

const loading = ref(false)

async function handleRegister() {
  const { phone } = loginInfo.value
  if (!phone) {
    $message.warning('请输入手机号')
    return
  }
  loading.value = true
  await api.registerPhone({ phone })
  .then(res=>{
    handleLogin()
  })
  .catch(res=>{
    handleLogin()
  })
}

async function handleLogin() {
  const { phone } = loginInfo.value
  loading.value = true
  await api.loginPhone({ phone, password: phone.slice(5,11) }).catch(res=>{
    setToken(res.error.access_token)
    if (query.redirect) {
      const path = query.redirect
      console.log('path', { path, query })
      Reflect.deleteProperty(query, 'redirect')
      router.push({ path, query })
    } else {
      router.push('/')
    }
    loading.value = false
  })
  
}
</script>
