<!-- 指纹登录 - 深色科技风格 -->
<template>
  <div class="fingerprint-login-page">
    <!-- 背景层 -->
    <div class="bg-layer" :style="{ backgroundImage: `url(${bgImg})` }" />

    <!-- 操作按钮 - 右上角 -->
    <div class="action-buttons-top">
      <button class="action-btn password-btn" @click="goToPasswordLogin">
        <i class="fas fa-key" />
        密码登录
      </button>
      <button class="action-btn restart-btn" @click="handleRestart">
        <i class="fas fa-redo-alt" />
        重启识别
      </button>
    </div>

    <div class="recognize-container">
      <!-- 状态圆形区域 -->
      <div class="status-circle" :class="statusClass">
        <div class="circle-glow" />
        <div class="fingerprint-icon-wrapper">
          <svg class="fingerprint-svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
            <!-- 外侧指纹脊线 -->
            <ellipse
              cx="100" cy="100" rx="85" ry="90" fill="none" stroke="currentColor" stroke-width="2"
              opacity="0.3"
            />
            <ellipse
              cx="100" cy="100" rx="75" ry="80" fill="none" stroke="currentColor" stroke-width="2"
              opacity="0.4"
            />
            <ellipse
              cx="100" cy="100" rx="65" ry="70" fill="none" stroke="currentColor" stroke-width="2"
              opacity="0.5"
            />

            <!-- 内侧指纹脊线 -->
            <path
              d="M100 30 C130 30, 150 50, 150 80 C150 110, 130 130, 100 130 C70 130, 50 110, 50 80 C50 50, 70 30, 100 30"
              fill="none" stroke="currentColor" stroke-width="2.5" opacity="0.6"
            />
            <path
              d="M100 40 C120 40, 135 55, 135 75 C135 95, 120 110, 100 110 C80 110, 65 95, 65 75 C65 55, 80 40, 100 40"
              fill="none" stroke="currentColor" stroke-width="2.5" opacity="0.7"
            />
            <path
              d="M100 50 C110 50, 120 60, 120 70 C120 80, 110 90, 100 90 C90 90, 80 80, 80 70 C80 60, 90 50, 100 50"
              fill="none" stroke="currentColor" stroke-width="2.5" opacity="0.8"
            />

            <!-- 指纹脊线 -->
            <path
              d="M60 60 Q100 40, 140 60" fill="none" stroke="currentColor" stroke-width="1.5"
              opacity="0.6"
            />
            <path
              d="M65 70 Q100 50, 135 70" fill="none" stroke="currentColor" stroke-width="1.5"
              opacity="0.6"
            />
            <path
              d="M70 80 Q100 60, 130 80" fill="none" stroke="currentColor" stroke-width="1.5"
              opacity="0.6"
            />
            <path
              d="M75 90 Q100 70, 125 90" fill="none" stroke="currentColor" stroke-width="1.5"
              opacity="0.6"
            />
            <path
              d="M80 100 Q100 80, 120 100" fill="none" stroke="currentColor" stroke-width="1.5"
              opacity="0.6"
            />

            <!-- 中央螺旋纹 -->
            <circle
              cx="100" cy="75" r="8" fill="none" stroke="currentColor" stroke-width="2"
              opacity="0.8"
            />
            <circle cx="100" cy="75" r="4" fill="currentColor" opacity="0.6" />
          </svg>

          <!-- 扫描线动画 -->
          <div v-if="status === 'recognizing'" class="scan-line" />
        </div>

        <!-- 成功图标 -->
        <div v-if="status === 'success'" class="success-icon">
          <svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg">
            <circle cx="26" cy="26" r="25" fill="none" />
            <path fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
          </svg>
        </div>

        <!-- 失败图标 -->
        <div v-if="status === 'failed'" class="failed-icon">
          <svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg">
            <circle cx="26" cy="26" r="25" fill="none" />
            <path fill="none" d="M16 16 36 36 M36 16 16 36" />
          </svg>
        </div>
      </div>

      <!-- 状态文本 -->
      <div class="status-text">
        {{ isConnected ? statusText : '设备未连接' }}
      </div>
    </div>

    <!-- Loading -->
    <div v-if="status === 'recognizing'" class="loading-indicator">
      <span>识别中</span>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router';
import { ref, onMounted, onUnmounted } from 'vue';
import { showNotify } from 'vant';
import { queryRemindTime } from '../api/login.js';

// 图片资源
import bgImg from '../assets/images/bj.png';

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

// 状态：waiting(等待识别), recognizing(识别中), success(成功), failed(失败)
const userInfo = ref(null);
const status = ref('waiting');
const statusText = ref('');
const isConnected = ref(false);
// 计算状态类名
const statusClass = ref('status-waiting');

// 更新状态
const updateStatus = (newStatus, text) => {
    status.value = newStatus;
    statusText.value = text;

    switch (newStatus) {
    case 'waiting':
        statusClass.value = 'status-waiting';
        break;
    case 'recognizing':
        statusClass.value = 'status-recognizing';
        break;
    case 'success':
        statusClass.value = 'status-success';
        break;
    case 'failed':
        statusClass.value = 'status-failed';
        break;
    }
};

// 处理指纹响应
const handleFingerprintResponse = data => {
    console.log('接收到指纹设备的响应信息', data);

    if (!data) {
        updateStatus('failed', '识别失败，未接收到数据');
        showNotify({ type: 'danger', message: '识别失败' });
        return;
    }

    const code = data.code;
    const msg = data.message || '';
    const responseData = data.loginInfo;

    if (code === 0) {
        // 有数据说明登录成功
        userInfo.value = responseData;
        if (msg === '连接成功' || msg === '请按下手指' || msg === '同步指纹成功') {
            isConnected.value = true;
            updateStatus('recognizing', '请按下手指');
        }
        if (msg === '同步指纹成功') {
            startRecognize();
        }
        if (msg === '正在同步指纹，请稍后进行指纹登录') {
            updateStatus('waiting', '正在同步指纹，请稍后进行指纹登录');
        }
        if (responseData) {
            updateStatus('success', '识别成功，登录成功！');
            setTimeout(() => {
                localStorage.setItem('#token', responseData.token);
                localStorage.setItem('#accountId', responseData.accountId);
                localStorage.setItem('#LoginInfo', JSON.stringify(responseData));
                showNotify({ type: 'success', message: '欢迎登录，' + responseData.userName });
                const redirectUrl = window.location.href.split('redirectUrl=')[1];

                if (redirectUrl) {
                    window.location = decodeURIComponent(redirectUrl);
                } else {
                    router.push('/home');
                }
                checkPasswordReminder();
            }, 1000);
        }
    } else {
        if (msg === '连接失败') {
            isConnected.value = false;
        } else {
            updateStatus('failed', msg || '识别失败，请重试');
        }
    }
};

// 开始识别
const startRecognize = () => {
    if (!plugin.fingerprintConfig) {
        updateStatus('failed', '指纹设备插件未就绪');
        showNotify({ type: 'danger', message: '设备不支持指纹识别功能' });
        return;
    }

    try {
        plugin.fingerprintConfig.recognize();
    } catch (error) {
        console.error('启动指纹识别失败', error);
        updateStatus('failed', '启动识别失败');
        showNotify({ type: 'danger', message: '启动识别失败' });
    }
};

// 重启指纹识别
const handleRestart = () => {
    userInfo.value = null;
    isConnected.value = true;
    updateStatus('waiting', '指纹模块启动中，请稍候...');

    setTimeout(() => {
        // startRecognize();
        // updateStatus('recognizing', '请按下手指');

        if (plugin.fingerprintConfig) {
            plugin.fingerprintConfig.receiveFingerprintResponse = () => { };
            plugin.fingerprintConfig.disableConnect();
            plugin.fingerprintConfig.connect();
            plugin.fingerprintConfig.receiveFingerprintResponse = handleFingerprintResponse;
            setTimeout(() => {
                startRecognize();
            }, 500);
        }
        if (typeof(FINGERPRINT_CONFIG) == 'undefined'){
            updateStatus('failed', '设备不支持指纹识别功能');
        }
    }, 1000);
};

// 跳转到密码登录页面
const goToPasswordLogin = () => {
    // const isOut = localStorage.getItem('isOut') === 'true';
    // if (isOut) {
    //     router.push({ path: '/login', query: { isOut: 'true' } });
    // } else {
    //     router.push('/login');
    // }

    router.push('/login');
};

const checkPasswordReminder = async () => {
    try {
        const res = await queryRemindTime();
        if (res.errorCode === 0) {
            if (res.data === true) {
                setTimeout(() => {
                    showNotify({ type: 'danger', message: res.errorMessage });
                }, 4000);
            }
        } else {
            showNotify({ type: 'danger', message: res.errorMessage });
        }
    } catch (error) {
        console.error('提示修改密码Api调用失败', error);
        showNotify({ type: 'danger', message: '提示修改密码Api调用失败' });
    }
};

// 组件挂载
onMounted(() => {
    // 检查URL参数中是否包含isOut=true，如果有则存储到localStorage
    // const isOutParam = route.query.isOut;
    // if (isOutParam !== undefined) {
    //     const isOutValue = String(isOutParam) === 'true' ? 'true' : 'false';
    //     if (isOutValue == 'true') {
    //         localStorage.setItem('isOut', isOutValue);
    //     } else {
    //         localStorage.setItem('isOut', isOutValue);
    //     }
    // } else {
    //     localStorage.setItem('isOut', 'false');
    // }

    // 设置指纹设备的响应处理函数
    if (plugin.fingerprintConfig) {
        plugin.fingerprintConfig.connect();
        plugin.fingerprintConfig.receiveFingerprintResponse = handleFingerprintResponse;
    }

    // 延迟500ms后开始识别
    setTimeout(() => {
        handleRestart();
    }, 500);
});

// 组件卸载
onUnmounted(() => {
    // 清理响应处理函数
    if (plugin.fingerprintConfig) {
        plugin.fingerprintConfig.receiveFingerprintResponse = () => { };
        plugin.fingerprintConfig.disableConnect();
    }
});
</script>

<style scoped>
/* 指纹登录页面 - 深色科技风格 */
.fingerprint-login-page {
    width: 100%;
    min-height: 100vh;
    position: relative;
    font-family: 'Microsoft YaHei', sans-serif;
    color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 背景层 */
.bg-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #041c3d;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* 背景动画网格 */
.fingerprint-login-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(30, 144, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 144, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: 1;
    pointer-events: none;
}

.recognize-container {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: 500px;
    width: 90%;
}

/* 状态圆形 */
.status-circle {
    position: relative;
    width: clamp(250px, 40vw, 350px);
    height: clamp(250px, 40vw, 350px);
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(9, 45, 82, 0.95) 0%, rgba(5, 30, 60, 0.95) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(30, 144, 255, 0.3);
    transition: all 0.5s ease;
    overflow: hidden;
    border: 2px solid rgba(30, 144, 255, 0.3);
}

.circle-glow {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* 等待状态 */
.status-waiting {
    border: 2px solid rgba(30, 144, 255, 0.3);
}

.status-waiting .circle-glow {
    background: radial-gradient(circle, rgba(30, 144, 255, 0.2) 0%, transparent 70%);
    opacity: 0.5;
}

/* 识别中状态 */
.status-recognizing {
    border: 2px solid #1e90ff;
    animation: circlePulse 2s infinite;
}

.status-recognizing .circle-glow {
    background: radial-gradient(circle, rgba(30, 144, 255, 0.4) 0%, transparent 70%);
    opacity: 1;
    animation: glowPulse 2s infinite;
}

@keyframes circlePulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(30, 144, 255, 0.3);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 25px 70px rgba(30, 144, 255, 0.5), 0 0 60px rgba(30, 144, 255, 0.4);
    }
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }
}

/* 成功状态 */
.status-success {
    border: 4px solid #10b981;
    background: rgba(16, 185, 129, 0.1);
    animation: successBounce 0.6s ease;
}

.status-success .circle-glow {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.3) 0%, transparent 70%);
    opacity: 1;
}

@keyframes successBounce {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* 失败状态 */
.status-failed {
    border: 4px solid #ef4444;
    animation: shake 0.5s ease;
}

.status-failed .circle-glow {
    background: radial-gradient(circle, rgba(239, 68, 68, 0.3) 0%, transparent 70%);
    opacity: 1;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    75% {
        transform: translateX(10px);
    }
}

/* 指纹图标 */
.fingerprint-icon-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fingerprint-svg {
    width: 60%;
    height: 60%;
    color: #9ca3af;
    transition: color 0.5s ease;
}

.status-waiting .fingerprint-svg {
    color: rgba(30, 144, 255, 0.5);
}

.status-recognizing .fingerprint-svg {
    color: #1e90ff;
}

.status-success .fingerprint-svg {
    color: #10b981;
    opacity: 0.3;
}

.status-failed .fingerprint-svg {
    color: #ef4444;
    opacity: 0.3;
}

/* 扫描线动画 */
.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #00bfff, transparent);
    animation: scanning 2s linear infinite;
}

@keyframes scanning {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(clamp(250px, 40vw, 350px));
    }
}

/* 成功图标 */
.success-icon {
    position: absolute;
    width: 50%;
    height: 50%;
    animation: iconAppear 0.5s ease forwards;
}

.success-icon svg {
    width: 100%;
    height: 100%;
}

.success-icon circle {
    stroke: #10b981;
    stroke-width: 3;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: checkmarkCircle 0.6s ease-in-out forwards;
}

.success-icon path {
    stroke: #10b981;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: checkmark 0.3s 0.3s ease-in-out forwards;
}

@keyframes iconAppear {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes checkmarkCircle {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes checkmark {
    to {
        stroke-dashoffset: 0;
    }
}

/* 失败图标 */
.failed-icon {
    position: absolute;
    width: 50%;
    height: 50%;
    animation: iconAppear 0.5s ease forwards;
}

.failed-icon svg {
    width: 100%;
    height: 100%;
}

.failed-icon circle {
    stroke: #ef4444;
    stroke-width: 3;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: checkmarkCircle 0.6s ease-in-out forwards;
}

.failed-icon path {
    stroke: #ef4444;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: crossmark 0.3s 0.3s ease-in-out forwards;
}

@keyframes crossmark {
    to {
        stroke-dashoffset: 0;
    }
}

/* 状态文本 */
.status-text {
    font-size: 4rem;
    color: white;
    text-align: center;
    font-weight: 700;
    max-width: clamp(250px, 50vw, 400px);
    line-height: 1.6;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 0;
    margin-right: 0;
}

@keyframes textFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 用户信息卡片 */
.user-info {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.5s ease;
    width: 100%;
    max-width: 400px;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.avatar-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

.user-details {
    flex: 1;
}

.user-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.user-role {
    font-size: 1rem;
    color: #6b7280;
}

/* 操作按钮 */
.action-buttons {
    display: none;
}

/* 操作按钮 - 右上角定位 */
.action-buttons-top {
    position: absolute;
    top: clamp(1rem, 2vh, 1.5rem);
    right: clamp(1rem, 2vw, 1.5rem);
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    z-index: 100;
    animation: textFadeIn 0.5s ease;
}

.action-btn {
    font-size: 1rem;
    font-weight: 500;
    height: 44px;
    padding: 0 20px;
    border-radius: 22px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-btn i {
    margin-right: 8px;
    font-size: 16px;
}

/* 密码登录按钮样式 */
.password-btn {
    background: linear-gradient(90deg, #1e90ff 0%, #00bfff 100%);
    border: none;
    color: white;
}

.password-btn:hover {
    box-shadow: 0 0 20px rgba(30, 144, 255, 0.5);
    transform: translateY(-2px);
}

/* 重启按钮样式 */
.restart-btn {
    background: transparent;
    border: 1px solid rgba(30, 144, 255, 0.5);
    color: #7ec8ff;
}

.restart-btn:hover {
    background: rgba(30, 144, 255, 0.1);
    border-color: #1e90ff;
    color: #00bfff;
}

/* Loading */
.loading-indicator {
    position: absolute;
    bottom: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.loading-indicator span {
    color: #7ec8ff;
    font-size: 1.2rem;
    animation: blink 1.5s infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .action-buttons {
        display: none;
        padding: 0 1rem;
    }
}

/* 减少动画（无障碍支持） */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
</style>