<template>
  <div class="cardInfo">
    <el-card shadow="card">
      <h2 class="cardHead">{{ headline }}</h2>
      <!-- 动态生成 el-row 和 el-col -->
      <template v-for="(chunk, rowIndex) in chunkArray(floorOne, 6)" :key="rowIndex">
        <el-row :gutter="10" class="mb-4">
          <el-col v-for="(item, colIndex) in chunk" :key="colIndex" :span="24 / chunk.length">
            <div>
              <!-- class="grid-content" -->
              <el-tag v-if="item.policeType == '1'" type="primary">{{ item.name }}</el-tag>
              <el-tag v-else-if="item.policeType == '2'" type="warning">{{ item.name }}</el-tag>
              <el-tag v-else type="danger">{{ item.name }}</el-tag>
              <!-- {{ item.name }} -->
            </div>
          </el-col>
        </el-row>
      </template>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, computed } from 'vue';

const props = defineProps({
  fontFamily: {
    type: String,
    default: 'Segoe UI'
  },
  fontSize: {
    type: Number,
    default: 14
  },
  headline: {
    type: String,
    default: '自定义标题'
  }
});

let computedSize = computed({
  // 读取
  get() {
    return props.fontSize + 'px';
  }, // 修改
  set(val) {
    console.log('有人修改了fullName', val);
  }
});

interface CallThePolice {
  id: string; //遥信id
  name: string; //遥信名称
  policeType: string; //遥信类型
}

// 将数组分块的工具函数
function chunkArray<T>(array: T[], size: number): T[][] {
  const result: T[][] = [];
  for (let i = 0; i < array.length; i += size) {
    result.push(array.slice(i, i + size));
  }
  return result;
}

// 根据 policeType 返回对应背景色
function getBackgroundColor(policeType: string): string {
  switch (policeType) {
    case '1':
      return ''; // 白色
    case '2':
      return 'rgb(238, 190, 119)'; // 黄色
    case '3':
      return 'rgb(196, 86, 86)'; // 红色
    default:
      return ''; // 默认白色
  }
}

let val = ref('1');

let floorOne = reactive<Array<CallThePolice>>([
  {
    id: '1',
    name: '1号感烟',
    policeType: '1'
  },
  {
    id: '2',
    name: '2号感烟',
    policeType: '1'
  },
  {
    id: '3',
    name: '3号感烟',
    policeType: '2'
  },
  {
    id: '4',
    name: '4号感烟',
    policeType: '1'
  },
  {
    id: '5',
    name: '5号感烟',
    policeType: '1'
  },
  {
    id: '6',
    name: '6号感烟',
    policeType: '1'
  },
  {
    id: '7',
    name: '7号感烟',
    policeType: '1'
  },
  {
    id: '8',
    name: '8号感烟',
    policeType: '1'
  },
  {
    id: '9',
    name: '9号感烟',
    policeType: '1'
  },
  {
    id: '10',
    name: '10号感烟',
    policeType: '1'
  },
  {
    id: '11',
    name: '11号感烟',
    policeType: '1'
  },
  {
    id: '12',
    name: '12号感烟',
    policeType: '3'
  },
  {
    id: '13',
    name: '13号感烟',
    policeType: '2'
  },
  {
    id: '14',
    name: '14号感烟',
    policeType: '1'
  },
  {
    id: '15',
    name: '15号感烟',
    policeType: '1'
  },
  {
    id: '16',
    name: '16号感烟',
    policeType: '3'
  },
  {
    id: '17',
    name: '17号感烟',
    policeType: '1'
  },
  {
    id: '18',
    name: '18号感烟',
    policeType: '1'
  },
  {
    id: '19',
    name: '1号声光报警器',
    policeType: '1'
  },
  {
    id: '20',
    name: '2号声光报警器',
    policeType: '1'
  },
  {
    id: '21',
    name: '1号手报',
    policeType: '1'
  },
  {
    id: '22',
    name: '2号手报',
    policeType: '2'
  }
]);
</script>

<style scoped>
/* 去除 el-card__body 的默认边距 */
:deep(.el-card__body) {
  padding-top: 5px !important;
  padding-bottom: 0 !important;
  /* margin: 2 !important; */
}

.cardInfo {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  /* max-width: 480px; */
  color: v-bind('props.testColor');
  font-family: v-bind('props.fontFamily');
  /* font-family: 'Segoe UI'; */
  font-size: v-bind('computedSize');
}
.card {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.cardHead {
  margin: 0;
  padding-bottom: 5px;
  /* padding-bottom: 10px; */
  text-align: center;
}
.grid-content {
  /* background-color: #9e0000; */
  display: flex;
  flex-direction: column; /* 垂直排列 */
  justify-content: center; /* 垂直居中 */
  align-items: flex-start;
}
</style>
