<!--
  Description: 设备统计-设备运行情况和数据上报情况
  Author: 李亚光
  Date: 2023-08-22
 -->
<script lang="ts" setup name="DeviceReport">
import { img } from './imgData'
import { getDeviceReport, getDeviceRun } from '@/api/home/device/count'
// 设备运行情况数据
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">
    <!-- 设备运行情况 -->
    <div class="header-left">
      <div class="title">
        设备运行情况
      </div>
      <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>
    </div>
    <!-- 数据上报情况 -->
    <div class="header-right">
      <div class="title">
        数据上报情况
      </div>
      <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>
    </div>
  </div>
</template>

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

  .header-left {
    width: 65%;
    box-sizing: border-box;
    padding: 10px;

    .title {
      font-weight: 700;
      font-size: 18px;
      border-bottom: 1px solid #ccc;
      padding-bottom: 5px;
    }

    .content {
      display: flex;

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

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

        .text {
          margin-left: 25px;

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

          .value {
            height: 27.5px;
            line-height: 27.5px;

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

  .header-right {
    width: 35%;
    box-sizing: border-box;
    padding: 10px;

    .title {
      font-weight: 700;
      font-size: 18px;
      border-bottom: 1px solid #ccc;
      padding-bottom: 5px;
    }

    .content {
      display: flex;
      padding: 10px;

      .item {
        width: 45%;

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

        .value {
          height: 27.5px;
          line-height: 27.5px;

          .conut {
            font-size: 20px;
            font-weight: 700;
          }
        }
      }
    }
  }
}
</style>