<template>
  <div class="login-page">
    <div class="login-top-login">
      <img src="@/assets/img/top-logo.png" alt="">
    </div>
    <div class="camera-content">
      <div class="title">不可移动文物资源数据库</div>
      <div class="camera">
        <img src="@/assets/img/title.png" alt="">
      </div>
      <div class="camera">
        <img src="@/assets/img/pic_camera.png" alt="">
      </div>
    </div>
    <div class="login-panel">
      <div class="login-title">欢迎登录</div>
      <el-form :model="form" ref="formRef" label-position="top" class="login-form">
        <el-form-item label="账号">
          <el-input v-model="form.username" placeholder="请输入账号" clearable />
        </el-form-item>

        <el-form-item label="密码">
          <el-input v-model="form.password" placeholder="请输入密码" show-password />
        </el-form-item>

        <el-form-item>
          <DragVerify v-model="verifyPassed" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" class="login-btn" :disabled="!verifyPassed || loading" @click="onSubmit">
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import DragVerify from '@/components/DragVerify.vue'
import api from '@/api'
import { ElMessage } from 'element-plus'

const formRef = ref()
const form = reactive({
  username: '',
  password: ''
})
const verifyPassed = ref(false)
const loading = ref(false)

function base64EncodeUnicode(str) {
  // 兼容中文的base64
  try {
    return btoa(
      encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (_, p1) => String.fromCharCode('0x' + p1))
    )
  } catch (e) {
    return btoa(str)
  }
}

async function onSubmit() {
  if (!verifyPassed.value) return
  if (!form.username || !form.password) {
    ElMessage.warning('请输入账号和密码')
    return
  }
  loading.value = true
  try {
    const res = await api.loginApi({
      username: form.username,
      password: base64EncodeUnicode(form.password)
    })
    console.log(res, 777)
    // 兼容不同返回结构的token与过期时间
    const token = res?.accessToken
    const expiresIn = res?.expiresIn || res?.expires_in
    const expireAt = res?.expireAt || res?.expire_at
    const expiresAt = expireAt
      ? (typeof expireAt === 'number' ? expireAt : new Date(expireAt).getTime())
      : (expiresIn ? Date.now() + Number(expiresIn) * 1000 : 0)

    if (token) {
      localStorage.setItem('TOKEN', token)
      if (expiresAt) localStorage.setItem('TOKEN_EXPIRES_AT', String(expiresAt))
    }

    ElMessage.success('登录成功')
    // 跳转到首页
    window.location.hash = '#/home'
  } catch (err) {
    ElMessage.error(err?.message || '登录失败')
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  width: 100vw;
  height: 100vh;
  background-image: url('@/assets/img/pic_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.login-top-login {
  position: absolute;
  top: 64px;
  left: 64px;
}
.camera-content{
  position: absolute;
  bottom: 0;
  left: 174px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 706px;
  width: 576px;
  .title{
    width: 576px;
    height: 63px;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: bold;
    font-size: 48px;
    color: #781C0B;
    letter-spacing: 4px;
    text-align: center;
    font-style: normal;
    text-transform: none;
    margin-bottom: 40px;
  }
}
.login-panel {
  position: absolute;
  right: 160px;
  top: 50%;
  transform: translateY(-50%);
  width: 420px;
  background: rgba(255, 255, 255, 0.92);
}
.login-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}
.login-form :deep(.el-form-item__label) {
  color: #333;
}
.login-form {
  :deep(.el-input){
    height: 40px;
    width: 400px;
  }
  :deep(.el-input__password) {
    font-size: 16px;
  }
}
.login-btn {
  width: 400px;
  height: 40px;
}
</style>