<template lang="html">
  <div id="charts">
    <div id="infoss" style="height: 98%;width: 98%;padding: 1% 1%;"></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_getNewLoseGroupList',
      {data:{condition: condition, groupname: self.groupname, startDate: self.startdate,
          endDate: self.enddate}},
      {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        let name = []
        let value = []
        for (var 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 === 'f_user_type')
        {
          Name = '用户类型'
        } else if (this.groupname === 'f_gasproperties') {
          Name = '用气性质'
        }  else if (this.groupname === 'f_orgname') {
          Name = '分公司'
        } else if (this.groupname === 'max_days_type') {
          Name = '最长失联天数'
        } else if (this.groupname === 'all_days_type') {
          Name = '合计失联天数'
        } else {
          Name = '合计'
        }
        this.xc = echarts.init(document.getElementById('infoss'))
        var 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)
      },
      searchdata (condition) {
        let getGen = getData(this, condition)
        co(getGen)
      }
    },
    watch: {
      'echarts' (val) {
        this.searchdata(this.condition)
      },
      'groupname' (val) {
        this.searchdata(this.condition)
      }
    }
  }
</script>
