<template>
  <div class="app-container">
    <!-- 外层容器，添加边框样式 -->
    <div class="cabinet-board-container">
      <!-- 标题区域 -->
      <div class="board-header">
        <div class="board-title">
          <div class="title-text">老化柜看板</div>
          <div class="title-line"></div>
        </div>
      </div>

      <!-- 右上角的图例提示 -->
      <div class="legend">
        <div class="legend-item">
          <span class="legend-color green"></span> 运行中
        </div>
        <div class="legend-item">
          <span class="legend-color red"></span> 故障
        </div>
        <div class="legend-item">
          <span class="legend-color gray"></span> 空闲
        </div>
      </div>

      <div class="cabinet-content">
        <!-- 渲染每一行 -->
        <el-row :gutter="20" v-for="(row, rowIndex) in cabinetRows" :key="rowIndex">
          <!-- 每行渲染6个卡片 -->
          <el-col
            :span="4"
            v-for="item in row"
            :key="item.id"
            style="margin-bottom: 20px; text-align: center;"
          >
            <!-- 使用 el-tooltip 来提供 hover 提示 -->
            <el-tooltip
              :content="getTooltipContent(item)"
              placement="top"
            >
              <el-card
                :class="statusMap[item.deviceStatus]"
                style="
              width: 100px;
              height: 100px;
              margin: 0 auto;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 18px;
              font-weight: bold;"
                @click.native="handleCardClick(item)"
              >
                {{ item.id +  "号柜" }}
              </el-card>
            </el-tooltip>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { getAgingCabinetAndPowerCheck } from "@/api/testScheduledTasks/testTasks";
export default {
  name: "AgingCabinetBoard",
  data() {
    return {
      // 示例数据格式，实际从后端获取
      cabinets: [
        { id: 1, deviceStatus: '1' },
        { id: 2, deviceStatus: '2' },
        { id: 3, deviceStatus: '0' },
        { id: 4, deviceStatus: '0' },
        { id: 5, deviceStatus: '0' },
        { id: 6, deviceStatus: '0' },
        { id: 7, deviceStatus: '0' },
        { id: 8, deviceStatus: '0' },
        { id: 9, deviceStatus: '0' },
        { id: 10, deviceStatus: '0' },
        { id: 11, deviceStatus: '0' },
        { id: 12, deviceStatus: '0' },
        { id: 13, deviceStatus: '0' },
        { id: 14, deviceStatus: '0' },
        { id: 15, deviceStatus: '0' },
        { id: 16, deviceStatus: '0' },
        { id: 17, deviceStatus: '0' },
        { id: 18, deviceStatus: '0' },
        { id: 19, deviceStatus: '0' },
        { id: 20, deviceStatus: '0' },
        { id: 21, deviceStatus: '0' },
        { id: 22, deviceStatus: '0' },
        { id: 23, deviceStatus: '0' },
        { id: 24, deviceStatus: '0' },
        { id: 25, deviceStatus: '0' },
        { id: 26, deviceStatus: '0' },
        { id: 27, deviceStatus: '0' },
        { id: 28, deviceStatus: '0' },
        { id: 29, deviceStatus: '0' },
        { id: 30, deviceStatus: '0' },
        { id: 31, deviceStatus: '0' },
        { id: 32, deviceStatus: '0' },
        { id: 33, deviceStatus: '0' },
        { id: 34, deviceStatus: '0' },
        { id: 35, deviceStatus: '0' },
        { id: 36, deviceStatus: '0' },
        // 共36个
      ],
      // 状态对应的颜色类名
      statusMap: {
        0: 'default',
        1: 'available',
        2: 'occupied'
      },
      agingCabinetList: null
    };
  },
  created() {
  },
  computed: {
    cabinetRows() {
      const rows = [];
      for (let i = 0; i < 36; i += 6) {
        rows.push(this.cabinets.slice(i, i + 6));
      }
      return rows;
    }
  },
  mounted() {
    // this.testAgingCabinetAndPowerCheck();
  },
  methods: {
    handleCardClick(item) {
      // 触发事件传递 cabinetId 给父组件
      // 3 是 AgingLayer 组件的索引
      this.$emit('cabinet-click', item, 3);
    },
    getTooltipContent(item) {
      switch (item.deviceStatus) {
        case '2':
          return item.errorReason || '无故障详情';
        case '1':
          return '运行中';
        case '0':
        default:
          return '空闲';
      }
    },
    testAgingCabinetAndPowerCheck() {
      getAgingCabinetAndPowerCheck().then(response => {
        this.cabinets = response;
      });
    }
  }
};
</script>
<style>
/* 外层容器样式 */
.cabinet-board-container {
  padding: 20px;
  background: rgba(4, 18, 57, 0.7);
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 153, 255, 0.2);
  border: 1px solid rgba(64, 158, 255, 0.3);
}

/* 标题区域样式 */
.board-header {
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(64, 158, 255, 0.3);
}

.board-title {
  display: flex;
  flex-direction: column;
}

.title-text {
  font-size: 22px;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(64, 158, 255, 0.5);
}

.title-line {
  height: 3px;
  width: 100px;
  background: linear-gradient(to right, #409EFF, transparent);
  margin-top: 8px;
  border-radius: 2px;
}

/* 内容区域样式 */
.cabinet-content {
  padding: 20px;
}

/* 状态样式保持不变 */
.default {
  background-color: #f0f0f0;
}
.available {
  background-color: #67c23a;
  color: white;
}
.occupied {
  background-color: #f56c6c;
  color: white;
}

/* 卡片悬停效果 */
.el-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  transition: all 0.2s ease;
}

/* 图例样式调整 */
.legend {
  position: absolute; /* 修改为绝对定位，相对于外层容器 */
  top: 50px; /* 调整与顶部距离 */
  right: 40px; /* 调整与右侧距离 */
  display: flex;
  gap: 15px;
  background-color: rgba(4, 18, 57, 0.8); /* 半透明背景，与整体风格统一 */
  padding: 10px 15px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10; /* 确保在内容上层 */
  font-size: 14px;
  color: #e0f0ff; /* 浅色文字，适应深色背景 */
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.legend-color {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.legend-color.red {
  background-color: #f56c6c;
}

.legend-color.green {
  background-color: #67c23a;
}

.legend-color.gray {
  background-color: #f0f0f0;
}

/* 调整app-container样式，作为外层容器 */
.app-container {
  position: relative;
  background-color: #030b2a; /* 整体背景色，与其他界面保持一致 */
  min-height: 100vh; /* 确保占满全屏高度 */
  padding: 0;
}
</style>
