<template>
  <view>
    <!-- 遍历每排 -->
    <view v-for="(row, rowIndex) in rows" :key="rowIndex" class="row">
      <!-- 遍历每排的卡片 -->
      <view v-for="(item, index) in row" :key="item.id" class="card">
        <!-- 机房卡片 -->
        <view
          :class="['card-content', item.status === '待巡检' ? 'pending' : 'checked']"
          @click="toggleStatus(rowIndex, index)"
        >
          <!-- 状态模块 -->
          <view class="status-module">
            <image :src="getStatusIcon(item.status)" class="status-icon"></image>
            <text class="status-text">{{ item.status }}</text>
          </view>
          <!-- 机房名称 -->
          <text class="room-name">{{ item.name }}</text>
        </view>
        <!-- 右侧箭头（非最后一列） -->
        <view
          v-if="index < row.length - 1 && rowIndex % 2 === 0"
          :class="['arrow-right', item.status === '待巡检' ? 'gray' : 'blue']"
        >
          →
        </view>
        <!-- 左侧箭头（非第一列，偶数排） -->
        <view
          v-if="index > 0 && rowIndex % 2 !== 0"
          :class="['arrow-left', item.status === '待巡检' ? 'gray' : 'blue']"
        >
          ←
        </view>
      </view>
      <!-- 下方箭头（非最后一排） -->
      <view
        v-if="rowIndex < rows.length - 1"
        :class="['arrow-down', row[row.length - 1].status === '待巡检' ? 'gray' : 'blue']"
      >
        {{ rowIndex % 2 === 0 ? '↓' : '↑' }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 原始数据
      rooms: [
        { id: 1, name: '机房1', status: '待巡检' },
        { id: 2, name: '机房2', status: '正常' },
        { id: 3, name: '机房3', status: '异常' },
        { id: 4, name: '机房4', status: '待巡检' },
        { id: 5, name: '机房5', status: '正常' },
        { id: 6, name: '机房6', status: '异常' },
        { id: 7, name: '机房7', status: '待巡检' },
        { id: 8, name: '机房8', status: '正常' },
        { id: 9, name: '机房9', status: '异常' },
        { id: 10, name: '机房10', status: '待巡检' },
        // ... 其他机房
      ],
      rows: [], // 分组后的数据
    };
  },
  onLoad() {
    this.groupRooms();
  },
  methods: {
    // 将数据按每排 5 个分组，并按照 S 型排列
    groupRooms() {
      const rows = [];
      for (let i = 0; i < this.rooms.length; i += 5) {
        const row = this.rooms.slice(i, i + 5);
        // 偶数排反转，实现 S 型
        if (rows.length % 2 !== 0) {
          row.reverse();
        }
        rows.push(row);
      }
      this.rows = rows;
    },
    // 获取状态图标
    getStatusIcon(status) {
      const icons = {
        待巡检: '/static/pending.png',
        正常: '/static/normal.png',
        异常: '/static/abnormal.png',
      };
      return icons[status];
    },
    // 点击卡片切换状态
    toggleStatus(rowIndex, index) {
      const room = this.rows[rowIndex][index];
      const statusList = ['待巡检', '正常', '异常'];
      const currentIndex = statusList.indexOf(room.status);
      room.status = statusList[(currentIndex + 1) % statusList.length];
    },
  },
};
</script>

<style>
.row {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
}
.card {
  display: flex;
  align-items: center;
}
.card-content {
  width: 100px;
  height: 120px;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 10px;
}
.card-content.pending {
  background-color: #f0f0f0; /* 灰色背景 */
}
.card-content.checked {
  background-color: #ffffff; /* 白色背景 */
}
.status-module {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.status-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 5px;
}
.status-text {
  font-size: 12px;
  color: #333;
}
.room-name {
  font-size: 14px;
  margin-top: 10px;
}
.arrow-right,
.arrow-left,
.arrow-down {
  font-size: 20px;
}
.arrow-right.gray,
.arrow-left.gray,
.arrow-down.gray {
  color: #999; /* 灰色箭头 */
}
.arrow-right.blue,
.arrow-left.blue,
.arrow-down.blue {
  color: #1e90ff; /* 淡蓝色箭头 */
}
.arrow-down {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}
</style>