<!-- 异常停泊区管理 - 深色科技风格 -->
<template>
  <div class="delivery-page">
    <!-- 背景层 -->
    <div class="bg-layer" :style="{ backgroundImage: `url(${bgImg})` }" />

    <!-- 顶部标题区域 -->
    <div class="header-section">
      <button class="back-btn" @click="$router.push('/home')">
        <i class="fas fa-arrow-left" />
        <span>返回</span>
      </button>
      <h1 class="page-title">异常停泊区管理</h1>
    </div>

    <!-- 主内容区域 -->
    <main class="main-content">
      <div class="stations-grid">
        <div
          v-for="station in stations" :key="station.positionNo" class="station-card"
          :class="getStationClass(station)" @click="openStation(station)"
        >
          <div class="card-header">
            <div class="card-title">{{ station.positionName }}</div>
            <span class="status-badge" :class="getStatusClass(station.positionStatus)">
              {{ station.positionStatus }}
            </span>
          </div>

          <!-- 卡片内容 -->
          <div class="card-content">
            <!-- 占用状态 - 显示物料图标 -->
            <div v-if="station.positionStatus === '已占用'" class="material-display">
              <div class="material-image">
                <i class="fas fa-car" style="font-size: 60px; color: #fff;" />
              </div>
            </div>

            <!-- 空闲状态 -->
            <div v-else class="empty-state">
              <i class="fas fa-inbox" />
              <span>暂无物料车</span>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 确认取走弹窗 - 科技感风格 -->
    <div v-if="visible" class="tech-modal-overlay" @click.self="cancelTask">
      <div class="tech-modal">
        <div class="modal-content-row">
          <div class="modal-text">
            <h3>人工核对</h3>
            <p>您是否已检查<span class="highlight">【{{ positionName }}】</span>的工装/设备,<br />请先核对工装/设备是否正确，如果确认无误，请点击【确认无误】按钮，否则请点击【核对异常】按钮。</p>
          </div>
          <div class="modal-icon">
            <div class="icon-box">
              <i class="fas fa-dolly" />
            </div>
          </div>
        </div>
        
        <!-- RFID记录详细信息 -->
        <div v-if="selectedStation && selectedStation.agvRfidRecordLogResponseList" class="rfid-details">
          <h4 class="details-title">RFID校验记录</h4>
          <div v-if="selectedStation && selectedStation.positionEndNo" class="endpoint-info">
            <h3>料车目标终点货位：</h3>
            <span class="endpoint-value">{{ selectedStation.positionEndNo }}</span>
          </div>
          <div class="record-list">
            <div v-for="(record, index) in selectedStation.agvRfidRecordLogResponseList" :key="index" class="record-item">
              <div class="record-header">
                <span class="record-index">闸机第{{ record.countExecute }}次校验</span>
                <span class="record-time">{{ record.requestTime }}</span>
                <span class="record-status" :class="record.success ? 'success' : 'failed'">
                  {{ record.success ? '成功' : '失败' }}
                </span>
              </div>
              <div class="record-message">
                <i class="fas fa-info-circle" />
                <span>{{ record.message }}</span>
              </div>
              
              <!-- RFID设备信息 -->
              <div v-if="record.rfidInventoryResponseList && record.rfidInventoryResponseList.length > 0" class="inventory-section">
                <h5>RFID读取的设备：</h5>
                <div class="inventory-list">
                  <div v-for="(item, idx) in record.rfidInventoryResponseList" :key="idx" class="inventory-item">
                    <span class="inventory-no">{{ item.inventoryNo }}</span>
                    <span class="inventory-name">{{ item.inventoryName }}</span>
                    <span class="inventory-box">{{ item.feedBoxName }}</span>
                  </div>
                </div>
              </div>
              
              <!-- 校验设备信息 -->
              <div v-if="record.checkInventoryResponseList && record.checkInventoryResponseList.length > 0" class="check-section">
                <h5>需要校验的设备：</h5>
                <div class="inventory-list">
                  <div v-for="(item, idx) in record.checkInventoryResponseList" :key="idx" class="inventory-item">
                    <span class="inventory-no">{{ item.inventoryNo }}</span>
                    <span class="inventory-name">{{ item.inventoryName }}</span>
                    <span class="inventory-box">{{ item.feedBoxName }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="modal-footer">
          <button class="modal-btn cancel-btn" @click="cancelTask">取消</button>
          <button class="modal-btn confirm-btn" @click="showErrorDialog">核对异常</button>
          <button class="modal-btn take-away-btn" @click="showConfirmDialog">确认无误</button>
        </div>
      </div>
    </div>

    <!-- 通用确认对话框 -->
    <div v-if="confirmDialog.visible" class="tech-modal-overlay" @click.self="closeConfirmDialog">
      <div class="tech-modal">
        <div class="modal-content-row">
          <div class="modal-text">
            <h3>{{ confirmDialog.title }}</h3>
            <p>{{ confirmDialog.content }}</p>
          </div>
          <div class="modal-icon">
            <div class="icon-box">
              <i :class="confirmDialog.icon" />
            </div>
          </div>
        </div>
        
        <div class="modal-footer">
          <button class="modal-btn cancel-btn" @click="closeConfirmDialog">取消</button>
          <button class="modal-btn" :class="confirmDialog.action === 'error' ? 'confirm-btn' : 'take-away-btn'" @click="handleConfirm">继续</button>
        </div>
      </div>
    </div>

    <!-- 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 { ref, onMounted } from 'vue';
import { showNotify } from 'vant';
import { getLocatorAbnormalAreaStatus, takeAwayAbnormalCar } from '../api/agv.js';

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

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

// 还料位数据
const stations = ref([]);

const visible = ref(false);
const confirmDialog = ref({
    visible: false,
    title: '',
    content: '',
    icon: '',
    action: null,
});

const positionName = ref('');
const positionNo = ref('');
const taskId = ref('');
const selectedStation = ref(null);

// 获取卡片样式类
const getStationClass = station => {
    if (station.positionStatus === '已占用') return 'station-occupied';
    if (station.positionStatus === '空闲中') return 'station-idle';
    if (station.positionStatus === '待入库') return 'station-pending';
    return '';
};

// 获取状态徽章类
const getStatusClass = status => {
    if (status === '已占用') return 'status-danger';
    if (status === '空闲中') return 'status-success';
    if (status === '待入库') return 'status-warning';
    return '';
};

// 打开弹窗
const openStation = station => {
    if (station.positionStatus === '空闲中' || station.positionStatus === '待入库') {
        showNotify({ type: 'danger', message: '请选择占用中的异常停泊区' });
    } else {
        visible.value = true;
        positionName.value = station.positionName;
        positionNo.value = station.positionNo;
        taskId.value = station.taskId;
        selectedStation.value = station;
    }
};

// 根据还料货位和料车编号生成归还单和调度任务
const takeAway = async isError => {

    loading.value = true;
    try {
        const params = {
            positionNo: positionNo.value,
            taskId: taskId.value,
            abnormal: isError,
        };
        const res = await takeAwayAbnormalCar(params);
        if (res.errorCode === 0) {
            showNotify({ type: 'success', message: '料车取走成功' });
            visible.value = false;
            selectedStation.value = null;
            await getStations();
        } else {
            showNotify({ type: 'danger', message: res.errorMessage || '料车取走失败' });
        }
    } catch (error) {
        console.error('料车取走失败:', error);
        showNotify({ type: 'danger', message: '料车取走失败' });
    } finally {
        loading.value = false;
    }
};

// 取消任务
const cancelTask = () => {
    visible.value = false;
    selectedStation.value = null;
};

// 显示确认无误对话框
const showConfirmDialog = () => {
    confirmDialog.value = {
        visible: true,
        title: '确认无误',
        content: '您需要移动料车并放置到对应货位上，请确认是否继续，确认则点击【继续】按钮，否则请点击【取消】按钮。',
        icon: 'fas fa-check-circle',
        action: 'confirm',
    };
};

// 显示核对异常对话框
const showErrorDialog = () => {
    confirmDialog.value = {
        visible: true,
        title: '核对异常',
        content: '需要您人为介入，手动完成该工装/设备的出入库操作，请确认是否继续，确认则点击【继续】按钮，否则请点击【取消】按钮。',
        icon: 'fas fa-exclamation-triangle',
        action: 'error',
    };
};

// 关闭确认对话框
const closeConfirmDialog = () => {
    confirmDialog.value.visible = false;
};

// 处理确认按钮点击
const handleConfirm = async () => {
    const action = confirmDialog.value.action;
    confirmDialog.value.visible = false;
    
    if (action === 'confirm') {
        await takeAway(false);
    } else if (action === 'error') {
        await takeAway(true);
    }
};
// 获取还料位数据
const getStations = async () => {
    loading.value = true;
    try {
        const res = await getLocatorAbnormalAreaStatus();
        if (res.errorCode === 0) {
            if (res.datas && res.datas.length > 0) {
                stations.value = res.datas;
            } else {
                stations.value = [];
            }
        } else {
            showNotify({ type: 'danger', message: res.errorMessage });
        }

    } catch (error) {
        console.error('获取异常停泊区货位数据失败:', error);
        showNotify({ type: 'danger', message: '获取异常停泊区货位数据失败' });
    } finally {
        loading.value = false;
    }
};

onMounted(() => {
    getStations();
});
</script>

<style scoped>
/* ========== 基础样式 ========== */
.delivery-page {
  width: 100%;
  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;
  z-index: 0;
}

/* ========== 主内容区域 ========== */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 30px;
  position: relative;
  z-index: 10;
}

/* 网格布局 */
.stations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* ========== 卡片样式 ========== */
.station-card {
  background: rgba(9, 61, 140, 0.6);
  border: 1px solid #049FD8;
  border-radius: 12px;
  padding: 20px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.3s;
}

.station-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 25px rgba(4, 159, 216, 0.4);
}

.station-occupied {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
}

.station-idle {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.1);
}

.station-pending {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

/* 卡片头部 */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.card-title {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}

/* 状态徽章 */
.status-badge {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}

/* 卡片内容 */
.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.status-success {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.status-danger {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.status-warning {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

/* 物料显示区域 */
.material-display {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.material-image {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 15px;
}

.material-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #7ec8ff;
}

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

.empty-state span {
  font-size: 14px;
}

/* ========== 科技感弹窗样式 ========== */
.tech-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(4, 28, 61, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.tech-modal {
  background: linear-gradient(135deg, #0a3d6d 0%, #041c3d 100%);
  border: 1px solid #049FD8;
  border-radius: 16px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 0 40px rgba(4, 159, 216, 0.3);
}

.modal-content-row {
  padding: 30px;
  display: flex;
  align-items: center;
  gap: 30px;
}

.modal-text {
  flex: 1;
}

.endpoint-info {
  margin-bottom: 20px;
  text-align: left;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.endpoint-info h3 {
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  margin: 0;
  text-align: left;
  display: inline;
  margin-right: 10px;
}

.endpoint-info .endpoint-value {
  color: #00bfff;
  font-weight: bold;
  font-size: 24px;
  font-family: 'Courier New', monospace;
  margin: 0;
  text-align: left;
  display: inline;
}

.modal-text h3 {
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  margin: 0 0 12px 0;
}

.modal-text p {
  font-size: 16px;
  color: #7ec8ff;
  margin: 0;
  line-height: 1.6;
}

.modal-text .highlight {
  color: #00bfff;
  font-weight: bold;
}

.modal-icon {
  flex-shrink: 0;
}

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

.modal-footer {
  padding: 20px 30px 30px;
  display: flex;
  gap: 15px;
}

.modal-btn {
  flex: 1;
  padding: 14px 0;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.cancel-btn {
  background: transparent;
  border: 1px solid #2a7fff;
  color: #7ec8ff;
}

.cancel-btn:hover {
  background: rgba(42, 127, 255, 0.2);
}

.confirm-btn {
  background: linear-gradient(90deg, #dc3545 0%, #ff6b6b 100%);
  border: none;
  color: #fff;
}

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

.take-away-btn {
   background: linear-gradient(90deg, #1e90ff 0%, #00bfff 100%);
  border: none;
  color: #fff;
}

.take-away-btn:hover {
  box-shadow: 0 0 20px rgba(30, 144, 255, 0.5);
}

/* ========== RFID详细信息样式 ========== */
.rfid-details {
  padding: 0 30px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 20px;
}

.details-title {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  margin: 0 0 15px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.details-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 20px;
  background: linear-gradient(135deg, #1e90ff 0%, #00bfff 100%);
  border-radius: 2px;
}

.record-list {
  max-height: 300px;
  overflow-y: auto;
}

.record-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.record-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 10px;
}

.record-index {
  font-weight: bold;
  color: #00bfff;
}

.record-time {
  color: #7ec8ff;
  font-size: 14px;
}

.record-status {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.record-status.success {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.record-status.failed {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.record-message {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #7ec8ff;
  margin-bottom: 12px;
  font-size: 14px;
}

.record-message i {
  color: #00bfff;
  margin-top: 2px;
}

.inventory-section, .check-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.inventory-section h5, .check-section h5 {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  margin: 0 0 8px 0;
}

.inventory-list {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  padding: 8px;
}

.inventory-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  margin-bottom: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  font-size: 13px;
}

.inventory-item:last-child {
  margin-bottom: 0;
}

.inventory-no {
  color: #00bfff;
  font-family: 'Courier New', monospace;
  flex: 2;
}

.inventory-name {
  color: #fff;
  flex: 3;
  text-align: center;
}

.inventory-box {
  color: #7ec8ff;
  flex: 2;
  text-align: right;
}

/* 滚动条样式 */
.record-list::-webkit-scrollbar {
  width: 6px;
}

.record-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.record-list::-webkit-scrollbar-thumb {
  background: rgba(0, 191, 255, 0.3);
  border-radius: 3px;
}

.record-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 191, 255, 0.5);
}

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

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

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

  .station-card {
    min-height: 200px;
    padding: 15px;
  }
  
  .rfid-details {
    padding: 0 20px 15px;
  }
  
  .modal-content-row {
    padding: 20px;
  }
  
  .modal-footer {
    padding: 15px 20px 20px;
  }
}
</style>
