<template lang="html">
  <div id="charts" style="display: flex">
    <div id="ps" :style="{width:'50%',height:'98%'}"></div>
    <div id="pp" :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 = []
      for (var i = 0; i < res.data.length; i++) {
        let item = {}
        arrparams[i] = res.data[i].name
        item.name = res.data[i].name
        item.value = res.data[i].money_value
        gasdata.push(item)
      }
      console.log('加载echars组件')
      self.setGas(arrparams, gasdata)
    })
  let load1 = new HttpResetClass()
  load1.load('POST', 'api/af-revenue/sql/sellinggasvalueroute',
    {data: {startDate: self.startdate, endDate: self.enddate, key: 'f_payment', f_orgid: self.orgid}},
    {resolveMsg: null, rejectMsg: null})
    .then((res) => {
      let arrparams = []
      let moneydata = []
      for (var i = 0; i < res.data.length; i++) {
        let item1 = {}
        arrparams[i] = res.data[i].name
        item1.name = res.data[i].name
        item1.value = res.data[i].money_value
        moneydata.push(item1)
      }
      console.log('加载echars组件')
      self.setMoney(arrparams, moneydata)
    })
}
export default {
  props: {
    startdate: {
      type: String,
      default: Util.toStandardDateString()
    },
    enddate: {
      type: String,
      default: Util.toStandardDateString()
    },
    orgid: {
      type: String
    }
  },
  data () {
    return {
      xc: '',
      xd: ''
    }
  },
  methods: {

    setGas (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: 15, // 最小角度
            startAngle: 60, // 起始角度
            label: {normal: {show: true}},
            labelLine: {normal: {show: true}},
            data: gasdata
          }
        ]

      }
      this.xd = echarts.init(document.getElementById('ps'))
      this.xd.setOption(option1, true)
    },
    setMoney (arrparams, moneydata) {
      console.log('进入组件')
      let option = {
        color: ['#00b050', '#ff0000',
          '#7030a0', '#0070c0',
          '#8acf57', '#e1a822',
          '#FFE400', '#9FDB1D',
          '#165DFF', '#00FF2A'],
        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: 15, // 最小角度
            startAngle: 60, // 起始角度
            label: {normal: {show: true}},
            labelLine: {normal: {show: true}},
            data: moneydata
          }
        ]

      }
      this.xc = echarts.init(document.getElementById('pp'))
      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>
