<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 { countBySecondArea } from '@/api/gasOverview'
import { getDayTime } from '@/utils/dateutils'
import { getDoorAreaTree } from '@/api/system/area'
import FunctionArea from './FunctionArea'

export default {
  name: 'GasCountByAreaBar',
  components: { FunctionArea },
  data() {
    this.extend = {
      legend: {
        show: true
      },
      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: {
        'areaName': '分区',
        'count': '用气量'
      },
      dimension: ['areaName'],
      metrics: ['count']
    }
    return {
      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: ['wellTypeName', 'count'],
        rows: []
      }
    }
  },
  mounted() {
    this.$refs.func.init()
    // this.setDefaultTime('week')
    // 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)
      countBySecondArea(params).then(response => {
        this.isShow = false
        this.chartData.rows = response.data
        this.isShow = true
      })
    },
    setDefaultTime(val) {
      if (val === 'year') {
        var today = new Date()
        var tYear = today.getFullYear()
        const beginTime = tYear + '-01-01'
        const endTime = getDayTime(new Date().getTime())
        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
      } if (val === 'season') {
        var today = new Date()
        var tYear = today.getFullYear()
        var tMonth = today.getMonth() + 1
        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
        const beginTime = tYear + '-' + oldMonth + '-01'
        const endTime = getDayTime(new Date().getTime())
        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
      } else if (val === 'month') {
        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')]
      } else if (val === 'week') {
        // const nowDayOfWeek =  new Date().getDay()-1
        const nowDayOfWeek =  6
        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
      } else if (val === 'yesterday') {
        this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
      } else if (val === 'today') {
        this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
      }
      this.fetchData(this.timeRange)
    }
  }
}
</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>