<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 v-loading="pageLoading" element-loading-text="老化柜巡查中..."
           element-loading-spinner="el-icon-loading"
           element-loading-background="rgba(255, 255, 255, 0.1)">

        <div class="cabinet-content">
          <!-- 渲染每一行 -->
          <el-row :gutter="20" v-for="(row, rowIndex) in cabinetRows" :key="rowIndex">
            <!-- 每行渲染6个卡片 -->
            <el-col
              :span="4"
              v-for="(item, colIndex) in row"
              :key="item.fEquipmentId"
              style="margin-bottom: 20px; text-align: center;"
            >
              <!-- 使用 el-tooltip 来提供 hover 提示 -->
              <el-tooltip
                :content="getTooltipContent(item)"
                placement="top"
              >
                <el-card
                  :class="statusMap[item.fStatus]"
                  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.fEquipmentCode +  "号柜" }}-->
                  <!-- 核心：调用方法生成编号，传入总索引 = 行索引*6 + 列索引 -->
                  {{ getCabinetNumber(rowIndex * 6 + colIndex) }}
                </el-card>
              </el-tooltip>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAllEquipmentList } from "@/api/equipment/equipment"
export default {
  name: "AgingCabinetBoard",
  data() {
    return {
      // 示例数据格式，实际从后端获取
      cabinets: [],
      // 状态对应的颜色类名
      statusMap: {
        0: 'default',
        1: 'available',
        2: 'occupied'
      },
      agingCabinetList: null,

      pageLoading: true, // 新增：页面全局加载状态
    };
  },
  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();

    this.initWebSocket(); // 初始化WebSocket连接
  },
  methods: {
    // 新增：计算柜子编号（北-XX / 南-XX）
    getCabinetNumber(totalIndex) {
      if (totalIndex < 15) {
        // 前15个（索引0-14）：北-1 ~ 北-15
        return `北-${totalIndex + 1}`;
      } else if (totalIndex < 30) {
        // 16-30个（索引15-29）：南-1 ~ 南-15
        return `南-${totalIndex - 15 + 1}`; // 15对应南-1，29对应南-15
      } else {
        // 超过30个的情况（可选扩展）
        return `其他-${totalIndex + 1}`;
      }
    },
    // 初始化WebSocket连接
    initWebSocket() {
      // 从环境变量获取基础URL，默认使用Nginx代理地址
      const backendUrl = process.env.VUE_APP_API_BASE_URL || 'http://localhost:8087';
      // 根据需要切换不同的WebSocket端点
      const wsPath = '/agecal/ws-aging-cabinet'; // 或 '/agecal/ws-aging-cabinet'

      // 替换协议并添加完整路径
      const wsUrl = backendUrl.replace('http', 'ws') + wsPath;

      this.ws = new WebSocket(wsUrl);

      // 连接建立
      this.ws.onopen = () => {
        console.log('老化柜WebSocket连接已建立');
        this.pageLoading = false;
      };

      // 接收消息
      this.ws.onmessage = (event) => {
        try {
          const message = JSON.parse(event.data);
          // 只处理老化柜数据类型的消息
          if (message.type === 'aging_cabinet_data') {
            // 按fEquipmentCode升序排序（假设fEquipmentCode是1~30的数字字符串）
            this.cabinets = message.data.sort((a, b) => {
              return Number(a.fEquipmentCode) - Number(b.fEquipmentCode);
            });
            console.log('收到老化柜更新数据，共', message.data.length, '条');
          }
        } catch (e) {
          console.error('解析WebSocket消息失败', e);
        }
      };

      // 连接关闭（自动重连）
      this.ws.onclose = () => {
        console.log('老化柜WebSocket连接关闭，3秒后尝试重连');
        setTimeout(() => this.initWebSocket(), 3000);
      };

      // 连接错误
      this.ws.onerror = (error) => {
        console.error('老化柜WebSocket错误', error);
        this.pageLoading = false;
      };
    },
    handleCardClick(item) {
      // 触发事件传递 cabinetId 给父组件
      // 3 是 AgingLayer 组件的索引
      this.$emit('cabinet-click', item, 3);
    },
    getTooltipContent(item) {
      switch (item.fStatus) {
        case '2':
          return item.errorReason || '无故障详情';
        case '1':
          return '运行中';
        case '0':
        default:
          return '空闲';
      }
    },
    testAgingCabinetAndPowerCheck() {
      // 开始加载：显示全局loading
      this.pageLoading = true;
      getAllEquipmentList().then(response => {
        // 按fEquipmentCode升序排序（假设fEquipmentCode是1~30的数字字符串）
        this.cabinets = response.sort((a, b) => {
          return Number(a.fEquipmentCode) - Number(b.fEquipmentCode);
        });
        this.pageLoading = false;
      })
    },
    // 组件销毁时关闭WebSocket连接
    beforeDestroy() {
      if (this.ws) {
        this.ws.close();
        this.ws = null;
      }
    }
  }
};
</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;
}
</style>
