<template lang="html">
  <div id="charts">
    <div id="pp" :style="{width:'100%',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_payment',f_orgid:self.orgid}},
  {resolveMsg: null, rejectMsg: null})
  .then((res) => {
    let arrparams = []
    let moneydata = []
    let gasdata = []
    for (var i = 0; i < res.data.length; i++) {
        let item = {}
        let item1={}
        arrparams[i] = res.data[i].name
        item.name = res.data[i].name
        item.value = res.data[i].gas_value
        gasdata.push(item)
        item1.name = res.data[i].name
        item1.value = res.data[i].money_value
        moneydata.push(item1)
    }
    console.log("加载echars组件")
    console.log(arrparams,gasdata)
    self.set(arrparams,gasdata,moneydata)
  })
}
export default {
  props: {
    startdate: {
      type: String,
      default: Util.toStandardDateString()
    },
    enddate: {
      type: String,
      default: Util.toStandardDateString()
    },
    orgid: {
      type: String
    }
},
 data () {
   return {
     xc: ''
   }
 },
 methods: {

   set (arrparams,gasdata,moneydata) {
     console.log("进入组件")
     this.xc = echarts.init(document.getElementById('pp'))
     this.xc.setOption({
       title: [
         {
           text: '收费来源气量金额饼状图',
           x: '0%',
           y: '0%',
           textStyle: {
             color: '#010606',
             fontSize: 18,
           }
         },   {
           text: '气量分布',
           x: '18%',
           y: '18%',
           textStyle: {
             color: '#010606',
             fontSize: 16,
           }
         },{
           text: '金额分布',
           x: '58%',
           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: ['25%', '50%'],
        hoverAnimation: true,
        minAngle: 15,//最小角度
        startAngle: 60, //起始角度
        label: {normal: {show:true,}},
        labelLine: { normal: {show:true,}},
        data: gasdata
        },
      {
        name: '金额',
        type: 'pie',
        radius: ['0%', '40%'],
        center: ['65%', '50%'],
        hoverAnimation: true,
        minAngle: 15,//最小角度
        startAngle: 60, //起始角度
        label: {normal: {show:true,}},
        labelLine: { normal: {show:true,}},
        data: moneydata
        }
    ]

 },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>
