<!--
  Description: 设备统计-设备分类统计和离线统计
  Author: 李亚光
  Date: 2023-08-22
 -->
<script lang="ts" setup name="DeviceTypeCount">
import { getDeviceType, getOffline } from '@/api/home/device/count'
import layout from '@/views/home/alarm/count/components/layout.vue'
// 设备分类统计数据
const deviceTypeLoading = ref(true)
const xAxisData = ref([])
const data = ref<any[]>([])
// 设备离线数据
const offLoading = ref(true)
const pieData = ref<any[]>([])
const colors = 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 = [
      {
        name: '在线',
        value: res.data.map((item: any) => Number(item.deviceCount || '0') - Number(item.offCount || '0')).reduce((pre: number, cur: number) => {
          return pre + cur
        }),
      },
      {
        name: '离线',
        value: res.data.map((item: any) => Number(item.offCount || '0')).reduce((pre: number, cur: number) => {
          return pre + cur
        }),
      },
    ]
    xAxisDataOff.value = res.data.map((item: any) => item.name)
    dataOff.value = [
      {
        name: '设备离线数量',
        data: res.data.map((item: any) => item.offCount),
        color: '#ccc',
      },
    ]
    colors.value = res.map.map(() => (['#ccc', '#ccc']))
    offLoading.value = false
  }).catch(() => {
    offLoading.value = false
  })
}
fetchData()
</script>

<template>
  <div class="header-container">
    <!-- 设备分类统计 -->
    <layout class="header-left" title="设备分类统计">
      <template #content>
        <div class="content">
          <!-- 垂直柱状图 -->
          <div v-loading="deviceTypeLoading" class="bar">
            <bar-chart-horizontal
              v-show="xAxisData" :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: '0' }"
            />
            <el-empty v-show="!xAxisData" description="暂无数据" />
          </div>
        </div>
      </template>
    </layout>
    <!-- 离线统计 -->
    <layout class="header-right" title="离线统计">
      <template #content>
        <div v-loading="offLoading" class="content">
          <!-- 柱状图 -->
          <div class="bar">
            <bar-chart-vertical
              v-show="xAxisDataOff" :x-axis-data="xAxisDataOff" :bar-coner="0" :data="dataOff"
              :colors="colors" :bar-width="15" :gradient="true"
              :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
            />
            <el-empty v-show="!xAxisDataOff" description="暂无数据" />
          </div>
          <!-- 饼图 -->
          <div class="circle">
            <pie-chart
              v-show="pieData" :data="pieData" radius="50%" label-position="" :label-show="false"
              label-formatter="" :show-emphasis="false" :colors="['#0d76d4', '#ccc']"
              :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '0' }"
            />
            <el-empty v-show="!pieData" description="暂无数据" />
          </div>
        </div>
      </template>
    </layout>
  </div>
</template>

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

  .header-left {
    width: 49%;
    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;
      justify-content: space-between;

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

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