<template lang="html">
  <div>
    <div id="mk" :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) {
    let load = new HttpResetClass()
    load.load('POST', 'api/af-revenue/sql/webmeter_getNewLoseGroupList',
      {data:{condition: '1 = 1' + (self.orgid != null ? ' and f_orgid in( ' + self.orgid + ')' : ''),
          groupname: 'max_days_type',
          startDate: self.startdate + ' 00:00:00',
          endDate: self.enddate  + ' 23:59:59'}},
      {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'
      },
      orgid: '',
      groupname: {
        type: String,
        default: 'max_days_type'
      }
    },
    data () {
      return {
        xc: ''
      }
    },
    ready () {
      this.searchdata()
    },
    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('mk'))
        console.log('-----55555------', this.xc)
        let option = {
          title: {
            text: '表具失联(' + Name + ')分析',
            x: 'left',
            textStyle: {
              color: '#000',
              fontSize: 20
            }
          },
          tooltip: {
            trigger: 'axis',
            extraCssText: 'width: auto;height: auto;'
          },
          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,
              barWidth : 30,
              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: {
      'startdate' (val) {
        this.searchdata()
      },
      'enddate' (val) {
        this.searchdata()
      },
      'orgid' (val) {
        this.searchdata()
      }
    }
  }
</script>
