<template>
  <div class="container">
    <ve-histogram :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
    <div class="function">
      <el-date-picker
        v-model="timeRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        size="mini"
        style="width:250px;margin-right: 20px"
        :picker-options="pickerOptions"
        @change="fetchData"/>
      <el-checkbox size="small" v-model="checked">本月用水</el-checkbox>
    </div>
  </div>
</template>

<script>
// 引入视觉映射组件
import 'echarts/lib/component/visualMap'
import { wellStaticByType } from '@/api/dataStatics'
import { getDayTime } from '@/utils/dateutils'

export default {
  name:'waterCountByDeptBar',
  data() {
    this.extend = {
      legend:{
        show: false
      },
      xAxis: {
        axisLabel: {
          rotate: 30,
          margin: 30,
          textStyle: {
            align: 'center'
          }
        }
      },
      yAxis:{
        name:'用水量（吨）',
        position:'left'
      },
      series: {
        label: { show: true, position: 'top', formatter: '{c}' },
        barWidth: 25
      },
      tooltip:{ trigger:'item',formatter: '{b}<br/>用水量：{c}吨'}
    }
    this.grid = {
      right: 40,
      top: 100,
      bottom:5
    }
    this.title = {
      text: '各分区用水统计'
    }
    this.chartSettings = {
      itemStyle: {
        barCategoryGap: 10
      },

      labelMap: {
        'dept': '分区',
        'wellCount': '用水量'
      },
      dimension: ['dept'],
      metrics: ['wellCount']
    }
    return {
      checked: 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: ['wellTypeName', 'wellCount'],
        rows: []
      }
    }
  },
  mounted() {
    this.setDefaultTime()
    this.fetchData()
  },
  watch:{
    timeRange(val){
      if(this.timeRange[0]!==this.defaultTimeRange[0] || this.timeRange[1]!==this.defaultTimeRange[1]){
        this.checked = false
      }else {
        this.checked = true
      }
    },
    checked(val){
      if(val){
        this.setDefaultTime()
      }
    }
  },
  methods: {
    fetchData() {
      wellStaticByType().then(response => {
        this.chartData.rows = response.data
        this.chartData.rows = [
          { 'dept': '科技楼及食堂', 'wellCount': 53 },
          { 'dept': 'A\\B\\C\\D\\E座', 'wellCount': 78 },
          { 'dept': '厂区', 'wellCount': 78 },
          { 'dept': '分段分区', 'wellCount': 38 },
          { 'dept': '船坞分区', 'wellCount': 48 },
          { 'dept': '刀把码头', 'wellCount': 30 },
          { 'dept': '制管作业区', 'wellCount': 82 },
          { 'dept': '滑道作业区', 'wellCount': 34 },
          { 'dept': '码头作业区', 'wellCount': 26 },
          { 'dept': '车间生产区', 'wellCount': 45 },
        ]
      })
    },
    setDefaultTime(){
      var today = new Date();
      var tYear = today.getFullYear()
      var tMonth = today.getMonth()+1
      if (tMonth.toString().length == 1) {
        tMonth = "0" + tMonth;
      }
      const beginTime = tYear + "-" + tMonth + "-01"
      const endTime = getDayTime(new Date().getTime())
      this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
      this.defaultTimeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
    }
  }
}
</script>
<style lang="scss" scoped>
  .container{
    position:relative;
    .function{
      position:absolute;
      z-index:200;
      top: 0px;
      right:20px;
    }
  }
</style>