<template>
  <div class="app-container">
    <!-- 右上角的图例提示 -->
    <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 style="padding: 20px;">
      <!-- 渲染每一行 -->
      <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: 150px;
            height: 150px;
            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>
</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 给父组件
      this.$emit('cabinet-click', item);
    },
    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>
.aging{
  text-align: center;
  font-size: 40px;
}
.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: fixed; /* 关键：固定定位 */
  top: 110px;
  right: 60px;
  display: flex;
  gap: 15px;
  background-color: #fff;
  padding: 10px 15px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 9999; /* 确保在最上层 */
  font-size: 14px;
  color: #333;
}


.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;
}
</style>
