<!--水表告警统计-->
<template>
  <div class="container">
    <function-area ref="func" select="week" @change="fetchData"/>
    <!--<div class="statistic-container">-->
      <!--<el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>-->
      <!--<el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>-->
      <!--<el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>-->
      <!--<el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>-->
      <!--<el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>-->
      <!--<el-date-picker-->
        <!--v-model="timeRange"-->
        <!--:picker-options="pickerOptions"-->
        <!--type="daterange"-->
        <!--range-separator="至"-->
        <!--start-placeholder="开始日期"-->
        <!--end-placeholder="结束日期"-->
        <!--value-format="yyyy-MM-dd"-->
        <!--size="mini"-->
        <!--style="width:250px;margin-right: 20px"-->
        <!--@change="fetchData"/>-->
    <!--</div>-->
    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
    <!--<div class="function">-->
      <!--<el-button-->
        <!--v-for="item in areaList"-->
        <!--:key="item.id"-->
        <!--round-->
        <!--size="mini"-->
        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
    <!--</div>-->
  </div>
</template>

<script>
// 引入视觉映射组件
import 'echarts/lib/component/visualMap'
import { alarmBySecondArea } from '@/api/overview'
import { getDayTime } from '@/utils/dateutils'
import { getDoorAreaTree } from '@/api/system/area'
import FunctionArea from "./FunctionArea";
export default {
  name: 'WatchAlarmBar',
  components: {FunctionArea},
  data() {
    return {
      title:{
        text: '水表告警统计'
      },
      chartSettings:{
        itemStyle: {
          barCategoryGap: 0
        },
        labelMap: {
          'areaName': '分区',
          'alarm': '报警数',
          'warning': '预警数'
        },
        dimension: ['areaName'],
        metrics: ['alarm', 'warning']
      },
      grid: {
        right: 40,
        top: 80,
        bottom: 5
      },
      extend: {
        legend: {
          show: true
        },
        xAxis: {
          axisLabel: {
            rotate: 30,
            margin: 30,
            textStyle: {
              align: 'center'
            }
          }
        },
        yAxis: {
          name: '报警次数',
          position: 'left',
          max: 10
        },
        series: {
          label: { show: true, position: 'top', formatter: '{c}' },
          barWidth: 20
        },
        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
      },
      areaId: '',
      areaList: [],
      isShow: true,
      defaultTimeRange: [],
      timeRange: [],
      pickerOptions: {
        disabledDate: function(date) {
          var oDate1 = new Date(date)
          var oDate2 = new Date()
          if (oDate1.getTime() > oDate2.getTime()) {
            return true
          } else {
            return false
          }
        }
      },
      chartData: {
        columns: ['areaName', 'alarm'],
        rows: []
      }
    }
  },
  mounted() {
    this.$refs.func.init()
    // this.setDefaultTime('today')
    // this.fetchArea()
  },
  methods: {
    // fetchArea() {
    //   getDoorAreaTree().then(response => {
    //     if (response.code === 200) {
    //       this.areaList = response.data.filter(item => {
    //         return item.pid === '1'
    //       }).map(function(item) {
    //         return {
    //           id: item.id, name: item.name
    //         }
    //       })
    //       if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
    //     }
    //   })
    // },
    // areaChange(val) {
    //   this.areaId = val
    //   this.fetchData()
    // },
    fetchData(timeRange) {
      const params = {
        areaId: '110000',
        startTime: timeRange[0],
        endTime: timeRange[1]
      }
      this.$emit('change', params)
      alarmBySecondArea(params).then(response => {
        this.isShow = false
        this.chartData.rows = response.data
        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
        if (maxValue < 10) {
          this.extend.yAxis.max = 10
        } else {
          this.extend.yAxis.max = maxValue + 1
        }
        // this.chartData.rows = [
        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
        //   { 'areaName': '厂区', 'alarm': 78 },
        //   { 'areaName': '分段分区', 'alarm': 38 },
        //   { 'areaName': '船坞分区', 'alarm': 48 },
        //   { 'areaName': '刀把码头', 'alarm': 30 },
        //   { 'areaName': '制管作业区', 'alarm': 82 },
        //   { 'areaName': '滑道作业区', 'alarm': 34 },
        //   { 'areaName': '码头作业区', 'alarm': 26 },
        //   { 'areaName': '车间生产区', 'alarm': 45 }
        // ]
        this.isShow = true
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .container{
    position:relative;
    .function{
      width:calc(100% - 120px);
      height: 28px;
      display: flex;
      justify-content: center;
    }
  }
  .statistic-container {

    .el-button{
      padding: 5px 10px;
    }
    margin-bottom: 10px;
    text-align: center;
    .chart-tool-button {
      padding: 5px;
      line-height: 16px;
      margin-top: 5px;
      font-size: 14px;
    }
    .chart-tool-button:hover {
      background-color: #8cc5ff;
      cursor: pointer;
      color: white;
    }
    .chart-tool-button:active {
      background-color: #8cc5ff;
      color: white;
    }
  }
  .selected {
    background-color: #8cc5ff;
    color: white;
  }
</style>