<template>
  <el-row>
    <el-col>
      <el-card shadow="never">
        <el-col>
          <el-col :span="18">
            <div class="flagBoxStyle">
              <div class="flagStyle" />
              <div>各单位安装设备情况统计</div>
            </div>
          </el-col>
          <el-col :span="6">
            <el-select
              v-model="listQuery.deviceType"
              size="small"
              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-col>

        <el-col>
          <ve-bar
            :data="chartData"
            :grid="grid"
            :extend="extend"
            :settings="chartSettings"
          />
        </el-col>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { getDeviceType } from '@/api/device/device'
import { deviceStaticsByDept } from '@/api/data/dataStatics'

export default {
  name: 'DeviceCountByDept',
  data() {
    return {
      listQuery: {
        deviceType: ''
      },
      deviceTypeList: [],
      extend: {
        series: {
          label: { show: true, position: 'right' },
          barMaxWidth: 35 // 最大柱宽度
        }
      },
      grid: {
        right: 60
      },
      // title: {
      //   text: '井类型数量统计'
      // },
      chartSettings: {
        itemStyle: {
          'barCategoryGap': 5
        },
        barWidth: 15,
        labelMap: {
          'deptName': '权属单位',
          'deviceCount': '设备数量（个）'
        },
        dimension: ['deptName'],
        metrics: ['deviceCount']
      },
      chartData: {
        columns: ['deptName', 'deviceCount'],
        rows: []
      }
    }
  },
  mounted() {
    this.fetchDeviceType()
    this.fetchData()
  },
  methods: {
    // 获取设备类型
    fetchDeviceType() {
      getDeviceType().then(response => {
        this.deviceTypeList = response.data
      })
    },
    fetchData() {
      deviceStaticsByDept(this.listQuery).then(response => {
        this.chartData.rows = response.data
      })
    }
  }
}
</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);
}
</style>