<template lang="html">
  <div id="charts">
    <div id="gasanalysis" :style="{width:'100%',height:'100%'}"></div>
  </div>
</template>

<script>
  import co from 'co'
  import echarts from 'echarts'
  import { HttpResetClass } from 'vue-client'

  let getData = function * (self, condition) {
    let load = new HttpResetClass()
    console.log('startDate', self.startdate)
    console.log('endDate', self.enddate)
    load.load('POST', 'rs/sql/gasAnalysisEcharts',
      {data: {condition: condition, groupname: self.groupname, startDate: self.startdate,
          endDate: self.enddate}},
      {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        let arrparams = []
        let gasdata = []
        for (var i = 0; i < res.data.length; i++) {
          arrparams[i] = res.data[i].f_type
          gasdata[i] = res.data[i].f_oughtamount
        }
        self.set(arrparams,gasdata)
      })
  }
  export default {
    data () {
      title: '业务类型'
      return {
        xc: ''
      }
    },
    props: {
      startdate: {
        type: String,
        default: ''
      },
      enddate: {
        type: String,
        default: ''
      },
      condition: {
        type: String,
        default: '1=1'
      },
      groupname: {
        type: String,
        default: 'year'
      }
    },
    methods: {
      set (arrparams,gasdata) {
        let name = ''
        if(this.groupname === 'year')
        {
          name = '年'
        } else if (this.groupname === 'month'){
          name = '月'
        } else if (this.groupname === 'week'){
          name = '周'
        } else {
          name = '日'
        }
        this.xc = echarts.init(document.getElementById('gasanalysis'))
        this.xc.setOption({
          title: {
            text: '用气' + name + '分析柱状图',
            subtext: '',
            textStyle:{
              color: '#000',
              fontStyle: 'normal',
              fontWeight: 'normal',
              fontSize: 40
            },
            x: 'center',
            subtextStyle: {
              color: '#000',
              fontSize: 40
            }
          },
          color: ['#3398DB'],
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis : [
            {
              name: '日期',
              type : 'category',
              data : arrparams,
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis : [
            {
              name: '用气量(m³)',
              type : 'value'
            }
          ],
          series : [
            {
              name:'用气量(m³)',
              type:'bar',
              barWidth: '30%',
              data:gasdata
            }
          ]
        })
      },
      searchdata (condition) {
        let getGen = getData(this, condition)
        co(getGen)
      }
    },
    watch: {
      'condition' (val) {
        this.searchdata(val)
      },
      'groupname' (val) {
        this.searchdata(this.condition)
      },
      'startdate' (val) {
        this.startdate = val
      },
      'enddate' (val) {
        this.enddate = val
      }
    }
  }
</script>
