<template>
  <div class="box-model">
    <div class="box-model-title title">
      {{ dataSource.title }}
    </div>
    <div class="box-model-bottom">
      <div class="box-model-item">
        <div style="width: 100%; height: 50%">
          <img width="40" src="../../image/ventilationSystem/state-success.png" />
        </div>
        <!--正常 故障 维修 告警  -->
        <span
          :style="{
            color: {
              '1': '#0dffff',
              '2': 'rgba(255, 118, 54, 1)',
              '3': 'rgba(255, 188, 70, 1)',
              '4': 'rgba(243, 97, 99, 1)',
            }[1],
          }">
          正常
        </span>
      </div>
      <div v-if="dataSource.type === 'fan'" class="box-model-item">
        <div style="width: 100%; height: 50%">
          <img width="40" src="../../image/ventilationSystem/highSpeed.png" />
        </div>
        <!-- 低速 中速 高速 关闭 -->
        <span
          :style="{
            color: [
              'rgba(85, 209, 255, 1)',
              'rgba(0, 144, 255, 1)',
              'rgba(87, 87, 255, 1)',
              'rgba(191, 205, 226, 1)',
            ][2],
            fontSize: '12px',
          }">
          高速启动</span
        >
      </div>
      <div v-if="dataSource.type !== 'fan'" class="box-model-item">
        <div style="width: 100%; height: 50%">
          <img width="40" src="../../image/ventilationSystem/state-open.png" />
        </div>
        <!-- 开启 关闭 -->
        <span
          :style="{
            color: ['rgba(0, 255, 210, 1)', 'rgba(191, 205, 226, 1)'][0],
            fontSize: '12px',
          }">
          开启</span
        >
      </div>
      <div v-if="dataSource.type === 'airCurtain'" class="box-model-item">
        <div style="width: 100%; height: 50%">
          <img width="40" src="../../image/ventilationSystem/hotAir.png" />
        </div>
        <!-- 冷风 热风 -->
        <span
          :style="{
            color: ['rgba(85, 209, 255, 1)', 'rgba(252, 247, 112, 1)'][1],
            fontSize: '12px',
          }">
          热风
        </span>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  const props = defineProps({
    dataSource: {
      type: Object,
      default: () => ({ title: '', number: 0 }), // 假设默认值还包括number属性
    },
  });
</script>
<style lang="less" scoped>
  .box-model {
    position: relative;
    min-width: 162px;
    height: 110px;
    background: inherit;
    background-color: rgba(2, 29, 71, 0.9);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(13, 255, 255, 1);
    border-radius: 8px;
    z-index: 99;
    .title {
      position: relative;
      padding-left: 9px;
      &::before {
        content: '';
        position: absolute;
        left: 10px;
        top: 90%;
        transform: translateY(-50%);
        height: 10px;
        width: 2.5px;
        border-radius: 1px;
        background-color: #0dffff;
      }
    }
    .box-model-title {
      width: 100%;
      height: 20px;
      font-size: 12px;
      color: #0dffff;
      padding: 12px 20px;
    }
    .box-model-bottom {
      width: auto;
      height: 70px;
      margin-top: 12px;
      display: flex;
      color: white;
      font-size: 12px;
      display: flex;
    }
    .box-model-item {
      width: 80px;
      height: 100%;
      display: flex;
      align-items: center; /* 垂直居中 */
      justify-content: center; /* 水平居中 */
      text-align: center; /* 文字水平居中 */
      flex-wrap: wrap;
    }
  }
</style>
