<!--分区用水对比图-->
<template>
  <div class="container">
    <function-area ref="func" select="week" @change="fetchData"/>
    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
  </div>
</template>

<script>

import 'echarts/lib/component/visualMap'
import { waterCompare } from '@/api/dashboard'
import { getDayTime } from '@/utils/dateutils'
import { getDoorAreaTree } from '@/api/system/area'
import FunctionArea from './FunctionArea'
export default {
  name: 'WaterCompare',
  components: { FunctionArea },
  data() {
    return {
      title: { text: '分区用水对比图' },
      chartSettings: {
        labelMap: {
          'areaName': '分区',
          'last': '',
          'now': ''
        },
        dimension: ['areaName'],
        metrics: ['last', 'now']
      },
      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: [],
      chartData: {
        columns: ['areaName', 'last', 'now'],
        rows: []
      },
      nameDict: {
        'today': ['昨日用水', '今日用水'],
        'week': ['近7日用水', '对照时间用水'],
        'month': ['近30日用水', '对照时间用水'],
        'season': ['上季度用水', '本季度用水'],
        'year': ['上年度用水', '本年度用水'],
        'other': ['对照时间用水', '自选时间用水']
      }
    }
  },
  mounted() {
    this.$refs.func.init()
  },
  methods: {
    fetchData(timeRange, type) {
      const params = {
        areaId: '110000',
        type: type || 'other',
        startTime: timeRange[0],
        endTime: timeRange[1]
      }
      waterCompare(params).then(response => {
        this.isShow = false
        this.chartSettings.labelMap = {
          areaName: '分区',
          last: response.data[0].lastTime,
          now: response.data[0].nowTime
        }
        this.chartData.rows = response.data
        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.last > item.now ? item.last : item.now }))
        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 }]
        this.isShow = true
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .container{
    position:relative;
    .function{
      width:calc(100% - 120px);
      height: 28px;
      display: flex;
      justify-content: center;
    }
  }
</style>