<template>
  <el-row>
    <el-col>
      <el-card shadow="never">
        <el-col>
          <div class="flagBoxStyle">
            <div class="flagStyle" />
            <div>离线分析</div>
          </div>
        </el-col>
        <el-col>
          <div>
            <span class="titleStyle">离线设备</span>
            <span class="countStyle">12</span>
            <span>个</span>
          </div>
        </el-col>
        <el-col>
          <el-col :span="16">
            <ve-histogram
              :data="chartData"
              :grid="grid"
              :extend="extend"
              :settings="chartSettings"
            />
          </el-col>
          <el-col :span="8">
            <ve-pie
              :data="chartDataPie"
              :extend="extendPie"
            />
          </el-col>
        </el-col>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { deviceStaticsByOnline } from '@/api/data/dataStatics'
export default {
  name: 'DeviceCountByOffline',
  data() {
    return {
      online: 0,
      offline: 0,
      // 饼状图
      extendPie: {
        series: {
          label: { show: true, position: 'outside', formatter: '{b}:{c}' },
          radius: '45%'
        }
      },
      chartDataPie: {
        columns: ['onlineStatus', 'deviceCount'],
        rows: []
      },
      // 柱状图
      extend: {
        xAxis: {
          axisLabel: {
            rotate: 30,
            margin: 30,
            textStyle: {
              align: 'center'
            }
          }
        },
        series: {
          label: { show: true, position: 'top' },
          barMaxWidth: 35 // 最大柱宽度
        }
      },
      grid: {
        right: 60
      },
      chartSettings: {
        itemStyle: {
          'barCategoryGap': 5
        },
        barWidth: 15,
        labelMap: {
          'deviceType': '权属单位',
          'offline': '设备数量（个）'
        },
        dimension: ['deviceType'],
        metrics: ['offline']
      },
      chartData: {
        columns: ['deviceType', 'offline'],
        rows: []
      }
    }
  },
  created() {
    this.fetchDeviceType()
  },
  methods: {
    fetchDeviceType() {
      deviceStaticsByOnline().then(response => {
        response.data.forEach((item) => {
          this.online += item.online
          this.offline += item.offline
        })
        this.chartData.rows = response.data
        this.chartDataPie.rows = [
          { 'onlineStatus': '在线', 'deviceCount': this.online },
          { 'onlineStatus': '离线', 'deviceCount': this.offline }
        ]
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.flagBoxStyle {
  display: flex;
  margin-bottom: 20px;
}
.flagBoxStyle div:nth-child(2){
  line-height: 30px;
  font-weight: 600;
}
.flagStyle {
  width: 4px;
  height: 30px;
  margin-right: 6px;
  background: rgb(64 121 242);
}
.titleStyle {
  margin-left: 20px;
  font-size: 12px;
}
.countStyle {
  font-size: 20px;
  margin: 0 10px;
}
</style>