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

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

let getData = function * (self, condition) {
  console.log('6666666666')
  let load = new HttpResetClass()
  load.load('POST', 'api/af-revenue/sql/webmeter_getUserGasGroup',
    {data: {condition: '1 = 1' + (self.orgid != null ? ' and f_orgid in ( ' + self.orgid +')' : ''),
        groupname: 'day',
        startDate: self.startdate + ' 00:00:00',
        endDate: self.enddate  + ' 23:59:59'}},
    {resolveMsg: null, rejectMsg: null})
    .then((res) => {
      let arrparams = Array.from(new Set(res.data.map(x => x.type)))
      let gasdata1 = []
      let gasdata2 = []
      for (let i = 0; i < arrparams.length; i++) {
        gasdata1.push(res.data.filter(item => item.type == arrparams[i] && item.f_user_type == '民用').map(x => x.f_gas).reduce((x, y) => x + y,0).toFixed(2))
        gasdata2.push(res.data.filter(item => item.type == arrparams[i] && item.f_user_type == '非民用').map(x => x.f_gas).reduce((x, y) => x + y,0).toFixed(2))
      }
      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'
    },
    orgid:'',
    groupname: {
      type: String,
      default: 'year'
    }
  },
  data () {
    title: '业务类型'
    return {
      xc: ''
    }
  },
  ready(){
    console.log(this.echarts)
    this.searchdata()
  },
  methods: {
    set (arrparams, gasdata1, gasdata2) {
      console.log('--------->>>>>>>>>>>>',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 = '日'
      }
      this.xc = this.$echarts.init(document.getElementById('m'))
      // this.xc.resize({height: '100%',width: '100%'})
      this.xc.setOption({
        title: {
          text: '用气' + name + '分析图',
          x: 'left',
          textStyle: {
            color: '#000',
            fontSize: 20
          }
        },
        color: ['#61a0a8', '#2f4554'],
        tooltip: {
          trigger: 'axis',
          extraCssText: 'width: auto;height: auto;'
        },
        grid:{
          top:'20%',
        },
        legend: {
          x: 'left',
          y: 'bottom',
          textStyle: {
            fontSize: 12
          },
          data: ['用气量(民用)(m³)', '用气量(非民用)(m³)']
        },
        toolbox: {
          show: true,
          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 : [
          {
            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: '平均值'}
              ]
            }
          }
        ]
      })
    },
    searchdata (condition) {
      console.log("ec:"+this.echarts)
      let getGen = getData(this, condition)
      co(getGen)
    }
  },
  watch: {
    // 'echarts' (val) {
    //   this.searchdata(this.condition)
    // },
    // 'groupname' (val) {
    //   this.searchdata(this.condition)
    // },
    'startdate' (val) {
      this.searchdata()
    },
    'enddate' (val) {
      this.searchdata()
    },
    'orgid' (val) {
      this.searchdata()
    }
  }
}
</script>
