<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 class="aging">
      老化柜看板
    </div>
<!--    <el-row :gutter="20">-->
<!--      <template v-for="(cabinet, index) in agingCabinetList" :key="cabinet.deviceCode">-->
<!--        <el-col :span="4" v-if="index % 6 === 0" style="margin-bottom: 20px;">-->
<!--          <el-row :gutter="10">-->
<!--            <el-col :span="8" v-for="i in 6" :key="(index + i - 1)">-->
<!--              <el-card-->
<!--                :body-style="{ padding: '10px' }"-->
<!--                :class="agingCabinetList[index + i - 1].deviceStatus"-->
<!--              >-->
<!--                {{ agingCabinetList[index + i - 1].deviceCode }}-->
<!--              </el-card>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--        </el-col>-->
<!--      </template>-->
<!--    </el-row>-->
    <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.status]"
              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: "TestScheduledTasks",
  data() {
    return {
      // 示例数据格式，实际从后端获取
      cabinets: [
        { id: 1, status: 'available' },
        { id: 2, status: 'occupied' },
        { id: 3, status: 'default' },
        { id: 4, status: 'default' },
        { id: 5, status: 'default' },
        { id: 6, status: 'default' },
        { id: 7, status: 'default' },
        { id: 8, status: 'default' },
        { id: 9, status: 'default' },
        { id: 10, status: 'default' },
        { id: 11, status: 'default' },
        { id: 12, status: 'default' },
        { id: 13, status: 'default' },
        { id: 14, status: 'default' },
        { id: 15, status: 'default' },
        { id: 16, status: 'default' },
        { id: 17, status: 'default' },
        { id: 18, status: 'default' },
        { id: 19, status: 'default' },
        { id: 20, status: 'default' },
        { id: 21, status: 'default' },
        { id: 22, status: 'default' },
        { id: 23, status: 'default' },
        { id: 24, status: 'default' },
        { id: 25, status: 'default' },
        { id: 26, status: 'default' },
        { id: 27, status: 'default' },
        { id: 28, status: 'default' },
        { id: 29, status: 'default' },
        { id: 30, status: 'default' },
        { id: 31, status: 'default' },
        { id: 32, status: 'default' },
        { id: 33, status: 'default' },
        { id: 34, status: 'default' },
        { id: 35, status: 'default' },
        { id: 36, status: 'default' },
        // ...共36个
      ],
      // 状态对应的颜色类名
      statusMap: {
        default: 'default',
        available: 'available',
        occupied: '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) {
      this.msgSuccess("你想看层信息是吧");
    },
    getTooltipContent(item) {
      switch (item.status) {
        case 'occupied':
          return item.faultReason || '无故障详情';
        case 'available':
          return '运行中';
        case 'default':
        default:
          return '空闲';
      }
    },
    testAgingCabinetAndPowerCheck() {
      getAgingCabinetAndPowerCheck().then(response => {
          this.agingCabinetList = 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;
}
/* 添加更多状态样式 */


.cabinet-container {
  position: relative;
  padding: 40px;
}

.legend {
  position: fixed; /* 关键：固定定位 */
  top: 100px;
  right: 20px;
  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>
