<template>
  <div class="app-container">
    <div class="chart-container">
      <el-row class="chart-tools">
        <el-col :span="21">
          <span class="chart-tool-button" @click="changeDate('today')">今日</span>
          <span class="chart-tool-button" @click="changeDate('yesterday')">昨日</span>
          <span class="chart-tool-button" @click="changeDate('sevendays')">最近7日</span>
          <span class="chart-tool-button" @click="changeDate('lastmonth')">最近30日</span>
          <el-date-picker
            v-model="timeRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            size="mini"
            @change="fetchData"/>
        </el-col>
        <el-col :span="3">
          <el-select v-model="listQuery.deviceType" 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>
      <el-row>
        <el-col :span="12" :offset="6">
          <div class="chart-title">按权属单位统计报警情况</div>
        </el-col>
      </el-row>
      <div class="chart-body">
        <ve-histogram
          :data="chartData"
          :settings="chartSettings"
          :extend="extend"
          :data-empty="dataEmpty"/>
      </div>
    </div>
  </div>
</template>

<script>
import { alarmStaticByDept } from '@/api/dataStatics'
import { getDeviceType } from '@/api/device'
import { getDayTime } from '@/utils/dateutils'

export default {
  name: 'AlarmStaticsByDept',
  data() {
    return {
      chartSettings: {
        labelMap: {
          'deptName': '权属单位',
          'alarmDevices': '报警设备数',
          'alarmTimes': '报警次数'
        },
        itemStyle: {
          'barCategoryGap': 5
        },
        demension: 'deptName',
        barWidth: 15
      },
      extend: {
        series: {
          label: { show: true, position: 'top' },
          itemStyle: {
            normal: {
              barBorderRadius: [3, 3, 0, 0]
            }
          },
          barMaxWidth: 35
        }
      },
      listQuery: {
        deviceType: '',
        beginTime: '',
        endTime: ''
      },
      timeRange: [],
      deviceTypeList: [],
      showDeviceType: true,
      chartData: {
        columns: ['deptName', 'alarmDevices', 'alarmTimes'],
        rows: []
      },
      dataEmpty: false
    }
  },
  mounted() {
    this.fetchDeviceType()
    this.fetchData()
  },
  methods: {
    // 获取统计数据
    fetchData() {
      console.log('fetchData')
      this.listQuery.beginTime = this.timeRange[0]
      this.listQuery.endTime = this.timeRange[1]
      this.listLoading = true
      alarmStaticByDept(this.listQuery).then(response => {
        this.chartData.rows = response.data
        this.listLoading = false
      })
    },
    // 获取设备类型
    fetchDeviceType() {
      getDeviceType().then(response => {
        this.deviceTypeList = response.data
        if (this.deviceTypeList.length <= 1) {
          this.showDeviceType = false
        }
      })
    },
    changeDate(date) {
      let beginTime, endTime
      if (date === 'today') {
        beginTime = getDayTime(new Date().getTime())
        endTime = new Date()
        this.timeRange = [beginTime, endTime]
      } else if (date === 'yesterday') {
        beginTime = getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000)
        endTime = getDayTime(new Date().getTime())
      } else if (date === 'sevendays') {
        beginTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
        endTime = new Date()
      } else if (date === 'lastmonth') {
        beginTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
        endTime = new Date()
      }
      this.timeRange = [beginTime.Format('yyyy-MM-dd hh:mm:ss'), endTime.Format('yyyy-MM-dd hh:mm:ss')]
      this.fetchData()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .app-container{
    padding: 5px 10px 10px 10px;
    .chart-container{
      padding:0px;
      border: 1px solid #d3dce6;
      .chart-tools{
        background-color: #f2f2f2;
        line-height: 35px;
        padding-left: 10px;
        padding-right: 5px;
        .chart-tool-button{
          padding: 5px;
          line-height: 16px;
          margin-top:5px;
          font-size:13px;
        }
        .chart-tool-button:hover{
          background-color: #8cc5ff;
          cursor: pointer;
          color:white
        }
        .chart-tool-button:active{
          background-color: #8cc5ff;
          color:white
        }
        .editor--datetimerange.el-input__inner{
          width: 300px;
        }
      }
      .chart-title{
        margin: auto;
        text-align: center;
        margin-top: 15px;
      }
      .chart-body{
        padding:15px;
      }
    }
  }
</style>