<!--
  Description: 设备统计/报警统计
  Author: 李亚光
  Date: 2025-06-12
 -->
<script lang="ts" setup name="DeviceAndAlarm">
import layout from './layout.vue'
import {img} from './imgData'
const runLoading = ref(false)
const reportLoading = ref(false)
const runData = ref([
  {
    name: '正常',
    img:img.backup,
    unit: '台',
    value:155
  },
  {
    name: '使用中',
    img:img.online,
    unit: '台',
    value:132
  },
   {
    name: '离线',
    img:img.offline,
    unit: '台',
    value:15
  },
])
const reportData = ref([
  {
    name: '正在报警',
    value: 22,
    unit: '个'
  },
  {
    name: '今日报警',
    value: 3,
    unit: '个'
  },
  {
    name: '本周报警',
    value: 15,
    unit: '个'
  },
  {
    name: '本月报警',
    value: 19,
    unit: '个'
  },
  {
    name: '全年报警',
    value: 22,
    unit: '个'
  },
])
</script>

<template>
  <div class="header-container">
    <!-- 设备统计 -->
    <layout class="left" title="设备统计">
      <template #content>
        <div v-loading="runLoading" class="content">
          <div v-for="item in runData" :key="item.name" class="item">
            <div class="img">
              <img :src="item.img">
            </div>
            <div class="text">
              <div class="name">
                {{ item.name }}
              </div>
              <div class="value">
                <span class="count"> {{ item.value }}</span>
                <span class="unit"> {{ item.unit }}</span>
              </div>
            </div>
          </div>
        </div>
      </template>
    </layout>
    <!-- 报警统计 -->
    <layout class="right" title="报警统计">
      <template #content>
        <div v-loading="reportLoading" class="content">
          <div v-for="item in reportData" :key="item.name" class="item">
            <div class="name">
              {{ item.name }}
            </div>
            <div class="value">
              <span class="conut"> {{ item.value }}</span>
              <span class="unit"> {{ item.unit }}</span>
            </div>
          </div>
        </div>
      </template>
    </layout>
  </div>
</template>

<style lang="scss" scoped>
.header-container {
  display: flex;
  justify-content: space-between;

  .left {
    width: 34%;
  }

  .content {
    display: flex;
    justify-content: space-around;
    padding-top: 10px;

    .item {
      // width: 21%;
      box-sizing: border-box;
      display: flex;
      // padding: 10px;

      img {
        width: 55px;
        height: 55px;
      }

      .text {
        margin-left: 25px;

        .name {
          font-weight: 700;
          font-size: 20px;
          // height: 27.5px;
          // line-height: 27.5px;
        }

        .value {
          // height: 27.5px;
          // line-height: 27.5px;
          // font-size: 22px;

          .count {
            font-size: 22px;
            font-weight: 700;
          }

          .unit {
            padding-left: 5px;
            font-size: 18px;
          }
        }
      }
    }
  }

  .right {
    width: 65%;
    box-sizing: border-box;
    // padding: 10px;

    .content {
      display: flex;
      padding: 10px;
      // justify-content: space-around;
      justify-content: space-evenly;

      .item {
        width: 20%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        .name {
          // font-weight: 700;
          font-weight: 700;
          font-size: 20px;
          // height: 27.5px;
          // line-height: 27.5px;
          width: 51%;
          text-align: center;
          border-left: 4px solid red;
        }

        .value {
          // height: 27.5px;
          // line-height: 27.5px;
          width: 51%;
          text-align: center;

          .conut {
            font-size: 22px;
            font-weight: 700;
          }

          .unit {
            padding-left: 5px;
            font-size: 18px;
          }
        }
      }
    }
  }
}
</style>