<template>
  <div>
    <panel-card title="设备总体情况">
      <el-row :gutter="20" style="padding: 15px 10px">
        <el-col :span="12">
          <simple-card title="设备总数" :context="allDevice" unit="个" />
        </el-col>
        <el-col :span="12">
          <simple-card title="低电量设备总数" :context="lowPowerDevice" unit="个" />
        </el-col>
      </el-row>
    </panel-card>
    <panel-card title="设备数量分析" style="margin-top: 10px">
      <device-count-by-type-bar chart-title="" />
    </panel-card>
  </div>
</template>

<script>
import { deviceStaticByStatus, deviceStaticsByType } from '@/api/data/dataStatics'
import PanelCard from '@/components/BigData/Card/panelCard'
import DeviceCountByTypeBar from '@/views/staticCharts/DeviceCountByTypeBar'
import SimpleCard from '@/components/BigData/Card/simpleCard'
export default {
  name: 'DeviceCountByType',
  components: { SimpleCard, DeviceCountByTypeBar, PanelCard },
  data() {
    return {
      allDevice: 0, // 总设备数
      lowPowerDevice: 0 // 低电量设备数
    }
  },
  created() {
    this.fetchDeviceType()
    this.getDeviceCount()
    this.getLowPowerDeviceCount()
  },
  methods: {
    // 获取各类型设备数量
    fetchDeviceType() {
      deviceStaticsByType().then(response => {
        this.chartData.rows = response.data
      })
    },
    // 获取全部设备数量， 离线设备数量
    getDeviceCount() {
      deviceStaticByStatus().then(response => {
        this.allDevice = response.data.total
      })
    },
    // 获取低电量设备数量
    getLowPowerDeviceCount() {
      deviceStaticByStatus().then(response => {
        // this.allDevice = response.data.total
        this.lowPowerDevice = 0
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
