<template lang="html">
  <div id="charts">
    <div id="gph" :style="{width:'100%',height:'100%'}"></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','api/af-revenue/sql/getPregas',
  {data: {startDate: self.startdate + ' 00:00:00', endDate: self.enddate + ' 23:59:59',f_orgid: `f_orgid = ${self.orgid}`,condition: '1=1'}},
  {resolveMsg: null, rejectMsg: null})
  .then((res) => {
    let data = res.data
    // let xPro = Array.from(new Set(res.data.map(x => x.f_gasproperties)))
    // 表型
    let xPro = data.map(x => x.f_meter_type)
    // 居民用气
    let yNumJM = data.map(x => x.f_ptpregas)
    let yNumBGL = data.map(x => x.f_bglpregas)
    let yNumJZCN = data.map(x => x.f_cnpregas)
    let yNumGF = data.map(x => x.f_gfpregas)
    let yNumFJM = data.map(x => x.f_fjmpregas)
    // xPro.forEach(item => {
    //   yNumJB[yNumJB.length] = data.filter(x => x.f_gasproperties === item && x.f_meter_type === '机表').map(x => x.f_pregas).reduce((x, y) => x + y, 0)
    //   yNumKB[yNumKB.length] = data.filter(x => x.f_gasproperties === item && x.f_meter_type === '卡表').map(x => x.f_pregas).reduce((x, y) => x + y, 0)
    //   yNumWLWB[yNumWLWB.length] = data.filter(x => x.f_gasproperties === item && x.f_meter_type === '物联网表').map(x => x.f_pregas).reduce((x, y) => x + y, 0)
    // })
    console.log('表型', xPro)
    console.log('居民用气', yNumJM)
    console.log('壁挂炉用气', yNumBGL)
    console.log('集中采暖', yNumJZCN)
    console.log('公福用气', yNumGF)
    console.log('非居民用气', yNumFJM)
    // self.texttile = '用户类型'
    // let arrparams = []
    // let numdata = []
    // let gasdata = []
    // let pricedata = []
    // for (var i = 0; i < res.data.length; i++) {
    //     arrparams[i] = res.data[i].name
    //     numdata[i] = res.data[i].num_value
    //     gasdata[i] = res.data[i].gas_value
    //     pricedata[i] = res.data[i].money_value
    // }
    self.set(xPro,yNumJM,yNumBGL,yNumJZCN,yNumGF,yNumFJM)
  })
}
export default {
  props: {
    startdate: {
      type: String,
      default: Util.toStandardDateString()
    },
    enddate: {
      type: String,
      default: Util.toStandardDateString()
    },
    orgid: {
      type: String
    }
},
 data () {
   title: '用户购(用)气'
   return {
     texttile: '',
     xc: ''
   }
 },
 methods: {
   set (arrparams,yNumJM,yNumBGL,yNumJZCN,yNumGF,yNumFJM) {
     this.xc = echarts.init(document.getElementById('gph'))
     this.xc.setOption({
       title : {
         text: '用户购(用)气',
         subtext: '数据查询来源',
         x: 'left'
       },
       tooltip : {
         trigger: 'axis'
       },
       legend: {
         x: 'left',
         y: 'bottom',
         data: ['居民用气','壁挂炉用气','集中采暖','公福用气','非居民用气']
       },
       toolbox: {
         show : true,
         feature : {
           dataView : {show: true, readOnly: false},
           magicType : {show: true, type: ['line', 'bar']},
           restore : {show: true},
           saveAsImage : {show: true}
         }
       },
       calculable : true,
       xAxis : [
         {
           type : 'category',
           axisLabel :{
             interval:0
           },
           data : arrparams
         }
      ],
      yAxis : [
        {
          type : 'value'
        }
      ],
      series : [
        {
          name:'居民用气',
          type:'bar',
          data:yNumJM,
          markLine : {
            data : [
              {type : 'average', name: '平均值'}
            ]
          }
        },
        {
          name:'壁挂炉用气',
          type:'bar',
          data:yNumBGL,
          markLine : {
            data : [
              {type : 'average', name: '平均值'}
            ]
          }
        },
        {
          name:'集中采暖',
          type:'bar',
          data:yNumJZCN,
          markLine : {
          data : [
              {type : 'average', name : '平均值'}
            ]
          }
        },
        {
          name:'公福用气',
          type:'bar',
          data:yNumGF,
          markLine : {
          data : [
              {type : 'average', name : '平均值'}
            ]
          }
        },
        {
          name:'非居民用气',
          type:'bar',
          data:yNumFJM,
          markLine : {
          data : [
              {type : 'average', name : '平均值'}
            ]
          }
        }
      ]
     })
   },
   searchdata () {
     let getGen =getData(this)
     co(getGen)
   }
 },
 ready () {
   this.searchdata()
 },
 watch: {
   'startdate' (val) {
     this.searchdata()
   },
   'enddate' (val) {
     this.searchdata()
   },
   'orgid' (val) {
     this.searchdata()
   }
 }

}
</script>
