<template>
  <div>
    <el-row>
      <el-col :span="12" :offset="6">
        <div class="chart-title">各单位设备安装情况数量统计</div>
      </el-col>
    </el-row>
    <div v-show="showDeviceType">
      <el-row :gutter="20" type="flex" justify="end">
        <el-col :span="8" style="margin-right: 30px">
          <el-select v-model="listQuery.deviceType" class="select-right" size="mini" placeholder="设备类型" clearable @change="fetchData">
            <el-option
              v-for="item in deviceTypeList"
              :key="item.value"
              :label="item.name"
              :value="item.value"/>
          </el-select>
        </el-col>
      </el-row>
    </div>
    <div>
      <ve-histogram :loading="loading" :data="chartData" :extend="extend" :settings="chartSettings" height="440px"/>
    </div>
  </div>
</template>

<script>
import { getDeviceType } from '@/api/device'
import { deviceStaticsByDept } from '@/api/dataStatics'
import 'v-charts/lib/style.css'
export default {
  name: 'DeviceCountByDept',
  data() {
    return {
      listQuery: {
        deviceType: ''
      }, // 查询条件
      showDeviceType: true, // 是否显示选择设备类型选项
      deviceTypeList: [], // 设备类型列表，下拉选项
      chartData: {
        columns: ['deptName', 'deviceCount'], // 维度和指标
        rows: [] // 数据集合
      }, // 数据
      chartSettings: {
        labelMap: {
          'deptName': '权属单位',
          'deviceCount': '设备数量（个）'
        } // 设置字段映射
      }, // 配置项
      extend: {
        xAxis: {
          axisLabel: {
            rotate: 30,
            margin: 30,
            textStyle: {
              align: 'center'
            }
          }
        },
        yAxis: {
          max: 10 // y轴最大值
        },
        series: {
          barMaxWidth: 35 // 最大柱宽度
        }
      }, // 扩展配置项
      loading: true // 加载状态
    }
  },
  created() {
    this.fetchDeviceType()
    this.fetchData()
  },
  activated() {
    this.fetchData()
  },
  methods: {
    // 获取设备类型
    fetchDeviceType() {
      getDeviceType(this.listQuery).then(response => {
        this.deviceTypeList = [{
          name: '全部设备',
          value: ''
        }]
        // 过滤掉该单位不支持的设备类型
        const deviceTypes = this.$store.getters.deviceTypes
        for (const deviceType of response.data) {
          if (deviceTypes.indexOf(deviceType.value) !== -1) {
            this.deviceTypeList.push(deviceType)
          }
        }
        if (this.deviceTypeList.length <= 1) {
          this.showDeviceType = false
        }
      })
    },
    fetchData() {
      this.loading = true
      deviceStaticsByDept(this.listQuery).then(response => {
        this.chartData.rows = response.data
        // 获取数据的最大值，来确定y轴显示范围
        const maxValue = Math.max.apply(Math, response.data.map(function(item) { return item.deviceCount }))
        if (maxValue < 10) {
          this.extend.yAxis = { max: 10 }
        } else {
          this.extend.yAxis = {}
        }
        // 解决文字较长无法全部水平展示问题：判断有几个柱需要显示，若大于6个让X轴文字倾斜30度
        if (this.chartData.rows.length > 6) {
          this.extend.xAxis = {
            axisLabel: {
              rotate: 30,
              margin: 30,
              textStyle: {
                align: 'center'
              }
            }
          }
        } else {
          this.extend.xAxis = {}
        }
        // 设置柱最大宽度
        this.extend.series = { barMaxWidth: 35 }
        this.loading = false
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .chart-title{
    margin: auto;
    text-align: center;
    margin-top: 15px;
    font-size:20px;
    font-weight:600
  }
  .select-right{
    /*margin-right: 25px;*/
    margin-top: 15px;
    /*width: 200px*/
  }
</style>