<template lang="html">
  <div>
    <div id="userinstruct" 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) {
    let load = new HttpResetClass()
    load.load('POST','rs/sql/webmeter_getNewInstructChanceList',
      {data:{condition: self.condition, startDate: self.startdate, endDate: self.enddate}},
      {resolveMsg: null, rejectMsg: null}).then((res) => {
        // every_time,f_bv1,f_bv2,f_bv3,f_gas
        let every_time = []
        let f_bv0 = []
        let f_bv1 = []
        let f_bv2 = []
        let c = []
        let c0 = []
        for (var i = 0; i < res.data.length; i++) {
          every_time[i] = res.data[i].f_insert_date
          f_bv0[i] = res.data[i].f_bv0
          f_bv1[i] = res.data[i].f_bv1
          f_bv2[i] = res.data[i].f_bv2
          c[i] = res.data[i].c
          c0[i] = res.data[i].c0
        }
        self.set(every_time, f_bv0, f_bv1, f_bv2, c, c0)
      })
  }
  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'
      }
    },
    data () {
      return {
        xc: ''
      }
    },
    methods: {
      // every_time: 日期  f_bv1: 抄表成功率  f_bv2: 指令成功率  f_bv3: 综合成功率  f_gas: 日用气量
      set (every_time, f_bv0, f_bv1, f_bv2, c, c0) {

        this.xc = echarts.init(document.getElementById('userinstruct'))
        this.xc.setOption({
          'title': {
            'text': '指令成功率分析',
            'left': 'center',
            'y': '10',
            'textStyle': {
              'color': '#696969',
              fontSize: 20
            }
          },
          'backgroundColor': '#F8F8FF',
          'color': '#384757',
          'tooltip': {
            'trigger': 'axis',
            'extraCssText': 'width: auto;height: auto;'
          },
          'legend': {
            'data': [
              {
                'name': '指令成功表具数',
                'icon': 'circle',
                'textStyle': {
                  'color': '#5b5',
                  fontSize: 20
                }
              },
              {
                'name': '总表具数',
                'icon': 'circle',
                'textStyle': {
                  'color': '#233564',
                  fontSize: 20
                }
              },
              {
                'name': '表具指令成功率%',
                'icon': 'circle',
                'textStyle': {
                  'color': '#ffaa00',
                  fontSize: 20
                }
              },
              {
                'name': '指令成功率%',
                'icon': 'circle',
                'textStyle': {
                  'color': '#ffaaff',
                  fontSize: 20
                }
              },
              {
                'name': '综合指令成功率%',
                'icon': 'circle',
                'textStyle': {
                  'color': '#ff0000',
                  fontSize: 20
                }
              }
            ],
            'top': '10%',
            'textStyle': {
              'color': '#fff'
            }
          },
          'xAxis': [
            {
              'type': 'category',
              'data': every_time,
              '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': '指令成功表具数',
              nameTextStyle: {
                fontSize: 15
              },
              'type': 'bar',
              'data': c0,
              'markPoint': {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              },
              'barWidth': 'auto',
              'itemStyle': {
                'normal': {
                  'color': '#5b5'
                }
              },
              'barGap': '0'
            },
            {
              'name': '总表具数',
              nameTextStyle: {
                fontSize: 15
              },
              'type': 'bar',
              'data': c,
              'markPoint': {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              },
              'barWidth': 'auto',
              'itemStyle': {
                'normal': {
                  'color': '#233564'
                }
              },
              'barGap': '0'
            },
            {
              'name': '表具指令成功率%',
              'type': 'line',
              'yAxisIndex': 1,
              'data': f_bv1,
              'itemStyle': {
                'normal': {
                  'color': '#ffaa00',
                  fontSize: 15
                }
              },
              'smooth': true
            },
            {
              'name': '指令成功率%',
              'type': 'line',
              'yAxisIndex': 1,
              'data': f_bv2,
              'itemStyle': {
                'normal': {
                  'color': '#ffaaff',
                  fontSize: 15
                }
              },
              'smooth': true
            },
            {
              'name': '综合指令成功率%',
              'type': 'line',
              'yAxisIndex': 1,
              'data': f_bv0,
              'itemStyle': {
                'normal': {
                  'color': '#ff0000',
                  fontSize: 15
                }
              },
              'smooth': true
            }
          ]
        })
      },
      searchdata () {
        let getGen = getData(this)
        co(getGen)
      }
    },
    watch: {
      'echarts' () {
        this.searchdata()
      }
    }
  }
</script>
