<template lang="html">
  <div id="charts">
    <div id="exception" 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) {
    console.log('异常分析图表分析数据', self.grouptype)
    let load = new HttpResetClass()
    load.load('POST', 'rs/sql/DrillErrorEchars',
      {
        data: {
          condition: condition,
          groupname: self.groupname,
          grouptype: self.grouptype,
          startDate: self.startdate,
          endDate: self.enddate
        }
      },
      {resolveMsg: null, rejectMsg: null}).then((res) => {
      console.log('开始进行图表重新选渲染')
      self.set(res)
    })
  }
  export default {
    props: {
      echarts: {
        type: Boolean,
        default: false
      },
      grouptype: {
        type: String,
        default: 'type1'
      },
      startdate: {
        type: String,
        default: Util.toStandardDateString()
      },
      enddate: {
        type: String,
        default: Util.toStandardDateString()
      },
      condition: {
        type: String,
        default: '1=1'
      },
      groupname: {
        type: String,
        default: 'year'
      }
    },
    data() {
      return {
        xc: ''
      }
    },
    methods: {
      set(res) {
        let name1 = ''
        if (this.groupname === 'year') {
          name1 = '年'
        } else if (this.groupname === 'month') {
          name1 = '月'
        } else if (this.groupname === 'week') {
          name1 = '周'
        } else {
          name1 = '日'
        }
        let typename = ''
        if (this.grouptype === 'type1') {
          typename = '抄表异常'
        } else if (this.grouptype === 'type2') {
          typename = '信号质量差'
        } else if (this.grouptype === 'type3') {
          typename = '电压低'
        } else if (this.grouptype === 'type4') {
          typename = '磁干扰'
        } else if (this.grouptype === 'type5') {
          typename = '报警关阀'
        } else if (this.grouptype === 'type6') {
          typename = '周期关阀'
        } else if (this.grouptype === 'type7') {
          typename = '过流保护关阀'
        } else if (this.grouptype === 'type8') {
          typename = '关阀走气'
        } else if (this.grouptype === 'type9') {
          typename = '拆表报警'
        } else if (this.grouptype === 'type10') {
          typename = 'E-7单干簧管故障'
        } else if (this.grouptype === 'type11') {
          typename = 'E-8双干簧管故障'
        } else if (this.grouptype === 'type12') {
          typename = 'E-16周期关阀'
        } else if (this.grouptype === 'type13') {
          typename = 'E-17过流报警'
        }else if (this.grouptype === 'type14') {
          typename = 'E-21透支关阀'
        }else {
          typename = 'E-23透支过气'
        }
        let name = []
        let types = []
        let type_lv = []
        for (var i = 0; i < res.data.length; i++) {
          name[i] = res.data[i].f_insert_date
          types[i] = res.data[i].types
          type_lv[i] = res.data[i].type_lv
        }
        // let tips = [typename,typename+'率'];
        let tips = [typename];
        this.xc = echarts.init(document.getElementById('exception'))
        this.xc.setOption({
          'title': {
            'text': name1+'出现' +typename+ '数据统计',
            'left': 'center',
            'y': '10',
            'textStyle': {
              'color': '#696969',
              fontSize: 20
            }
          },
          'backgroundColor': '#F8F8FF',
          'color': '#384757',
          'tooltip': {
            'trigger': 'axis',
            'extraCssText': 'width: auto;height: auto;'
          },
          'legend': {
            'data': tips,
            'top': '10%',
            'textStyle': {
              'color': '#dd234a'
            }
          },
          'xAxis': [
            {
              'type': 'category',
              'data': name,
              'name': '时间',
              'axisPointer': {
                'type': 'shadow'
              },
              'axisLabel': {
                'show': true,
                'textStyle': {
                  'color': '#7d838b',
                  fontSize: 15
                }
              }
            }
          ],
          'yAxis': [
            {
              'type': 'value',
              'name': '异常数',
              nameTextStyle: {
                fontSize: 10
              },
              'show': true,
              'axisLabel': {
                'show': true,
                'textStyle': {
                  'color': '#7d838b',
                  fontSize: 10
                }
              }
            }
            /*{
              'type': 'value',
              'name': '概率%',
              nameTextStyle: {
                fontSize: 15
              },
              'show': true,
              'axisLabel': {
                'show': true,
                'textStyle': {
                  'color': '#ffaa00',
                  fontSize: 15
                }
              }
            }*/
          ],
          'grid': {
            'top': '20%'
          },
          'series': [
            {
              'name': tips[0],
              nameTextStyle: {
                fontSize: 15
              },
              'type': 'line',
              'data': types,
              lineStyle: {
                width: 1
              },
              'itemStyle': {
                'normal': {
                  'color': '#da838b',
                  fontSize: 10
                }
              },
              'smooth': true
            }
            /*{
              'name': tips[1],
              'type': 'line',
              'data': type_lv,
              'yAxisIndex': 1,
              'itemStyle': {
                'normal': {
                  'color': '#7d838b',
                  fontSize: 10
                }
              },
              'smooth': true
            }*/
          ]
        })
      }
      ,
      searchdata(condition) {
        let getGen = getData(this, condition)
        co(getGen)
      }
    },
    watch: {
      'echarts'(val) {
        this.searchdata(this.condition)
      },
      'groupname'(val) {
        this.searchdata(this.condition)
      },
      'grouptype'(val) {
        if (this.echarts) {
          this.searchdata(this.condition)
        }
      }
    }
  }
</script>
