<template lang="html">
  <div id="charts">
    <div id="IndicatorStatisicInfo" style="height: 80%;top:5%"></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()
    console.log("con:"+self.groupname)
    load.load('POST', 'rs/sql/echartDataIndicator',
      {data: {condition: condition, groupname: self.groupname, startDate: self.startdate,
          endDate: self.enddate}},
      {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        let f_date=[]
        let f_total_user=[]
        let f_total_meter=[]
        let f_civil_gas=[]
        let f_nocivil_gas=[]
        let f_nocontact_total=[]
        let f_meteread_total=[]
        let f_instruction_success=[]
        let f_instruction_total=[]
        let f_untreated_sign=[]
        let f_sign_total=[]
        let f_abnormal_total=[]
        for (var i = 0; i < res.data.length; i++) {
          f_date[i]=res.data[i].f_date
          f_total_user[i]=res.data[i].f_total_user
          f_total_meter[i]=res.data[i].f_total_meter
          f_civil_gas[i]=res.data[i].f_civil_gas
          f_nocivil_gas[i]=res.data[i].f_nocivil_gas
          f_nocontact_total[i]=res.data[i].f_nocontact_total
          f_meteread_total[i]=res.data[i].f_meteread_total
          f_instruction_success[i]=res.data[i].f_instruction_success
          f_instruction_total[i]=res.data[i].f_instruction_total
          f_untreated_sign[i]=res.data[i].f_untreated_sign
          f_sign_total[i]=res.data[i].f_sign_total
          f_abnormal_total[i]=res.data[i].f_abnormal_total
        }
        let result=[]
        result[0]=f_date;
        result[1]=f_total_user;
        result[2]=f_total_meter;
        result[3]=f_civil_gas;
        result[4]=f_nocivil_gas;
        result[5]=f_nocontact_total;
        result[6]=f_meteread_total;
        result[7]=f_instruction_success;
        result[8]=f_instruction_total;
        result[9]=f_untreated_sign;
        result[10]=f_sign_total;
        result[11]=f_abnormal_total;
        console.log("res"+result)
        self.set(result)
      })
  }
  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 {
        condition:'',
        xc: '',
        mTip:["用户数","表数","居民用气","非居民用气","失联数","抄表数","指令成功数"
          ,"总指令数","待处理标记数","总标记数","异常数"]
      }
    },
    ready(){
      console.log(this.groupname+"==="+this.echarts)
    },
    methods: {
      set (result) {
        let name = ''
        if (this.groupname === 'year')
        {
          name = '年'
        } else if (this.groupname === 'month'){
          name = '月'
        } else if (this.groupname === 'week'){
          name = '周'
        } else {
          name = '日'
        }
        var series=[];
        for (var i=0;i<this.mTip.length;i++) {
          series.push({
            name: this.mTip[i],
            type: 'bar',
            data: result[i+1]
          });
        }
        this.xc = echarts.init(document.getElementById('IndicatorStatisicInfo'))
        this.xc.setOption({
          title: {
            text: '标记' + name + '分析图',
            left: 'center',
            top:'10%',
            textStyle: {
              color: '#000',
              fontSize: 20
            }
          },
          tooltip: {
            'trigger': 'axis',
            'extraCssText': 'width: auto;height: auto;'
          },
          toolbox: {
            show: true,
            right:"2%",
            feature: {
              magicType: {show: true, type: ['line', 'bar']},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          calculable: true,
          legend: {
            x:'left', //靠左
            data:this.mTip //这里要与下面的name对应
          },
          grid:{
            top:'25%'
          },
          xAxis: [
            {
              name: '日期',
              nameTextStyle: {
                fontSize: 15
              },
              type: 'category',
              data: result[0],
              axisLabel: {
                show: true,
                textStyle: {
                  fontSize: 15
                }
              }
            }
          ],
          yAxis: [
            {
              'type': 'value',
              name: '指标数',
              nameTextStyle: {
                fontSize: 15
              },
              'show': true,
              axisLabel: {
                show: true,
                textStyle: {
                  fontSize: 15,
                  'color': '#7d8000'
                }
              }
            }
          ],
          series: series
        })
      },
      searchdata (condition) {
        let getGen = getData(this, condition)
        co(getGen)
      }
    },
    watch: {
      'echarts'(val){
        this.searchdata(this.condition)
      },
      'groupname'(val) {
        this.searchdata(this.condition)
      }
    }
  }
</script>
<style>
</style>
