<template lang="html">
  <div id="charts" style="display: flex">
    <div id="num" :style="{width:'50%',height:'98%'}"></div>
    <div id="gas" :style="{width:'50%',height:'98%'}"></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/sellinggasvalue',
    {data: {startDate: self.startdate, endDate: self.enddate, key: 'f_gasproperties', f_orgid: self.orgid}},
    {resolveMsg: null, rejectMsg: null})
    .then((res) => {
      let arrparams = []
      let gasdata = []
      let numdata = []
      for (var i = 0; i < res.data.length; i++) {
        let item = {}
        let item2 = {}
        arrparams[i] = res.data[i].name
        item.name = res.data[i].name
        item.value = res.data[i].gas_value
        item2.name = res.data[i].name
        item2.value = res.data[i].num_value
        gasdata.push(item)
        numdata.push(item2)
      }
      console.log('加载echars组件')
      self.setNum(arrparams, numdata)
      self.setGas(arrparams, gasdata)
    })
}
export default {
  props: {
    startdate: {
      type: String,
      default: Util.toStandardDateString()
    },
    enddate: {
      type: String,
      default: Util.toStandardDateString()
    },
    orgid: {
      type: String
    }
  },
  data () {
    return {
      xc: '',
      xd: ''
    }
  },
  methods: {

    setNum (arrparams, gasdata) {
      console.log('进入组件')
      let option1 = {
        color: ['#ed7d31', '#FFE400',
          '#ff0000', '#00b050',
          '#5b9bd5', '#7030a0',
          '#165DFF'],
        title: [
          {
            text: '销售气量饼状图',
            x: '0%',
            y: '0%',
            textStyle: {
              color: '#010606',
              fontSize: 18
            }
          }, {
            text: '笔数分布',
            x: '40%',
            y: '18%',
            textStyle: {
              color: '#010606',
              fontSize: 16
            }
          }],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: ({c}笔) ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          icon: 'circle',
          x: 'center',
          y: '80%',

          textStyle: {
            padding: [0, 0, 0, 4],
            color: '#010606'
          },
          data: arrparams
        },
        series: [
          {
            name: '笔数',
            type: 'pie',
            radius: ['0%', '40%'],
            center: ['50%', '50%'],
            hoverAnimation: true,
            minAngle: 5, // 最小角度
            startAngle: 60, // 起始角度
            label: {normal: {show: true}},
            labelLine: {normal: {show: true}},
            data: gasdata,
            percentPrecision: 4
          }
        ]

      }
      this.xd = echarts.init(document.getElementById('num'))
      this.xd.setOption(option1, true)
    },
    setGas (arrparams, moneydata) {
      console.log('进入组件')
      let option = {
        color: ['#ed7d31', '#FFE400',
          '#ff0000', '#00b050',
          '#5b9bd5', '#7030a0',
          '#165DFF'],
        title: [
          {
            text: '',
            x: '0%',
            y: '0%',
            textStyle: {
              color: '#010606',
              fontSize: 18
            }
          }, {
            text: '气量分布',
            x: '40%',
            y: '18%',
            textStyle: {
              color: '#010606',
              fontSize: 16
            }
          }],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: ({c}m³) ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          icon: 'circle',
          x: 'center',
          y: '80%',

          textStyle: {
            padding: [0, 0, 0, 4],
            color: '#010606'
          },
          data: arrparams
        },
        series: [
          {
            name: '气量',
            type: 'pie',
            radius: ['0%', '40%'],
            center: ['50%', '50%'],
            hoverAnimation: true,
            minAngle: 5, // 最小角度
            startAngle: 60, // 起始角度
            label: {normal: {show: true}},
            labelLine: {normal: {show: true}},
            data: moneydata,
            percentPrecision: 4
          }
        ]

      }
      this.xc = echarts.init(document.getElementById('gas'))
      this.xc.setOption(option, true)
    },
    searchdata () {
      let getGen = getData(this)
      co(getGen)
    }
  },
  ready () {
    this.searchdata()
  },
  watch: {
    'startdate' (val) {
      this.searchdata()
    },
    'enddate' (val) {
      this.searchdata()
    },
    'orgid' (val) {
      this.searchdata()
    }
  }

}
</script>
