<template lang="html">
  <div id="charts">
    <div id="bm" :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/userfilesvalues',
    {data: {startDate: self.startdate, endDate: self.enddate, f_orgid: self.orgid}},
    {resolveMsg: null, rejectMsg: null})
    .then((res) => {
      self.texttile = '用户类型'
      // let arrparams = []
      console.log('获取数据。。', res.data)
      let org = []
      let numgf = []
      let numjm = []
      let numsy = []
      let numbg = []
      let numgy = []
      let numjm2 = []
      for (var i = 0; i < res.data.length; i++) {
        if (!org.includes(res.data[i].org)) {
          org.push(res.data[i].org)
        }
        if (res.data[i].name === '工业用气') {
          numgy[org.indexOf(res.data[i].org)] = res.data[i].num
        } else if (res.data[i].name === '公福用气') {
          numgf[org.indexOf(res.data[i].org)] = res.data[i].num
        } else if (res.data[i].name === '商业用气') {
          numsy[org.indexOf(res.data[i].org)] = res.data[i].num
        } else if (res.data[i].name === '壁挂炉用气') {
          numbg[org.indexOf(res.data[i].org)] = res.data[i].num
        } else if (res.data[i].name === '居民用气') {
          numjm[org.indexOf(res.data[i].org)] = res.data[i].num
        } else {
          numjm2[org.indexOf(res.data[i].org)] = res.data[i].num
        }
      }
      self.set(org, numgy, numjm, numbg, numsy, numgf, numjm2)
    })
}
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 (org, numgy, numjm, numbg, numsy, numgf, numjm2) {
      this.xc = echarts.init(document.getElementById('bm'))
      this.xc.setOption({
        title: {
          text: '用户散列图',
          subtext: '数据查询来源',
          x: 'left'
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return params.name + '</br>' + params.seriesName + ': ' + params.value + '户'
          }
        },
        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',
            data: org
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '居民用气',
            type: 'bar',
            data: numjm,
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          },
          {
            name: '公福用气',
            type: 'bar',
            data: numgf,
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          },
          {
            name: '商业用气',
            type: 'bar',
            data: numsy,
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          },
          {
            name: '工业用气',
            type: 'bar',
            data: numgy,
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          },
          {
            name: '壁挂炉用气',
            type: 'bar',
            data: numbg,
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          },
          {
            name: '供暖锅炉',
            type: 'bar',
            data: numjm2,
            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>
