<!--
 * @Date: 2025-11-10 18:08:59
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-11-12 14:51:18
 * @FilePath: /stdj_h5/src/views/LoginID.vue
 * @Description: 登录页
-->
<template>
  <div class="login-page">
    <!-- 顶部LOGO标题 -->
    <div class="logo-title">
      <img class="logo-img" src="https://cdn.ipadbiz.cn/stdj/images/logo@2x.png" alt="Logo">
    </div>

    <!-- 戒子身份验证容器 -->
    <div class="auth-card">
      <div class="card-title">戒子身份验证</div>

      <!-- 证件号码 -->
      <div class="form-item">
        <div class="input-with-icon phone">
          <input class="input" type="text" placeholder="请输入证件号码" v-model="id_card" maxlength="18" />
        </div>
      </div>

      <!-- 身份证验证按钮 -->
      <div class="form-item">
        <div class="btn primary" :class="{ disabled: id_login_disabled }" @click="on_click_login_by_id">立即查询</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useTitle } from '@vueuse/core'
import { loginAPI } from '@/api/index.js'
import { showFailToast, showSuccessToast } from 'vant'
import Cookies from 'js-cookie'

useTitle('戒子身份验证')

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

// 表单状态
const logging = ref(false)
const id_card = ref('')

/**
 * 身份证登录按钮禁用条件
 * 说明：登录进行中或输入内容为空时不可操作
 */
const id_login_disabled = computed(function () {
    return (
        logging.value ||
        !is_not_empty(id_card.value)
    )
})

/**
 * 校验输入是否非空
 * 说明：仅校验输入值是否为空字符串（去除首尾空格）
 * @param {string} v 输入内容
 * @returns {boolean} 是否非空
 */
const is_not_empty = function (v) {
    return String(v || '').trim().length > 0
}

/**
 * 身份证登录
 * 说明：仅凭身份证号进行登录
 * @returns {Promise<void>}
 */
const on_login_by_id = async function () {
  if (logging.value) return
  if (!is_not_empty(id_card.value)) {
    showFailToast('请输入证件号码')
    return
  }
  try {
    logging.value = true
    const { code, data } = await loginAPI({ idcard: id_card.value })
    if (code) {
      Cookies.set('token-stdj', data.id, { expires: 1 })
      showSuccessToast('登录成功')
      setTimeout(() => {
        // 直接跳转到戒子信息页
        router.replace({ path: '/studentInfo' })
      }, 1000)
    }
  } catch (e) {
    showFailToast('网络异常，请稍后重试')
  } finally {
    logging.value = false
  }
}

/**
 * 点击身份证登录包装函数
 * 说明：在禁用态下不触发真实登录逻辑
 * @returns {void}
 */
const on_click_login_by_id = function () {
  if (id_login_disabled.value) return
  on_login_by_id()
}

onMounted(() => {
  // 初始化时，检查是否已登录（通过token判断）
  const token = Cookies.get('token-stdj')
  if (token) {
    // 已登录，直接跳转到戒子信息页
    router.replace({ path: '/studentInfo' })
  }
})
</script>

<style lang="less" scoped>
// 页面背景与布局
.login-page {
  min-height: 100vh;
  background-color: #FCF8F1; // 整个页面背景色
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6rem 1rem;
  background-image: url('https://cdn.ipadbiz.cn/stdj/images/bg002@2x.png');
  background-size: cover;
  background-position: center;
}

// 顶部Logo标题
.logo-title {
  margin-bottom: 2rem;
}

.logo-img {
  height: 5.5rem;
  object-fit: contain;
  margin-top: 1rem;
}

// 验证容器
.auth-card {
  width: 100%;
  max-width: 26rem;
  background-color: rgba(174, 155, 99, 0.14); // 容器背景色
  border-radius: 0.75rem;
  padding: 1rem;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.06);
}

.card-title {
  text-align: center;
  color: #432C0E;
  font-size: 1.125rem;
  font-weight: 700;
  margin-top: 0.75rem;
  margin-bottom: 1.25rem;
}

// 表单项布局
.form-item {
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
}

// 输入框：带左侧图标
.input-with-icon {
  position: relative;
}

.input-with-icon::before {
  content: '';
  position: absolute;
  left: 0.75rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateY(-50%);
}

.input-with-icon.phone::before {
  background-image: url('https://cdn.ipadbiz.cn/stdj/images/%E8%BA%AB%E4%BB%BD@2x.png');
}



.input {
  width: 100%;
  height: 2.5rem;
  border-radius: 0.5rem;
  border: none;
  background-color: #FFFFFF;
  padding: 0 0.75rem 0 2.25rem; // 为左侧图标预留空间
  box-shadow: inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.08);
}

.input::placeholder {
  color: #999999;
}

// 按钮样式
.btn {
  height: 2.5rem;
  padding: 0 0.75rem;
  border: none;
  border-radius: 0.5rem;
  background-color: #A67939; // 获取验证码与立即验证背景色
  color: #FFFFFF;
  font-weight: 600;
  text-align: center;
  line-height: 2.5rem;
}

.btn.primary {
  width: 100%;
}

.btn.disabled {
  // 不可操作态：明显的灰显与禁止样式
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(30%);
  box-shadow: none;
}
</style>