<!-- AGV RFID识别界面 - 智能仓储风格 -->
<template>
  <div class="stock-requisition-page">
    <!-- 背景层 -->
    <div class="bg-layer" :style="{ backgroundImage: `url(${bgImg})` }" />

    <!-- 顶部标题区域 -->
    <div class="header-section">
      <button class="logout-btn" @click="handleBack">
        <i class="fas fa-home" />
        <span>主页</span>
      </button>
      <h1 class="page-title">AGV RFID识别</h1>
      <!-- 右侧操作按钮 -->
      <div class="header-actions">
        <button class="action-btn refresh-btn" @click="getAgvRfidLog">
          <i class="fas fa-sync-alt" />
          <span>刷新</span>
        </button>
      </div>
    </div>

    <!-- 主内容区域 -->
    <main class="main-content">
      <!-- 任务状态卡片 -->
      <div class="task-status-card">
        <div class="status-header">
          <div class="status-title">
            <i class="fas fa-tasks" />
            <span>任务状态</span>
          </div>
          <div class="status-badge" :class="taskStatus.success ? 'success' : 'error'">
            <i :class="taskStatus.success ? 'fas fa-check-circle' : 'fas fa-exclamation-circle'" />
            {{ taskStatus.text }}
          </div>
        </div>
        <div class="status-info-grid">
          <div class="status-info-item">
            <span class="info-label">任务 ID</span>
            <span class="info-value font-mono">{{ taskInfo.taskId || '-' }}</span>
          </div>
          <div class="status-info-item">
            <span class="info-label">执行次数</span>
            <span class="info-value">{{ `${taskInfo.executionCount} 次` }}</span>
          </div>
          <div class="status-info-item">
            <span class="info-label">信息</span>
            <span class="info-value" :class="taskStatus.success ? 'text-success' : 'text-error'">{{ taskInfo.message || '-' }}</span>
          </div>
        </div>
      </div>

      <!-- 设备信息区域 -->
      <div class="device-section">
        <!-- 目标设备卡片 -->
        <div class="device-card target-card">
          <div class="card-header-icon">
            <div class="icon-circle target">
              <i class="fas fa-box-open" />
            </div>
            <div class="card-title">
              <h3>目标搬运</h3>
              <p>AGV 应当搬运的信息</p>
            </div>
          </div>
          <div class="target-device-list">
            <div v-if="targetDevices.length === 0" class="empty-state-small">
              <i class="fas fa-inbox" />
              <p>暂无目标搬运信息</p>
            </div>
            <div v-else>
              <div v-for="(device, index) in targetDevices" :key="device.inventoryNo || index" class="target-device-item">
                <div class="device-row">
                  <div class="device-info">
                    <span class="device-label">编号</span>
                    <span class="device-code font-mono">{{ device.inventoryNo || '-' }}</span>
                  </div>
                  <span class="device-tag target">目标</span>
                </div>
                <div class="device-name-row">
                  <span class="device-label">名称</span>
                  <span class="device-name">{{ device.inventoryName || '-' }}</span>
                </div>
                <div class="device-feedbox-row">
                  <span class="device-label">容器</span>
                  <span class="device-feedbox">{{ device.feedBoxName }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 已识别设备列表卡片 -->
        <div class="device-card identified-card">
          <div class="card-header-icon">
            <div class="icon-circle identified">
              <i class="fas fa-tags" />
            </div>
            <div class="card-title">
              <h3>已识别列表</h3>
              <p>RFID 实际扫描到的设备信息</p>
            </div>
          </div>
          <div class="identified-device-list">
            <div v-if="identifiedDevices.length === 0" class="empty-state-small">
              <i class="fas fa-inbox" />
              <p>暂未识别到的数据</p>
            </div>
            <div v-else>
              <div v-for="device in identifiedDevices" :key="device.inventoryNo" class="identified-device-item">
                <div class="device-row">
                  <div class="device-info">
                    <span class="device-label">编号</span>
                    <span class="device-code font-mono">{{ device.inventoryNo }}</span>
                  </div>
                  <span class="device-tag identified">已识别</span>
                </div>
                <div class="device-name-row">
                  <span class="device-label">名称</span>
                  <span class="device-name">{{ device.inventoryName }}</span>
                </div>
                <div class="device-feedbox-row">
                  <span class="device-label">容器</span>
                  <span class="device-feedbox">{{ device.feedBoxName || '-' }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- Loading -->
    <div v-if="loading" 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 { ref, computed, onMounted } from 'vue';
import { getAgvRfidLogByTaskId } from '../api/stockOut.js';
import { showNotify } from 'vant';

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

// 路由
const router = useRouter();

// 加载状态
const loading = ref(false);

// 任务信息
const taskInfo = ref({
    taskId: '',
    executionCount: 0,
    message: '',
});

// 任务状态
const taskStatus = ref({
    success: false,
    text: '待识别',
});

// 目标设备列表（从 inventoryNameResponseList 获取）
const targetDevices = ref([]);

// 已识别设备列表（支持多个）
const identifiedDevices = ref([]);

// 获取 AGV 的 RFID 识别记录
const getAgvRfidLog = async () => {
    loading.value = true;
    try {
        const res = await getAgvRfidLogByTaskId();

        if (res.errorCode === 0 && res.datas && res.datas.length > 0) {
            // 取最后一条数据（最新的记录）
            const latestData = res.datas[res.datas.length - 1];
            console.log(latestData.countExecute);
            // 更新任务信息
            taskInfo.value = {
                taskId: latestData.scheduleTaskId.toString(),
                executionCount: latestData.countExecute,
                message: latestData.message,
            };

            // 更新目标设备列表（从 checkInventoryResponseList 获取）
            if (latestData.checkInventoryResponseList && latestData.checkInventoryResponseList.length > 0) {
                targetDevices.value = latestData.checkInventoryResponseList.map(item => ({
                    inventoryNo: item.inventoryNo,
                    inventoryName: item.inventoryName,
                    feedBoxName: item.feedBoxName || '',
                }));
              
            } else {
                targetDevices.value = [];
            }

            // 更新已识别设备列表（包含料箱信息）
            if (latestData.rfidInventoryResponseList && latestData.rfidInventoryResponseList.length > 0) {
                identifiedDevices.value = latestData.rfidInventoryResponseList.map(item => ({
                    inventoryNo: item.inventoryNo,
                    inventoryName: item.inventoryName,
                    feedBoxName: item.feedBoxName || '',
                }));
            } else {
                identifiedDevices.value = [];
            }

            // 更新任务状态（根据message判断）
            const isSuccess = latestData.success;
            taskStatus.value = {
                success: isSuccess,
                text: isSuccess ? '校验通过' : '校验失败',
            };

            // message.success('获取识别结果成功');
        } else {
            showNotify({ type: 'danger',  message: '暂无识别记录',  duration: 3000 });
        }
    } catch (error) {
        console.error('获取RFID识别记录失败:', error);
        showNotify({
            type: 'danger',
            message: '获取识别结果失败',
            duration: 3000,
        });
    } finally {
        loading.value = false;
    }
};

onMounted(() => {
    getAgvRfidLog();
});

// 操作建议（根据识别结果动态显示）
const operationTip = computed(() => {
    if (identifiedDevices.value.length === 0) {
        return '未识别到任何工装设备，请检查 RFID 标签是否正确贴附，或重新进行识别。';
    }

    // 检查是否所有识别的设备都与目标一致
    const targetNames = targetDevices.value.map(d => d.inventoryName);
    const allMatch = identifiedDevices.value.every(
        device => targetNames.includes(device.name),
    );

    if (allMatch && identifiedDevices.value.length === targetDevices.value.length) {
        return '当前识别到的工装与目标一致，可以继续执行任务。';
    } else if (!allMatch) {
        return '当前识别到的工装与目标不符，请检查 RFID 标签是否正确贴附，或手动确认后重试任务。';
    } else {
        return `识别到 ${identifiedDevices.value.length} 个工装设备，请确认是否符合任务要求。`;
    }
});

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

// 重新识别
const handleReIdentify = () => {
    showNotify({
        type: 'danger',
        message: '正在重新识别 RFID 标签...',
        duration: 3000,
    });
    // 示例：重置识别结果
    // identifiedDevices.value = [];
    // taskStatus.value = { success: false, text: '识别中...' };
};

// 手动确认
const handleManualConfirm = () => {
    showNotify({
        type: 'success',
        message: '手动确认成功，任务继续执行',
        duration: 3000,
    });
    router.back();
};

// 取消任务
const handleCancelTask = () => {
    showNotify({
        type: 'danger',
        message: '任务已取消',
        duration: 3000,
    });
    router.back();
};
</script>

<style scoped>
/* ========== 基础样式 ========== */
.stock-requisition-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: 0 30px 20px;
  position: relative;
  z-index: 10;
  min-height: 0;
  overflow-y: auto;
  gap: 20px;
}

/* ========== 任务状态卡片 ========== */
.task-status-card {
  background: rgba(9, 61, 140, 0.5);
  border: 1px solid #049FD8;
  border-radius: 16px;
  padding: 30px;
  flex-shrink: 0;
}

.status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.status-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 28px;
  font-weight: 600;
  color: #fff;
}

.status-title i {
  color: #00bfff;
  font-size: 30px;
}

.status-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border-radius: 25px;
  font-size: 20px;
  font-weight: 500;
}

.status-badge.success {
  background: rgba(16, 185, 129, 0.3);
  border: 1px solid #10b981;
  color: #6ee7b7;
}

.status-badge.error {
  background: rgba(239, 68, 68, 0.3);
  border: 1px solid #ef4444;
  color: #fca5a5;
}

.status-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.status-info-item {
  background: rgba(13, 58, 106, 0.6);
  border: 1px solid rgba(42, 127, 255, 0.3);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.status-info-item .info-label {
  font-size: 18px;
  color: #7ec8ff;
}

.status-info-item .info-value {
  font-size: 22px;
  color: #fff;
  font-weight: 500;
}

.status-info-item .info-value.text-success {
  color: #6ee7b7;
}

.status-info-item .info-value.text-error {
  color: #fca5a5;
}

.font-mono {
  font-family: 'Consolas', monospace;
}

/* ========== 设备信息区域 ========== */
.device-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  flex: 1;
  min-height: 0;
}

.device-card {
  background: rgba(9, 61, 140, 0.5);
  border: 1px solid #049FD8;
  border-radius: 16px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card-header-icon {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 25px;
  flex-shrink: 0;
}

.icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.icon-circle.target {
  background: linear-gradient(135deg, #1e90ff 0%, #00bfff 100%);
  color: #fff;
}

.icon-circle.identified {
  background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
  color: #fff;
}

.card-title h3 {
  font-size: 26px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px 0;
}

.card-title p {
  font-size: 18px;
  color: #7ec8ff;
  margin: 0;
}

/* 目标设备列表 */
.target-device-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
  overflow-y: auto;
}

.target-device-item {
  background: linear-gradient(135deg, rgba(30, 144, 255, 0.2) 0%, rgba(0, 191, 255, 0.1) 100%);
  border: 1px solid rgba(30, 144, 255, 0.4);
  border-radius: 12px;
  padding: 20px 25px;
  margin-bottom: 6px;
}

.device-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.device-label {
  font-size: 16px;
  color: #7ec8ff;
}

.device-name {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
}

.device-code {
  font-size: 20px;
  color: #fff;
}

.device-tag {
  padding: 10px 22px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 500;
}

.device-tag.target {
  background: rgba(30, 144, 255, 0.3);
  border: 1px solid #1e90ff;
  color: #7ec8ff;
}

.device-tag.identified {
  background: rgba(139, 92, 246, 0.3);
  border: 1px solid #8b5cf6;
  color: #c4b5fd;
}

/* 已识别设备列表 */
.identified-device-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.identified-device-item {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(167, 139, 250, 0.1) 100%);
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 12px;
  padding: 8px 25px;
  margin-bottom: 6px;
}

.device-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-bottom: 12px; */
}

.device-name-row {
  padding-top: 12px;
  border-top: 1px solid rgba(139, 92, 246, 0.3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 料箱信息行 */
.device-feedbox-row {
  padding-top: 12px;
  border-top: 1px solid rgba(139, 92, 246, 0.2);
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.device-feedbox {
  font-size: 22px;
  font-weight: 500;
  color: #f59e0b;
}

/* 目标设备的料箱行样式 */
.target-device-item .device-feedbox-row {
  border-top: 1px solid rgba(30, 144, 255, 0.2);
}

.target-device-item .device-feedbox {
  color: #fbbf24;
}

/* 空状态 */
.empty-state-small {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 20px;
  color: #5a8abf;
}

.empty-state-small i {
  font-size: 60px;
  margin-bottom: 20px;
  opacity: 0.5;
}

.empty-state-small p {
  font-size: 20px;
  margin: 0;
}

/* ========== 响应式 - 横屏 1920*1080 ========== */
@media screen and (orientation: landscape) {
  .main-content {
    padding: 0 30px 20px;
    gap: 20px;
  }

  .task-status-card {
    padding: 25px;
  }

  .status-title {
    font-size: 24px;
  }

  .status-title i {
    font-size: 26px;
  }

  .status-badge {
    padding: 10px 24px;
    font-size: 18px;
  }

  .status-info-item {
    padding: 18px;
  }

  .status-info-item .info-label {
    font-size: 16px;
  }

  .status-info-item .info-value {
    font-size: 20px;
  }

  .device-section {
    gap: 20px;
  }

  .device-card {
    padding: 20px;
  }

  .icon-circle {
    width: 50px;
    height: 50px;
    font-size: 24px;
  }

  .card-title h3 {
    font-size: 22px;
  }

  .card-title p {
    font-size: 16px;
  }

  .target-device-item,
  .identified-device-item {
    padding: 8px 22px;
  }

  .device-label {
    font-size: 14px;
  }

  .device-name {
    font-size: 20px;
  }

  .device-code {
    font-size: 22px;
  }

  .device-feedbox {
    font-size: 18px;
  }

  .device-tag {
    padding: 8px 18px;
    font-size: 14px;
  }

  .empty-state-small i {
    font-size: 48px;
  }

  .empty-state-small p {
    font-size: 16px;
  }
}

/* ========== 响应式 - 竖屏 1080*1920 ========== */
@media screen and (orientation: portrait) {
  .main-content {
    padding: 0 30px 30px;
    gap: 25px;
  }

  .task-status-card {
    padding: 35px;
  }

  .status-header {
    margin-bottom: 30px;
  }

  .status-title {
    font-size: 32px;
  }

  .status-title i {
    font-size: 34px;
  }

  .status-badge {
    padding: 14px 32px;
    font-size: 22px;
  }

  .status-info-grid {
    gap: 25px;
  }

  .status-info-item {
    padding: 25px;
    gap: 12px;
  }

  .status-info-item .info-label {
    font-size: 20px;
  }

  .status-info-item .info-value {
    font-size: 24px;
  }

   .info-value {
    font-size: 22px !important;
  }
  .text-error {
    font-size: 19px !important;
  }

  .device-section {
    gap: 30px;
  }

  .device-card {
    padding: 30px;
  }

  .card-header-icon {
    gap: 20px;
    margin-bottom: 30px;
  }

  .icon-circle {
    width: 70px;
    height: 70px;
    font-size: 32px;
  }

  .card-title h3 {
    font-size: 30px;
  }

  .card-title p {
    font-size: 20px;
  }

  .target-device-list,
  .identified-device-list {
    gap: 20px;
  }

  .target-device-item,
  .identified-device-item {
    padding: 8px 14px;
  }

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

  .device-name {
    font-size: 28px;
  }

  .device-code {
    font-size: 22px;
  }

  .device-feedbox {
    font-size: 26px;
  }

  .device-tag {
    padding: 12px 26px;
    font-size: 18px;
  }

  /* .device-row {
    margin-bottom: 15px;
  } */

  .device-name-row,
  .device-feedbox-row {
    padding-top: 6px;
    gap: 4px;
  }

  .empty-state-small {
    padding: 60px 20px;
  }

  .empty-state-small i {
    font-size: 70px;
    margin-bottom: 25px;
  }

  .empty-state-small p {
    font-size: 24px;
  }
}
</style>
