<template lang="html">
  <div class="basic-main">
  <div style="height: 40px;width: 100%;" v-show="echarts">
    <div style="display: inline-block;">
      <button @click="$parent.notShowEcharts()" class="btn btn-success">隐藏图表</button>
    </div>
    <!--图显示模板-->
    <div class="mystyle" style="display: inline-block;">
      <label class="font_normal_body">图表统计项</label>
      <v-select :options='$parent.getgroupname' :value.sync="groupname"
                close-on-select
                id="groupname"
                placeholder='分组项'
                v-model="groupname"
                value-single="true"></v-select>
    </div>
  </div>
  <div id="charts" style=" height: 98%;width: 98%;padding: 1% 1%;">
    <div id="info" style=" height: 98%;width: 98%;padding: 1% 1%;min-width:98%;min-height: 98%"></div>
  </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[0], 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 {
        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 = '日'
        }
        this.xc = echarts.init(document.getElementById('info'))
        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: ['用气量(民用)(m³)', '用气量(非民用)(m³)']
          },
          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 : [
          {
            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)
      }
    }
  }
</script>
