<!-- 指纹录入 - 智能仓储科技风格 -->
<template>
  <div class="fingerprint-page">
    <!-- 背景层 -->
    <div class="bg-layer" :style="{ backgroundImage: `url(${bgImg})` }" />

    <!-- 顶部标题区域 -->
    <div class="header-section">
      <button class="back-btn" @click="handleBack">
        <i class="fas fa-arrow-left" />
        <span>返回</span>
      </button>
      <h1 class="page-title">指纹录入</h1>
    </div>

    <!-- 主内容区域 -->
    <main class="main-content">
      <!-- 步骤内容 -->
      <div class="step-container">
        <!-- 指纹录入 -->
        <div class="step-card step-two">
          <!-- 设备状态 - 右上角 -->
          <div class="device-status-top" @click="handleDeviceClick">
            <div class="status-indicator" :class="{ connected: isConnected }">
              <div class="status-dot" />
              <span class="status-text">
                {{ isConnected ? '设备已连接' : '设备未连接' }}
              </span>
            </div>
          </div>

          <div class="card-header">
            <div class="step-icon fingerprint-step">
              <i class="fas fa-fingerprint" />
            </div>
            <div class="header-content">
              <h2 class="step-title">指纹录入</h2>
              <p class="step-desc">
                登录人：<span class="job-highlight">{{ loginName }}</span>
              </p>
            </div>
          </div>

          <div class="fingerprint-section">
            <!-- 指纹扫描器 -->
            <div class="fingerprint-display">
              <div class="fingerprint-scanner" :class="{ active: isConnected, scanning: isScanning }">
                <!-- 外圈光环 -->
                <div class="scanner-ring ring-1" />
                <div class="scanner-ring ring-2" />
                <div class="scanner-ring ring-3" />
                
                <!-- 指纹图标 -->
                <svg class="fingerprint-icon" 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="isScanning" class="scan-line" />
              </div>

              <div class="instruction-text">
                {{ isConnected ? statusText : '请先连接指纹设备' }}
              </div>
            </div>

            <!-- 操作按钮 -->
            <div class="action-section">
              <button
                class="submit-btn enroll-btn"
                :disabled="!isConnected || isScanning"
                @click="handleEnroll"
              >
                {{ isScanning ? '正在录入中...' : '指纹录入' }}
              </button>

              <button
                class="reset-btn"
                :disabled="!isConnected"
                @click="handleReEnroll"
              >
                重新录入
              </button>
            </div>
          </div>
        </div>
      </div>
    </main>
    <div v-if="checking" class="loading-overlay">
      <div class="loading-dots">
        <div class="dot" />
        <div class="dot" />
        <div class="dot" />
      </div>
      <span class="loading-text">指纹设备连接中...</span>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { showToast, showFailToast, showNotify } from 'vant';
import { ref, onMounted, onUnmounted } from 'vue';
import { checkEmployeeByJobNo } from '../api/fingerprint.js';

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

const router = useRouter();

const isConnected = ref(false);
const isScanning = ref(false);
const statusText = ref('');

const loginName = ref('');
const checking = ref(false);


const handleBack = () => {
    router.push('/home');
};

// 录入指纹
const handleEnroll = () => {
    if (!isConnected.value) {
        showToast('设备未连接或插件异常，请检查指纹设备');
        return;
    }
    isScanning.value = true;
    statusText.value = '请将手指放在指纹采集器上多次按压';
    plugin.fingerprintConfig.enroll(loginName.value);
};

// 重新录入指纹
const handleReEnroll = async () => {
    isScanning.value = false;
    try {
    // 先断开连接
        if (plugin.fingerprintConfig) {
            plugin.fingerprintConfig.disableConnect();
            isConnected.value = false;
            statusText.value = '正在准备重新录入指纹，请稍等...';

            // 等待一秒后重新连接
            setTimeout(() => {
                plugin.fingerprintConfig.connect();
                setTimeout(() => {
                    handleEnroll();
                }, 200);
            }, 1000);
        }
    } catch (error) {
        showFailToast('重新连接设备失败');
        statusText.value = '设备连接失败，请检查设备';
    }
};

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

    if (code === 0) {
        statusText.value = msg || '指纹录入成功！';
        
        if (msg === '上传成功' || msg === '当前用户已经录入过指纹，更新成功。') {
            isScanning.value = false;
            // 返回登录界面
            router.push('/');
        }
        if (msg === '连接成功') {
            isConnected.value = true;
            isScanning.value = false;
            statusText.value = '设备已连接，请点击指纹录入按钮进行录入';
        }
    } else {
        if (msg === '连接失败') isConnected.value = false;
        statusText.value = msg || '指纹录入失败，请重新录入';
        isScanning.value = false;
    }
};

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

    // 获取登录账号
    const loginInfo = localStorage.getItem('#LoginInfo');
    if (loginInfo) {
        const loginInfoObj = JSON.parse(loginInfo);
        loginName.value = loginInfoObj.loginName;
    }
    
    setTimeout(() => {
        checking.value = false;
    }, 1500);
});

// 断开连接
const handleDisableConnect = () => {
    isScanning.value = false;
    isConnected.value = false;
    statusText.value = '设备已断开连接,请点击连接状态重新连接';
    if (plugin.fingerprintConfig) {
        try {
            plugin.fingerprintConfig.disableConnect();
        } catch (e) {
            console.error(e);
        }
    }
};

// 重连or断开
const handleDeviceClick = () => {
    if (isConnected.value) {
        handleDisableConnect();
        isConnected.value = false;
        statusText.value = '设备已断开连接,请点击连接状态重新连接';
    } else {
        if (plugin.fingerprintConfig) {
            plugin.fingerprintConfig.connect();
        }
    }
};

// 断开连接
onUnmounted(() => {
    handleDisableConnect();
    plugin.fingerprintConfig.receiveFingerprintResponse = () => { };
});
</script>

<style scoped>
/* ========== 基础样式 ========== */
.fingerprint-page {
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  position: relative;
  font-family: 'Microsoft YaHei', sans-serif;
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 背景层 */
.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;
}

/* ========== 主内容区域 ========== */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 30px;
  position: relative;
  z-index: 10;
  min-height: 0;
  overflow: hidden;
  flex: 1;
}

/* 步骤容器 */
.step-container {
  width: 100%;
  flex: 1;
  display: flex;
}

/* 步骤卡片 */
.step-card {
  width: 100%;
  background: rgba(9, 61, 140, 0.6);
  border: 1px solid #049FD8;
  border-radius: 16px;
  padding: 50px 40px;
  position: relative;
  box-shadow: 0 0 30px rgba(4, 159, 216, 0.2);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.step-two .fingerprint-section {
  flex: 1;
}

/* 卡片头部 */
.card-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.step-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e90ff 0%, #00bfff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(0, 191, 255, 0.4);
}

.step-icon.fingerprint-step {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}

.step-title {
  font-size: 32px;
  font-weight: bold;
  color: #fff;
  margin: 0 0 10px 0;
}

.step-desc {
  font-size: 22px;
  color: #7ec8ff;
  margin: 0;
}

.header-content {
  flex: 1;
}

.job-highlight {
  color: #00bfff;
  font-weight: bold;
  background: rgba(0, 191, 255, 0.2);
  padding: 4px 12px;
  border-radius: 6px;
}


.loading-text {
  color: #7ec8ff;
  font-size: 16px;
  margin: 0;
}

/* ========== 验证失败状态区域 ========== */
.verify-failed-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px 20px;
}

.failed-icon {
  color: #ef4444;
  font-size: 60px;
  animation: shake 0.5s ease-in-out;
}

.failed-text {
  color: #fca5a5;
  font-size: 16px;
  margin: 0;
  text-align: center;
}

.retry-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 30px;
  background: linear-gradient(90deg, #1e90ff 0%, #00bfff 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.retry-btn:hover {
  background: linear-gradient(90deg, #0d7cc1 0%, #0099cc 100%);
  box-shadow: 0 4px 15px rgba(30, 144, 255, 0.4);
  transform: translateY(-2px);
}

/* ========== 输入区域 ========== */
.input-section {
  display: flex;
  flex-direction: column;
  gap: 40px;
  /* flex: 1; */
  justify-content: center;
}

.input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.input-label {
  font-size: 24px;
  color: #7ec8ff;
  font-weight: 500;
}

.dark-input {
  width: 100%;
  padding: 24px 30px;
  background: rgba(13, 58, 106, 0.8);
  border: 2px solid #2a7fff;
  border-radius: 12px;
  color: #fff;
  font-size: 28px;
  outline: none;
  transition: all 0.3s;
}

.dark-input::placeholder {
  color: #7ec8ff;
  opacity: 0.7;
}

.dark-input:focus {
  border-color: #00bfff;
  box-shadow: 0 0 15px rgba(0, 191, 255, 0.3);
}

/* 提交按钮 - 大按钮防误触 */
.submit-btn {
  width: 100%;
  padding: 28px 0;
  background: linear-gradient(90deg, #1e90ff 0%, #00bfff 100%);
  border: none;
  border-radius: 12px;
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s;
  letter-spacing: 4px;
  min-height: 80px;
}

.submit-btn:hover:not(:disabled) {
  box-shadow: 0 0 25px rgba(30, 144, 255, 0.6);
  transform: translateY(-2px);
}

.submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ========== 设备状态 ========== */
.device-status-top {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  z-index: 10;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  border-radius: 30px;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid #ef4444;
  color: #f87171;
  font-weight: 600;
  font-size: 20px;
  transition: all 0.3s;
}

.status-indicator.connected {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10b981;
  color: #34d399;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.9); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
  20%, 40%, 60%, 80% { transform: translateX(3px); }
}

/* ========== 指纹区域 ========== */
.fingerprint-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex: 1;
}

.fingerprint-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

/* 指纹扫描器 - 科技感设计 */
.fingerprint-scanner {
  position: relative;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(5, 30, 60, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* 扫描器外圈光环 */
.scanner-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: all 0.3s;
}

.ring-1 {
  width: 100%;
  height: 100%;
  border-color: rgba(30, 144, 255, 0.3);
}

.ring-2 {
  width: 115%;
  height: 115%;
  border-color: rgba(30, 144, 255, 0.2);
}

.ring-3 {
  width: 130%;
  height: 130%;
  border-color: rgba(30, 144, 255, 0.1);
}

.fingerprint-scanner.active .ring-1 {
  border-color: rgba(0, 191, 255, 0.6);
  box-shadow: 0 0 15px rgba(0, 191, 255, 0.3);
}

.fingerprint-scanner.active .ring-2 {
  border-color: rgba(0, 191, 255, 0.4);
  animation: ringPulse 2s infinite 0.2s;
}

.fingerprint-scanner.active .ring-3 {
  border-color: rgba(0, 191, 255, 0.2);
  animation: ringPulse 2s infinite 0.4s;
}

@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.7; }
}

.fingerprint-scanner.scanning {
  animation: scannerGlow 1.5s infinite;
}

@keyframes scannerGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 191, 255, 0.3); }
  50% { box-shadow: 0 0 40px rgba(0, 191, 255, 0.6); }
}

.fingerprint-icon {
  width: 180px;
  height: 180px;
  color: #5a8cba;
  transition: color 0.3s ease;
  z-index: 1;
}

.fingerprint-scanner.active .fingerprint-icon {
  color: #00bfff;
}

/* 扫描线 */
.scan-line {
  position: absolute;
  top: 10%;
  left: 10%;
  right: 10%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #00bfff, transparent);
  border-radius: 2px;
  animation: scanMove 2s linear infinite;
  box-shadow: 0 0 10px #00bfff;
}

@keyframes scanMove {
  0% { top: 10%; }
  100% { top: 85%; }
}

/* 指示文字 */
.instruction-text {
  font-size: 26px;
  color: #7ec8ff;
  text-align: center;
  font-weight: 600;
  max-width: 600px;
  line-height: 1.6;
}

/* ========== 操作按钮 ========== */
.action-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 600px;
}

.enroll-btn {
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

.enroll-btn:hover:not(:disabled) {
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.6);
}

.reset-btn {
  width: 100%;
  padding: 24px 0;
  background: transparent;
  border: 2px solid #2a7fff;
  border-radius: 12px;
  font-size: 24px;
  font-weight: 500;
  color: #7ec8ff;
  cursor: pointer;
  transition: all 0.3s;
  min-height: 70px;
}

.reset-btn:hover:not(:disabled) {
  background: rgba(42, 127, 255, 0.2);
  border-color: #00bfff;
  color: #fff;
}

.reset-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ========== 响应式 - 横屏 ========== */
@media screen and (orientation: landscape) {
  .header-section {
    padding: 10px 20px;
  }

  .page-title {
    font-size: 22px;
  }

  .back-btn {
    padding: 8px 16px;
    font-size: 14px;
    left: 20px;
  }

  .main-content {
    padding: 10px 20px;
  }

  .step-card {
    padding: 20px 30px;
  }

  .step-container {
    max-width: 100%;
  }

  .card-header {
    margin-bottom: 15px;
  }

  .step-icon {
    width: 50px;
    height: 50px;
    font-size: 22px;
  }

  .step-title {
    font-size: 22px;
  }

  .step-desc {
    font-size: 16px;
  }

  .input-label {
    font-size: 18px;
  }

  .dark-input {
    padding: 14px 20px;
    font-size: 18px;
  }

  .fingerprint-section {
    flex-direction: row;
    justify-content: center;
    gap: 60px;
  }

  .fingerprint-scanner {
    width: 180px;
    height: 180px;
  }

  .fingerprint-icon {
    width: 120px;
    height: 120px;
  }

  .instruction-text {
    font-size: 22px;
    max-width: 300px;
  }

  .action-section {
    max-width: 350px;
  }

  .submit-btn {
    padding: 16px 0;
    font-size: 18px;
    min-height: 60px;
  }

  .reset-btn {
    padding: 14px 0;
    font-size: 16px;
    min-height: 50px;
  }

  .input-section {
    gap: 20px;
  }

  .status-indicator {
    padding: 10px 18px;
    font-size: 14px;
  }

  .device-status-top {
    top: 15px;
    right: 15px;
  }
}
</style>
