<!--
  Description: 设备统计-设备分类统计和离线统计
  Author: 李亚光
  Date: 2023-08-22
 -->
<script lang="ts" setup name="DeviceTypeCount">
import { getDeviceType, getOffline } from '@/api/home/device/count'
// 设备分类统计数据
const deviceTypeLoading = ref(true)
const xAxisData = ref([])
const data = ref<any[]>([])
// 设备离线数据
const offLoading = ref(true)
const pieData = ref<any[]>([])
const xAxisDataOff = ref([])
const dataOff = ref<any[]>([])
// setTimeout(() => {
//   xAxisData.value = [
//     '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
//   ]
//   data.value = [
//     {
//       name: '闸井浓度超限',
//       data: [1, 8, 5, 8, 4],
//     },
//   ]
// }, 1000)

// 获取数据
const fetchData = () => {
  deviceTypeLoading.value = true
  getDeviceType().then((res) => {
    xAxisData.value = res.data.map((item: any) => item.name)
    data.value = [
      {
        name: '设备数量',
        data: res.data.map((item: any) => item.value),
      },
    ]
    deviceTypeLoading.value = false
  }).catch(() => {
    deviceTypeLoading.value = false
  })
  offLoading.value = true
  getOffline().then((res) => {
    pieData.value = res.data
    xAxisDataOff.value = res.data.map((item: any) => item.name)
    dataOff.value = [
      {
        name: '设备离线数量',
        data: res.data.map((item: any) => item.value),
        color: '#ccc',
      },
    ]
    offLoading.value = false
  }).catch(() => {
    offLoading.value = false
  })
}
fetchData()
</script>

<template>
  <div class="header-container">
    <!-- 设备分类统计 -->
    <div class="header-left">
      <div class="title">
        设备分类统计
      </div>
      <div class="content">
        <!-- 垂直柱状图 -->
        <div v-loading="deviceTypeLoading" class="bar">
          <bar-chart-horizontal
            :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
            :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
          />
        </div>
      </div>
    </div>
    <!-- 离线统计 -->
    <div class="header-right">
      <div class="title">
        离线统计
      </div>
      <div v-loading="offLoading" class="content">
        <!-- 柱状图 -->
        <div class="bar">
          <bar-chart-vertical
            :x-axis-data="xAxisDataOff" :bar-coner="0" :data="dataOff" :colors="[]" :bar-width="15"
            :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
          />
        </div>
        <!-- 饼图 -->
        <div class="circle">
          <pie-chart
            :data="pieData" radius="50%" label-position="outside"
            :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '50' }"
          />
        </div>
      </div>
    </div>
  </div>
</template>

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

  .header-left {
    width: 50%;
    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;

      .bar {
        width: 100%;
        height: 300px;
      }
    }
  }

  .header-right {
    width: 50%;
    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;

      .bar {
        width: 60%;
        height: 300px;
      }

      .circle {
        width: 40%;
        height: 300px;
      }
    }
  }
}
</style>