<template lang="html">
  <div>
    <div id="h" :style="{width:'100%',height:'100%'}"></div>
  </div>
</template>

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

let getData = function * (self) {
  let load = new HttpResetClass()
  load.load('POST','api/af-revenue/sql/webmeter_getNewHandChanceList',
    {data:{condition: '1 = 1' + (self.orgid != null ? ' and uf.f_orgid in( ' + self.orgid + ')' : ''),
        startDate: self.startdate + ' 00:00:00',
        endDate: self.enddate  + ' 23:59:59'}},
    {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()
    },
    orgid:'',
    condition: {
      type: String,
      default: '1=1'
    }
  },
  data () {
    return {
      xc: ''
    }
  },
  ready(){
    console.log(this.echarts)
    this.searchdata()
  },
  methods: {
    // every_time: 日期  f_bv1: 抄表成功率   f_gas: 日用气量
    set (every_time,f_bv1,f_gas,f_gas1) {

      this.xc = this.$echarts.init(document.getElementById('h'))
      this.xc.setOption({
        title: {
          text: '抄表率分析',
          x: 'left',
          textStyle: {
            color: '#000',
            fontSize: 20
          }
        },
        color: ['#61a0a8', '#2f4554'],
        tooltip: {
          trigger: 'axis',
          extraCssText: 'width: auto;height: auto;'
        },
        legend: {
          x: 'left',
          y: 'bottom',
          textStyle: {
            fontSize: 12
          },
          data: [ '日均用气量(m³)','抄表成功率%']
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: every_time,
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#7d8000',
                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_gas1,
            barWidth: 30,
            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: {
    'startdate' (val) {
      this.searchdata()
    },
    'enddate' (val) {
      this.searchdata()
    },
    'orgid' (val) {
      this.searchdata()
    }
  }
}
</script>
