<template lang="html">

  <div class="basic-main" style="height: 100%;">
    <div class="row" style="height: 15%;width: 100%;" v-show="echarts">
      <div style="width: 50%;display: inline-block;">
        <button @click="$parent.notShowEcharts()" class="button_clear button_spacing">隐藏图表</button>
      </div>
      <!--图显示模板-->
      <div class="mystyle" style="width: 30%;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 style=" height: 80%;width: 98%;">
      <div id="exception" style="width: 1500px;height: 600px;"></div>
    </div>
  </div>
</template>

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

  let getData = function* (self, condition) {
    console.log('异常分析图表分析')
    console.log('异常分析图表分析数据', self)
    let colors = ['rgb(213,65,198)',
                  'rgb(109,26,121)',
                  'rgb(46,172,231)',
                  'rgb(207,146,194)',
                  'rgb(124,129,4)',
                  'rgb(99,56,201)',
                  'rgb(35,26,121)',
                  'rgb(26,121,107)',
                  'rgb(65,92,116)',
                  'rgb(199,88,39)',
                  'rgb(135,97,62)',
                  'rgb(29,99,163)',
                  'rgb(140,205,143)',]
    let load = new HttpResetClass()
    load.load('POST', 'api/af-revenue/sql/DrillErrorEchars',
      {data: {condition: condition, groupname: self.groupname[0], startDate: self.startdate, endDate: self.enddate}},
      {resolveMsg: null, rejectMsg: null}).then((res) => {
      console.log('开始进行图表重新选渲染', res)
      let all = res.data
      let f_error_type = Array.from(new Set(all.map(x => x.f_error_type)))
      console.log('f_error_type去重后', f_error_type)
      let f_insert_date = Array.from(new Set(all.map(x => x.f_insert_date)))
      console.log('f_insert_date去重后', f_insert_date)
      let type = []
      let data = []
      let colorIndex = 0;
      f_error_type.forEach((item,index) => {
        console.log(index);
        let cola = colors[colorIndex++]
        let colb = colors[colorIndex++]
        // let R = Math.floor(Math.random() * 255)
        // let G = Math.floor(Math.random() * 255)
        // let B = Math.floor(Math.random() * 255)
        // let r = Math.floor(Math.random() * 255)
        // let g = Math.floor(Math.random() * 255)
        // let b = Math.floor(Math.random() * 255)
        type.push(
          {
            name: item,
            icon: 'circle',
            textStyle: {
              color: cola,
              fontSize: 20
            }
          },
          {
            name: item + '比率',
            icon: 'circle',
            textStyle: {
              color: colb,
              fontSize: 20
            }
          }
        )
        let ls = []
        let lsbv = []
        f_insert_date.forEach((r) =>{
          let sum = all.filter(x => x.f_error_type == item && x.f_insert_date == r).map(x => x.num).reduce((x, y) => x + y, 0)
          let datesum = all.filter(x => x.f_insert_date == r).map(x => x.num).reduce((x, y) => x + y, 0)
          console.log('sum------>', sum)
          console.log('sum------>', datesum)
          ls.push(sum)
          lsbv.push(((sum/datesum)*100).toFixed(2))
        })
        data.push(
          {
            name: item,
            nameTextStyle: {
              fontSize: 15
            },
            type: 'bar',
            data: ls,
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            },
            barWidth: 'auto',
            itemStyle: {
              normal: {
                color: cola
              }
            },
            barGap: '0'
          },
          {
            name: item + '比率',
            type: 'line',
            data: lsbv,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: colb,
                fontSize: 10
              }
            },
            smooth: true
          }
        )
        console.log('ls---->', ls)
        console.log('lsbv---->', lsbv)
      })

      console.log('组织后的type数据', type)
      console.log('组织后的data数据', data)
      console.log('组织后的f_insert_date数据', f_insert_date)
      self.set(type, data, f_insert_date)
    })
  }
  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: 'year'
      }
    },
    data() {
      return {
        xc: ''
      }
    },
    methods: {
      set(type,data,tit) {

        let name1 = ''
        if (this.groupname === 'year') {
          name1 = '年'
        } else if (this.groupname === 'month') {
          name1 = '月'
        } else if (this.groupname === 'week') {
          name1 = '周'
        } else {
          name1 = '日'
        }
        const statInfo = document.getElementById('exception') // 获取图表元素
        statInfo.style.width = window.innerWidth - 200 + "px";  //初始化echarts图表宽度
        this.xc = this.$echarts.init(statInfo)
        // 设置宽度自适应
        window.addEventListener('resize', () => {
          statInfo.style.width = window.innerWidth - 200 + "px";
          this.xc.resize();
        })
        this.xc.setOption({
          'title': {
            'text': '异常' + name1 + '分析',
            'left': 'center',
            'y': '10',
            'textStyle': {
              'color': '#696969',
              fontSize: 20
            }
          },
          'tooltip': {
            'trigger': 'axis',
            'extraCssText': 'width: auto;height: auto;'
          },
          'legend': {
            'data': type,
            type: 'scroll',
            orient: 'vertical',
            left: '10%',
            top: '10%',
            itemGap: 25
          },
          'xAxis': [
            {
              'type': 'category',
              'data': tit,
              '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': {
            left: '30%', top: "18%", bottom: "5%", right: "5%", containLabel: true
          },
          'series': data
        })
      },
      searchdata(condition) {
        let getGen = getData(this, condition)
        co(getGen)
      }
    },
    watch: {
      'echarts'(val) {
        this.searchdata(this.condition)
      },
      'groupname'(val) {
        this.searchdata(this.condition)
      }
    }
  }
</script>
