<template>
  <div class="tray-binding-container">
    <!-- 头部区域 -->
    <div class="header">
      <h1><i class="fas fa-qrcode"></i> 托盘数据绑定系统</h1>
      <p>通过扫描枪扫描设备条码，自动将设备绑定到托盘指定位置</p>
    </div>

    <!-- 托盘ID绑定区域 -->
    <div class="tray-id-section">
      <div class="tray-display">
        <div class="tray-label">当前托盘：</div>
        <div class="tray-id">{{ trayId || 'TP-未绑定' }}</div>
      </div>

      <div class="scan-section">
        <input
          type="text"
          class="scan-input"
          placeholder="扫描托盘条码..."
          v-model="trayInput"
          @keyup.enter="setTrayId"
          ref="trayInput"
        >
        <button class="bind-btn" @click="setTrayId">
          <i class="fas fa-barcode"></i> 绑定托盘
        </button>
      </div>
    </div>

    <!-- 设备矩阵区域 -->
    <div class="devices-grid-container">
      <h2 class="grid-title"><i class="fas fa-microchip"></i> 设备绑定矩阵 (8×9)</h2>
      <div class="devices-grid">
        <div
          v-for="(device, index) in devices"
          :key="index"
          class="device-cell"
          :class="{
                  'active': activeCell === index,
                  'empty': !device.value
                }"
          @click="setActiveCell(index)"
        >
          <div class="device-id">
            {{ device.value || '+' }}
          </div>
          <div class="position-indicator">
            {{ getPositionLabel(index) }}
          </div>
        </div>
      </div>
    </div>

    <!-- 设备扫描区域 -->
    <div class="scan-section" style="align-items: center;">
      <input
        type="text"
        class="scan-input"
        placeholder="扫描设备条码..."
        v-model="deviceInput"
        @keyup.enter="addDevice"
        ref="deviceInput"
      >
      <div class="status-bar">
        <i class="fas fa-info-circle"></i>
        已绑定设备: <span class="filled-count">{{ filledCount }}</span>/72
      </div>
    </div>

    <!-- 操作按钮区域 -->
    <div class="binding-controls">
      <button class="reset-btn" @click="resetAll">
        <i class="fas fa-redo"></i> 重置所有
      </button>
      <button
        class="bind-btn"
        @click="bindTray"
        :disabled="filledCount === 0 || !trayId"
      >
        <i class="fas fa-paper-plane"></i> 提交绑定
      </button>
    </div>

    <!-- 使用说明区域 -->
    <div class="instructions">
      <h3><i class="fas fa-lightbulb"></i> 使用说明</h3>
      <ul>
        <li>1. 首先扫描<span class="highlight">托盘条码</span>并点击绑定托盘按钮</li>
        <li>2. 点击矩阵中的单元格或按顺序扫描<span class="highlight">设备条码</span>（扫描枪自动识别）</li>
        <li>3. 设备条码会自动填充到当前激活的单元格中</li>
        <li>4. 可以手动点击任何单元格进行修改或重新扫描</li>
        <li>5. 完成所有设备绑定后，点击<span class="highlight">提交绑定</span>按钮</li>
        <li><i class="fas fa-bolt scanner-icon"></i> 提示：使用扫描枪时，请确保输入框获得焦点</li>
      </ul>
    </div>
  </div>
</template>

<script>
import {queryByDepartmentId} from "@/api/storey/storey";

export default {
  name: "TrayBinding",
  data() {
    return {
      // 托盘ID
      trayId: '',
      trayInput: '',

      // 设备矩阵数据 (8x9 = 72个设备)
      devices: Array(72).fill().map((_, i) => ({
        id: i + 1,
        value: '',
        row: Math.floor(i / 9) + 1,
        col: (i % 9) + 1
      })),

      // 当前激活的单元格
      activeCell: 0,

      // 设备输入
      deviceInput: ''
    };
  },
  computed: {
    // 计算已填充的设备数量
    filledCount() {
      return this.devices.filter(d => d.value).length;
    }
  },
  methods: {
    // 设置托盘ID
    setTrayId() {
      if (this.trayInput) {
        this.trayId = `TP-${this.trayInput}`;
        this.trayInput = '';
        this.$nextTick(() => {
          this.$refs.deviceInput.focus();
        });
      }
    },

    // 设置当前激活的单元格
    setActiveCell(index) {
      this.activeCell = index;
      this.$nextTick(() => {
        this.$refs.deviceInput.focus();
      });
    },

    // 添加设备到当前激活单元格
    addDevice() {
      if (this.deviceInput) {
        this.devices[this.activeCell].value = this.deviceInput;
        this.deviceInput = '';

        // 自动移动到下一个单元格
        if (this.activeCell < 71) {
          this.activeCell++;
        } else {
          // 如果已经是最后一个，则回到第一个
          this.activeCell = 0;
        }
      }
    },

    // 获取位置标签 (行-列)
    getPositionLabel(index) {
      const row = Math.floor(index / 9) + 1;
      const col = (index % 9) + 1;
      return `${row}-${col}`;
    },

    // 绑定托盘
    bindTray() {
      const boundDevices = this.devices
        .filter(d => d.value)
        .map(d => ({
          position: this.getPositionLabel(d.id - 1),
          deviceId: d.value
        }));

      alert(`托盘 ${this.trayId} 绑定成功!\n绑定设备数量: ${boundDevices.length}`);
      console.log('托盘ID:', this.trayId);
      console.log('绑定设备:', boundDevices);
    },

    // 重置所有数据
    resetAll() {
      if (confirm('确定要重置所有数据吗？')) {
        this.trayId = '';
        this.trayInput = '';
        this.deviceInput = '';
        this.devices = this.devices.map(d => ({ ...d, value: '' }));
        this.activeCell = 0;
        this.$nextTick(() => {
          this.$refs.trayInput.focus();
        });
      }
    }
  },
  mounted() {
    // 初始化时聚焦到托盘输入框
    this.$nextTick(() => {
      this.$refs.trayInput.focus();
    });
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  background: linear-gradient(135deg, #1a2a6c, #2c3e50);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  color: #fff;
}

.tray-binding-container {
  width: 100%;
  max-width: 1200px;
  background: rgba(10, 20, 40, 0.85);
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  border: 1px solid rgba(100, 180, 255, 0.3);
  padding: 30px;
  position: relative;
}

.header {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}

.header h1 {
  font-size: 2.8rem;
  background: linear-gradient(to right, #4facfe, #00f2fe);
  -webkit-background-clip: text;
  color: transparent;
  margin-bottom: 15px;
  text-shadow: 0 0 15px rgba(79, 172, 254, 0.5);
}

.header p {
  color: #a0d2ff;
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

.tray-id-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.tray-display {
  background: rgba(0, 40, 80, 0.4);
  border: 2px solid rgba(64, 158, 255, 0.6);
  border-radius: 15px;
  padding: 25px 40px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.tray-label {
  font-size: 1.4rem;
  color: #64c8ff;
  font-weight: bold;
}

.tray-id {
  font-size: 2.2rem;
  font-weight: bold;
  letter-spacing: 3px;
  background: linear-gradient(to right, #64c8ff, #3a7bd5);
  -webkit-background-clip: text;
  color: transparent;
  min-width: 250px;
  text-align: center;
}

.scan-section {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.scan-input {
  background: rgba(0, 30, 60, 0.5);
  border: 2px solid #409EFF;
  border-radius: 50px;
  padding: 15px 25px;
  color: white;
  font-size: 1.2rem;
  width: 300px;
  transition: all 0.3s;
}

.scan-input:focus {
  outline: none;
  border-color: #64c8ff;
  box-shadow: 0 0 15px rgba(100, 200, 255, 0.5);
}

.devices-grid-container {
  margin-bottom: 40px;
}

.grid-title {
  text-align: center;
  font-size: 1.8rem;
  color: #64ffda;
  margin-bottom: 25px;
  text-shadow: 0 0 10px rgba(100, 255, 218, 0.3);
}

.devices-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 12px;
  margin: 0 auto;
  max-width: 900px;
}

.device-cell {
  background: rgba(30, 60, 100, 0.4);
  border: 2px solid rgba(64, 158, 255, 0.5);
  border-radius: 8px;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.device-cell:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
  border-color: #64c8ff;
  background: rgba(40, 80, 140, 0.5);
}

.device-cell.active {
  border-color: #64ffda;
  background: rgba(100, 255, 218, 0.15);
  box-shadow: 0 0 15px rgba(100, 255, 218, 0.4);
}

.device-id {
  font-size: 1.1rem;
  font-weight: bold;
  color: #fff;
  text-align: center;
  word-break: break-all;
  padding: 5px;
}

.device-cell.empty .device-id {
  color: #a0d2ff;
  font-size: 1.8rem;
  opacity: 0.7;
}

.position-indicator {
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
}

.binding-controls {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
}

.bind-btn {
  background: linear-gradient(to right, #11998e, #38ef7d);
  color: white;
  border: none;
  padding: 18px 45px;
  font-size: 1.4rem;
  font-weight: bold;
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all 0.3s;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.bind-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(17, 153, 142, 0.5);
}

.bind-btn:disabled {
  background: linear-gradient(to right, #555, #777);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.reset-btn {
  background: linear-gradient(to right, #ff416c, #ff4b2b);
  color: white;
  border: none;
  padding: 18px 45px;
  font-size: 1.4rem;
  font-weight: bold;
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all 0.3s;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.reset-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(255, 65, 108, 0.5);
}

.status-bar {
  text-align: center;
  margin-top: 30px;
  padding: 15px;
  background: rgba(0, 30, 60, 0.5);
  border-radius: 10px;
  font-size: 1.2rem;
  color: #64ffda;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.filled-count {
  font-weight: bold;
  color: #64c8ff;
  font-size: 1.4rem;
}

.instructions {
  background: rgba(0, 30, 60, 0.4);
  border-radius: 15px;
  padding: 25px;
  margin-top: 40px;
  border: 1px solid rgba(100, 200, 255, 0.3);
}

.instructions h3 {
  color: #64ffda;
  margin-bottom: 15px;
  font-size: 1.5rem;
}

.instructions ul {
  padding-left: 25px;
}

.instructions li {
  margin-bottom: 10px;
  line-height: 1.6;
  color: #a0d2ff;
}

.scanner-icon {
  color: #64ffda;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

.highlight {
  background: rgba(100, 255, 218, 0.2);
  padding: 2px 5px;
  border-radius: 4px;
}

/* 响应式设计 */
@media (max-width: 900px) {
  .devices-grid {
    grid-template-columns: repeat(6, 1fr);
    max-width: 600px;
  }

  .tray-id-section {
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  .devices-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 400px;
  }

  .tray-display {
    padding: 15px 25px;
  }

  .tray-id {
    font-size: 1.8rem;
    min-width: 200px;
  }

  .bind-btn, .reset-btn {
    padding: 15px 30px;
    font-size: 1.2rem;
  }
}
</style>
