<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="button_clear button_spacing">隐藏图表</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="infoss" style=" height: 600px;width: 800px;padding: 1% 1%;min-width:98%;min-height: 98%"></div>
    </div>
  </div>
</template>

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

  let getData = function * (self, condition) {
    let load = new HttpResetClass()
    load.load('POST', 'api/af-revenue/sql/webmeter_getNewLoseGroupList',
      {data:{condition: condition, groupname: self.groupname[0], startDate: self.startdate ? self.startdate:Util.toStandardDateString(),
          endDate: self.enddate ? self.enddate:Util.toStandardDateString()}},
      {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        let name = []
        let value = []
        for (let i = 0; i < res.data.length; i++) {
          name[i] = res.data[i].res
          value[i] = res.data[i].value
        }
        console.log(name)
        console.log(value)
        self.set(name,value)
      })
  }
  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: 'max_days_type'
      }
    },
    data () {
      return {
        xc: ''
      }
    },
    methods: {
      set (key, value) {
        let Name = ''
        if (this.groupname[0] === 'f_user_type')
        {
          Name = '用户类型'
        } else if (this.groupname[0] === 'f_gasproperties') {
          Name = '用气性质'
        }  else if (this.groupname[0] === 'f_orgname') {
          Name = '分公司'
        } else if (this.groupname[0] === 'max_days_type') {
          Name = '最长失联天数'
        } else if (this.groupname[0] === 'all_days_type') {
          Name = '合计失联天数'
        } else {
          Name = '合计'
        }
        this.xc = this.$echarts.init(document.getElementById('infoss'))
        console.log('-----55555------', this.xc)
        let option = {
          title: {
            text: '表具失联(' + Name + ')分析',
            left: 'center',
            textStyle: {
              color: '#000',
              fontSize: 15
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          toolbox: {
            show: true,
            feature: {
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line', 'bar']},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          calculable: true,
          xAxis: [
            {
              name: '分组项',
              nameTextStyle: {
                fontSize: 15
              },
              type: 'category',
              data: key,
              axisLabel: {
                show: true,
                textStyle: {
                  fontSize: 15
                }
              }
            }
          ],
          yAxis: [
            {
              name: '用户数(户)',
              nameTextStyle: {
                fontSize: 15
              },
              type: 'value'
            }
          ],
          series: [
            {
              name: '用户数',
              type: 'bar',
              data: value,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              }
            }
          ]
        }
        this.xc.setOption(option)
        console.log("------------->>>>>>>>",document.getElementById('infoss'))
      },
      searchdata (condition) {
        let getGen = getData(this, condition)
        co(getGen)
      }
    },
    watch: {
      'echarts' (val) {
        this.searchdata(this.condition)
      },
      'groupname' (val) {
        this.searchdata(this.condition)
      }
    }
  }
</script>
