<template lang="html">
  <div>
    <div id="userhandplan" 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_getNewHandChanceList',
      {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_bv1 = []
        let f_gas = []
        let f_gas1 = []
        for (var i = 0; i < res.data.length; i++) {
          every_time[i] = res.data[i].f_insert_date
          f_bv1[i] = res.data[i].f_bv1
          f_gas[i] = res.data[i].f_gas
          f_gas1[i] = res.data[i].f_gas1
        }
        console.log(self.echarts)
        self.set(every_time, f_bv1, f_gas, f_gas1)
      })
  }
  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: ''
      }
    },
    ready(){
      console.log(this.echarts)
    },
    methods: {
      // every_time: 日期  f_bv1: 抄表成功率   f_gas: 日用气量
      set (every_time,f_bv1,f_gas,f_gas1) {

        this.xc = echarts.init(document.getElementById('userhandplan'))
        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': '日均户均用气量(成功)(m³)',
                'icon': 'circle',
                'textStyle': {
                  'color': '#7d8000',
                  fontSize: 12
                }
              },
              {
                'name': '日均户均用气量(在用)(m³)',
                'icon': 'circle',
                'textStyle': {
                  'color': '#7b5541',
                  fontSize: 12
                }
              },
              {
                'name': '抄表成功率%',
                'icon': 'circle',
                'textStyle': {
                  'color': '#ffaa00',
                  fontSize: 12
                }
              }
            ],
            'top': '10%',
            'textStyle': {
              'color': '#fff'
            }
          },
          'xAxis': [
            {
              'type': 'category',
              'data': every_time,
              'axisPointer': {
                'type': 'shadow'
              },
              'axisLabel': {
                'show': true,
                'textStyle': {
                  'color': '#7d838b',
                  fontSize: 10
                }
              }
            }
          ],
          'yAxis': [
            {
              'type': 'value',
              'name': '用气量(m³)',
              nameTextStyle: {
                fontSize: 10
              },
              'show': true,
              'axisLabel': {
                'show': true,
                'textStyle': {
                  'color': '#7d8000',
                  fontSize: 10
                }
              }
            },
            {
              'type': 'value',
              'name': '完成率(%)',
              nameTextStyle: {
                fontSize: 10
              },
              'show': true,
              'axisLabel': {
                'show': true,
                'textStyle': {
                  'color': '#7d838b',
                  fontSize: 10
                }
              }
            }
          ],
          'grid': {
            'top': '20%'
          },
          'series': [
            {
              'name': '日均户均用气量(成功)(m³)',
              nameTextStyle: {
                fontSize: 10
              },
              'type': 'bar',
              'data': f_gas,
              'markPoint': {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              },
              'itemStyle': {
                'normal': {
                  'color': '#7d8000'
                }
              },
              'barWidth': 'auto',
              'barGap': '0'
            },
            {
              'name': '日均户均用气量(在用)(m³)',
              nameTextStyle: {
                fontSize: 10
              },
              'type': 'bar',
              'data': f_gas1,
              'barWidth': 'auto',
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              },
              'itemStyle': {
                'normal': {
                  'color': '#7b5541'
                }
              },
              'barGap': '0'
            },
            {
              'name': '抄表成功率%',
              'type': 'line',
              'yAxisIndex': 1,
              'data': f_bv1,
              'itemStyle': {
                'normal': {
                  'color': '#ffaa00',
                  fontSize: 10
                }
              },
              'smooth': true
            }
          ]
        })
      },
      searchdata () {
        let getGen = getData(this)
        co(getGen)
      }
    },
    watch: {
      'echarts' () {
        console.log(this.echarts)
        this.searchdata()
      }
    }
  }
</script>
