<template lang="html">
  <div id="charts">
    <div id="userGasEcharts1" style=" height: 98%;width: 98%;padding: 1% 1%;"></div>
  </div>
</template>

<script>
  import * as Util from '../../Util'
  import co from 'co'
  import echarts from 'echarts'
  import {HttpResetClass} from 'vue-client'

  let getData = function* (self, condition) {
    let load = new HttpResetClass()
    load.load('POST', 'rs/sql/webmeter_getUserGasGroup',
      {
        data: {
          condition: condition,
          groupname: self.groupname,
          startDate: self.startdate,
          endDate: self.enddate
        }
      },
      {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        let arrparams = []
        let gasdata1 = []
        let gasdata2 = []
        for (var i = 0; i < res.data.length; i++) {
          arrparams[i] = res.data[i].f_type
          gasdata1[i] = res.data[i].f_oughtamount1
          gasdata2[i] = res.data[i].f_oughtamount2
        }
        self.set(arrparams, gasdata1, gasdata2)
      }
    )
  }
  export default {
    props: {
      echarts: {
        type: Boolean,
        default: false
      },
      startdate: {
        type: String,
        default: Util.toStandardDateString()
      },
      enddate: {
        type: String,
        default: Util.toStandardDateString()
      },
      condition: {
        type: String,
        default: '1=1'
      },
      groupname: {
        type: String,
        default: 'year'
      }
    },
    data() {
      title: '业务类型'
      return {
        series1:[],
        xc: ''
      }
    },
    ready() {
      console.log(this.echarts)
    },
    methods: {
      set(arrparams, gasdata1, gasdata2) {
        console.log("ec:" + this.echarts)
        let name = ''
        if (this.groupname === 'year') {
          name = '年'
        } else if (this.groupname === 'month') {
          name = '月'
        } else if (this.groupname === 'week') {
          name = '周'
        } else {
          name = '日'
        }
        let tip = []
        tip = ['用气量(民用)(m³)', '用气量(非民用)(m³)']
        this.series1 = [
          {
            name: '用气量(民用)(m³)',
            type: 'bar',
            smooth: true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data: gasdata1,
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          },
          {
            name: '用气量(非民用)(m³)',
            type: 'bar',
            smooth: true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data: gasdata2,
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          }
        ]
        this.xc = echarts.init(document.getElementById('userGasEcharts1'))
        this.xc.setOption({
          title: {
            text: '用气' + name + '分析图',
            left: 'center',
            y: '10',
            textStyle: {
              color: '#000',
              fontSize: 20
            }
          },
          color: ['#61a0a8', '#2f4554'],
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            top: '20%',
          },
          legend: {
            y: '50',
            data: tip
          },
          toolbox: {
            y: '50',
            show: true,
            right: '2%',
            feature: {
              mark: {show: true},
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          calculable: true,
          xAxis: [
            {
              name: '日期',
              nameTextStyle: {
                fontSize: 15
              },
              type: 'category',
              data: arrparams
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '用气量(m³)',
              nameTextStyle: {
                fontSize: 15
              },
              axisLabel: {
                show: true,
                textStyle: {
                  fontSize: 15,
                  'color': '#7d8000'
                }
              }
            }
          ],
          series: this.series1
        },true)
      },
      searchdata(condition) {
        console.log("ec:" + this.echarts)
        let getGen = getData(this, condition)
        co(getGen)
      }
    },
    watch: {
      'echarts'(val) {
        this.series1=[]
        this.searchdata(this.condition)
      },
      'groupname'(val) {
        this.searchdata(this.condition)
      }
    }
  }
</script>
