<!--
  Description: 设备统计-设备运行情况和数据上报情况
  Author: 李亚光
  Date: 2023-08-22
 -->
<script lang="ts" setup name="DeviceReport">
import { img } from './imgData'
import { getDeviceReport, getDeviceRun } from '@/api/home/device/count'
import layout from '@/views/home/alarm/count/components/layout.vue'
// 设备运行情况数据
const runLoading = ref(true)
const runData = ref([
  {
    name: '在线',
    value: 0,
    unit: '个',
    img: img.online,
    id: '1',
  },
  {
    name: '离线',
    value: 0,
    unit: '个',
    img: img.offline,
    id: '0',
  },
  {
    name: '维修',
    value: 0,
    unit: '个',
    img: img.upkeep,
    id: '2',
  },
  {
    name: '备用',
    value: 0,
    unit: '个',
    img: img.backup,
    id: '3',
  },

])

// 设备上报情况数据
const reportLoading = ref(true)
const reportData = ref([
  {
    name: '日上报量',
    value: 0,
    unit: '条',
    id: 'day',
  },
  {
    name: '月上报量',
    value: 0,
    unit: '条',
    id: 'month',
  },
])

// 获取设备运行状况数据和设备上报情况数据
const fetchData = () => {
  runLoading.value = true
  getDeviceRun().then((res) => {
    res.data.forEach((element: any) => {
      const index = runData.value.findIndex((item: any) => item.id === element.name)
      if (index !== -1) {
        runData.value[index].value = element.value
      }
    })
    runLoading.value = false
  }).catch(() => {
    runLoading.value = false
  })
  reportLoading.value = true
  getDeviceReport().then((res) => {
    res.data.forEach((element: any) => {
      const index = reportData.value.findIndex((item: any) => item.id === element.name)
      if (index !== -1) {
        reportData.value[index].value = element.value
      }
    })
    reportLoading.value = false
  }).catch(() => {
    reportLoading.value = false
  })
}
fetchData()
</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: 65%;
  }

  .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: 34%;
    box-sizing: border-box;
    // padding: 10px;

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

      .item {
        width: 40%;
        display: flex;
        flex-wrap: wrap;

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

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

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

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