<template>
  <div class="volunteer-login-page">
    <div class="logo-section">
      <img :src="logo" alt="logo" class="logo" />
      <div class="app-name">义工登录</div>
    </div>

    <div class="login-card">
      <van-field v-model="username" label="账号" placeholder="请输入账号" clearable />
      <van-field v-model="password" label="密码" type="password" placeholder="请输入密码" clearable />

      <div class="btn-wrap">
        <van-button block color="#A67939" :loading="loading" :disabled="loading" @click="handle_login">
          立即登录
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showSuccessToast } from 'vant'
import { mainStore } from '@/store'
import { checkRedeemPermissionAPI, volunteerLoginAPI } from '@/api/redeem'
import logo from '@/assets/images/logo_01.png'

const store = mainStore()
const $router = useRouter()

const username = ref('')
const password = ref('')
const loading = ref(false)

const check_permission_and_redirect = async () => {
  const permission_res = await checkRedeemPermissionAPI()
  if (!permission_res) return
  if (permission_res?.data) store.changeUserInfo(permission_res.data)
  if (permission_res?.data?.can_redeem === true) {
    $router.replace({ path: '/verificationResult' })
  }
}

onMounted(() => {
  check_permission_and_redirect()
})

const handle_login = async () => {
  if (!username.value || !password.value) {
    showToast('请输入账号密码')
    return
  }

  loading.value = true
  const login_res = await volunteerLoginAPI({ uuid: username.value, password: password.value })
  loading.value = false

  if (!login_res || login_res?.code !== 1) {
    showToast(login_res?.msg || '登录失败')
    return
  }

  const permission_res = await checkRedeemPermissionAPI()
  if (!permission_res || permission_res?.code !== 1) {
    showToast(permission_res?.msg || '权限校验失败')
    return
  }

  if (permission_res?.data) store.changeUserInfo(permission_res.data)

  if (permission_res?.data?.can_redeem === true) {
    showSuccessToast(permission_res?.msg || login_res?.msg || '登录成功')
    setTimeout(() => $router.replace({ path: '/verificationResult' }), 800)
    return
  }

  showToast(permission_res?.msg || '暂无核销权限')
}
</script>

<style lang="less" scoped>
.volunteer-login-page {
  min-height: 100vh;
  background-color: #F6F6F6;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 16px 16px;
  box-sizing: border-box;

  .logo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;

    .logo {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background-color: #fff;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
      object-fit: contain;
    }

    .app-name {
      margin-top: 12px;
      font-size: 20px;
      font-weight: 600;
      color: #333;
      letter-spacing: 2px;
    }
  }

  .login-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;

    .btn-wrap {
      margin-top: 16px;
    }
  }
}
</style>