<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,days: self.losetype,
          endDate: self.enddate}},
      {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        self.set(res.data)
      })
  }
  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'
      },
      losetype:{
        type: String,
        default: 'max_days'
      },
      groupname: {
        type: String,
        default: 'max_days_type'
      }
    },
    data () {
      return {
        xc: '',
        tName:''
      }
    },
    methods: {
      set (res) {
        if (this.losetype === 'max_days') {
          this.tName = '最长失联天数'
        } else if (this.losetype === 'all_days') {
          this.tName = '合计失联天数'
        } else {
          this.tName = '最新失联天数'
        }
        let _one = []
        let _five = []
        let five_seven = []
        let seven_fifteen = []
        let fifteen_thirty = []
        let thirty_sixty = []
        let sixty_ = []
        let groups = []
        for (var i = 0; i < res.length; i++) {
          _one[i]= res[i]._one
          _five[i]= res[i]._five
          five_seven[i]= res[i].five_seven
          seven_fifteen[i]= res[i].seven_fifteen
          fifteen_thirty[i]= res[i].fifteen_thirty
          thirty_sixty[i]= res[i].thirty_sixty
          sixty_[i]= res[i].sixty_
          groups[i]=res[i].res
        }
        let key=['F_未上报','A_5天之内','B_5-7天','C_7-15天','D_15-30天','E_30-60天','F_60天以上']
        this.xc = echarts.init(document.getElementById('infoss'))
        var option = {
          title: {
            text: '表具(' + this.tName + ')分析',
            'left': 'center',
            textStyle: {
              color: '#000',
              fontSize: 15
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          toolbox: {
            right:'2%',
            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: groups,
              axisLabel: {
                show: true,
                textStyle: {
                  fontSize: 15
                }
              }
            }
          ],
          yAxis: [
            {
              name: '用户数(户)',
              nameTextStyle: {
                fontSize: 15
              },
              type: 'value'
            }
          ],
          series: [
            {
              name: key[0],
              type: 'bar',
              data: _one,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              }
            },
            {
              name: key[1],
              type: 'bar',
              data: _five,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              }
            },
            {
              name: key[2],
              type: 'bar',
              data: five_seven,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              }
            },
            {
              name: key[3],
              type: 'bar',
              data: seven_fifteen,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              }
            },
            {
              name: key[4],
              type: 'bar',
              data: fifteen_thirty,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              }
            },
            {
              name: key[5],
              type: 'bar',
              data: thirty_sixty,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              }
            },
            {
              name: key[6],
              type: 'bar',
              data: sixty_,
              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)
      },
      'losetype' (val) {
        if (this.echarts) {
          this.searchdata(this.condition)
        }
      }
    }
  }
</script>
