<template lang="html">
  <div id="charts" style="width: 100%">
    <div id="PaymentDistributed" :style="{width:'100%',height:'100%'}"></div>
  </div>
</template>

<script>
  import * as Util from '../../Util'
  import * as Des from '../../stores/DrillECharts'
  import co from 'co'

  export default {
    name:'PaymentDistributed',
    props: {
      startdate: {
        type: String,
        default: Util.toStandardDateString()
      },
      enddate: {
        type: String,
        default: Util.toStandardDateString()
      },
      f_orgstr: {
        type: String,
        default: ''
      },
      echartsflag:Boolean,
    },
    data () {
      title: '站点管理'
      return {
        texttile: '',
        xc: '',
        sqlobtaindata:[],

      }
    },
    methods: {
      setPie(self, id, data,text) {
        console.log(data, '饼状图数据')
        // 获取显示区域
        self.xc = self.$echarts.init(document.getElementById(id))
        var scale = 0.8
        // 获取图例
        var legendname = []
        let data1=[]
        let data2=[]
        data.forEach(function (s) {
          legendname.push(s.name)
          console.log(s,'ceshiasd')
          let item={}
          let item1={}
          item.name=s.name
          item.value=s.value
          data1.push(item)
          item1.name=s.name
          item1.value=s.value1
          data2.push(item1)
        })
        // 获取数据
        var echartData = data1
        var echartData1 = data2

        console.log(echartData,echartData1, legendname, '绘图样式数据')
        // 绘图
        self.xc.setOption({
          title: [
            {
              text: 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,
              }
            }],
          legend: {
            orient: 'horizontal',
            icon: 'circle',
            x: 'center',
            y: '80%',
            itemWidth: 20 * scale,
            itemHeight: 10 * scale,
            textStyle: {
              fontSize: 16 * scale,
              padding: [0, 0, 0, 4],
              color: '#010606'
            },
            data: legendname
          },
          tooltip: {
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            trigger: 'item',
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['0%', '40%'],
              center: ['25%', '50%'],
              hoverAnimation: false,
              minAngle: 15,//最小角度
              startAngle: 60, //起始角度
              label: {normal: {show:false,}},
              labelLine: { normal: {show:false,}},
              data: echartData
            },
            {
              name: '总用户数',
              type: 'pie',
              radius: ['0%', '40%'],
              center: ['65%', '50%'],
              hoverAnimation: false,
              minAngle: 15,//最小角度
              startAngle: 60, //起始角度
              label: {normal: {show:false,}},
              labelLine: { normal: {show:false,}},
              data: echartData1
            }]
        }, true)
      },
      searchdata () {
        if(this.l==0){this.l++;return}
        var sqlcondition={
          items: 'f_payment name,sum(f_pregas) value,sum(f_collection) value1',
          tablename: 't_sellinggas',
          condition: 'f_state=\'有效\' and f_operate_date>=\''+this.startdate+'\' and f_operate_date<=\''+this.enddate+'\' and   ' +
          'f_orgstr like \'%'+this.f_orgstr+'%\' GROUP BY f_payment '
        }
        let getData=Des.getData(this,sqlcondition)
        co(getData)
      }
    },
    ready () {
      this.searchdata()
    },
    watch: {
      'startdate' (val) {
        this.searchdata()
      },
      'enddate' (val) {
        this.searchdata()
      },
      'f_orgstr' (val) {
        this.searchdata()
      },
      'sqlobtaindata':{
        deep:true,
        handler(val){
          if(this.sqlobtaindata.length<1){
            return
          }
          this.setPie(this,'PaymentDistributed',this.sqlobtaindata,'气费分布饼状图')
        }
      },
    }

  }
</script>

