<template lang="html">
  <div>
    <div class="label">用气性质分布图</div>
    <div id="gasdistri">
    </div>
  </div>
</template>

<script>
  import * as DataSql from '../../../stores/DataSql'
  import co from 'co'

  export default {
    name: 'gasdistri',
    props: {
      listenheight: String,
      f_filiale: String,
    },
    data() {
      return {
        xc: '',
        parentgasname: [],
        childrengasname: [],
        resdata1: [],
        resdata2: [],
        timer:''
      }
    },
    beforeDestroy() {
      //清除定时器
      clearInterval(this.timer);
    },
    methods: {
      setBar() {
        this.xc = this.$echarts.init(document.getElementById('gasdistri'))
        let legendname = []
        var parenttotal = 0
        var childrentotal = 0
        this.parentgasname.forEach(function (s) {
          parenttotal = parenttotal + s.value
          legendname.push(s.name)
        })
        this.childrengasname.forEach(function (s) {
          childrentotal = childrentotal + s.value
          legendname.push(s.name)
        })

        let echartsdata = this.childrengasname
        var userdata = this.parentgasname
        var scale=this.$parent.$parent.$parent.scale
        this.xc.setOption(
          {
            title: {
              text: '',
              subtext: '',
              x: 'center'
            },
            tooltip: {
              trigger: 'item',
              show: true,
              alwaysShowContent:true,
              backgroundColor:'rgba(2, 59, 63, 0.45)',
              // borderColor :'rgba(13, 109, 180)',
              borderWidth:0,
              hideDelay:100,
                padding:10*scale,
                textStyle:{
                    fontSize:18*scale
                },
              formatter: function (params) {
                if (params.name == legendname[0] || params.name == legendname[1] || params.name == legendname[2] || params.name == legendname[3]) {
                  var percentage = (params.value / parenttotal) * 100
                  return params.marker + " " + params.name + "  <span style=\"color:#64d8d4;font-weight: bolder\">&nbsp;&nbsp;&nbsp;" + params.value + "</span>" +
                    " <span style=\"color:#e1e52a;font-weight: bolder\">&nbsp;&nbsp;&nbsp;" + percentage.toString().substring(0, 5) + "%</span>"
                } else {
                  var percentage = (params.value / childrentotal) * 100
                  return "<div style='text-align: center;height: 1px'>"+params.data.parentname + "</div><br/>" + "" + params.marker + " " + params.name + "  <span style=\"color:#64d8d4;font-weight: bolder\">&nbsp;&nbsp;&nbsp;"
                    + params.value + "</span>" + " <span style=\"color:#e1e52a;font-weight: bolder\">&nbsp;&nbsp;&nbsp;" + percentage.toString().substring(0, 5) + "%</span>"
                }
              },
              extraCssText: 'width: auto;height: auto;'
            },
            // legend: {
            //   orient: 'horizontal',
            //   icon: 'circle',
            //   x: 'center',
            //   y: '70%',
            //   itemWidth: 20 * scale,
            //   itemHeight: 10 * scale,
            //   padding:[0,20],
            //   textStyle: {
            //     fontSize: 12 * scale,
            //     padding: [0, 0, 0, 4],
            //     color: '#ffffff'
            //   },
            //   data: legendname
            // },
            series: [
              {
                // name:'数量',
                type: 'pie',
                selectedMode: 'single',
                color: ['#f7cb32', '#ef7c3d', '#3d7ce5'],
                radius: [0, '26%'],
                center: ['50%', '50%'],
                label: {
                  normal: {
                    position: 'inner'
                  }
                },
                labelLine: {
                  normal: {
                    show: false
                  }
                },
                data: userdata
              },
              // {
              //   name: 'Line 1',
              //   type: 'pie',
              //   animation: false,
              //   clockWise: false,
              //   radius: ['34%', '35%'],
              //   center: ['50%', '45%'],
              //   tooltip: {
              //     show: false
              //   },
              //   itemStyle: {
              //     normal: {
              //       label: {
              //         show: false
              //       },
              //       labelLine: {
              //         show: false
              //       },
              //     }
              //   },
              //   hoverAnimation: false,
              //   data: [{
              //     value: 100,
              //     name: '02',
              //     itemStyle: {
              //       normal: {
              //         color: '#29b7ff',//未完成的圆环的颜色
              //         label: {
              //           show: false
              //         },
              //         labelLine: {
              //           show: false
              //         }
              //       }
              //     }
              //   }]
              // },
              {
                // name:'数量',
                type: 'pie',
                color: ['#e5e280', '#6e93e0',  '#6fd9d0', '#c7e06e', '#e68d8d'],
                label: {
                  show: false
                },
                radius: ['40%', '55%'],
                center: ['50%', '50%'],
                data: echartsdata
              },
              // {
              //   name: 'Line 2',
              //   type: 'pie',
              //   tooltip: {
              //     show: false
              //   },
              //   animation: false,
              //   clockWise: false,
              //   radius: ['60%', '61%'],
              //   center: ['50%', '35%'],
              //   itemStyle: {
              //     normal: {label: {show: false}, labelLine: {show: false},}
              //   },
              //   hoverAnimation: false,
              //   data: [{
              //     value: 100,
              //     name: '02',
              //     itemStyle: {
              //       normal: {color: '#29b7ff', label: {show: false}, labelLine: {show: false}}
              //     }
              //   }]
              // }
            ]
          }, true)

        let idx = 0;
        var dataLen=echartsdata.length
        var oroptionmapjsonr_charts=this.xc
        var sidx=0
        var series=oroptionmapjsonr_charts.getOption().series
        console.log(series)
        var flag=false
        this.timer=  setInterval(()=>{
          if(!flag){
            oroptionmapjsonr_charts.dispatchAction({
              type: 'pieUnSelect',
              seriesIndex:0 ,
              dataIndex: sidx,
            });
          }

          // 取消之前选中的图形
          oroptionmapjsonr_charts.dispatchAction({
            type: 'pieUnSelect',
            seriesIndex:1 ,
            dataIndex: idx,
          });

          idx = (idx+ 1) % dataLen;


          for(var i=0;i<6;i++){
            if(series[1].data[idx].parentname==series[0].data[i].name){
              sidx=i
              flag=true
              break
            }
            flag=false
          }
          oroptionmapjsonr_charts.dispatchAction({
            type: 'pieSelect',
            seriesIndex: 0,
            dataIndex: sidx
          });
          //console.log(app.currentIndex);
          // 选中当前图形
          oroptionmapjsonr_charts.dispatchAction({
            type: 'pieSelect',
            seriesIndex: 1,
            dataIndex: idx
          });
          oroptionmapjsonr_charts.dispatchAction({
            type: 'showTip',
            seriesIndex: 1,
            dataIndex: idx
          });

        }, 3000)
      },
      searchdata(flag) {
        let getGen = getData(this, flag)
        co(getGen)
      },
      linesql(param) {
        // 拼接sql，请求后台
        if (param == '') {
          let getGen = DataSql.getData(this, 'gasdistri',{item:param,f_filiale:this.$parent.$parent.f_filiale}, 'resdata1')
          co(getGen)
        } else {
          let getGen = DataSql.getData(this,'gasdistri',{item:param,f_filiale:this.$parent.$parent.f_filiale}, 'resdata2')
          co(getGen)
        }
      },
      resize() {
        // this.$parent.$parent.changeresize(this.xc)
      }
    },
    watch: {
      // 监听用户数据并进行绘图
      'parentgasname': {
        deep: true,
        handler(val) {
          if (this.childrengasname.length > 0 && this.parentgasname.length > 0) {
            this.setBar()
          }
          this.$parent.loaddata++
        }
      },
      // 监听用户数据并进行绘图
      'childrengasname': {
        deep: true,
        handler(val) {
          if (this.childrengasname.length > 0 && this.parentgasname.length > 0) {
            this.setBar()
          }
          this.$parent.loaddata++
        }
      },
      //监听浏览器大小变化
      'listenheight': {
        deep: true,
        handler(val) {
          if (this.listenheight !== '' && this.listenheight !== 0) {
            // this.$parent.$parent.changeresize(this.xc)
            this.listenheight = 0
          }
        },
        immediate: true
      },
      'resdata1': {
        deep: true,
        handler(val) {
          var self = this
          this.resdata1.forEach(function (s) {
            let item = {}
            item.name = s.f_gasproperties
            item.value = s.num
            self.parentgasname.push(item)
          })
        },
      },
      'resdata2': {
        deep: true,
        handler(val) {
          var self = this
          this.resdata2.forEach(function (s) {
            let item = {}
            item.name = s.f_price_name
            item.parentname = s.f_gasproperties
            item.value = s.num
            self.childrengasname.push(item)
          })
        },
        immediate: true
      }
    },
    ready() {
      // this.searchdata()
      // this.set()
      this.linesql('')
      this.linesql('c.f_price_name,')
    },
  }
</script>
<style scoped>
  .label {
    margin-left: 6%;
    font-size: 1.85rem;
    color: #fff;
    width: 100%;
    height: 9%;
  }

  #gasdistri {
    height: 90%;
    width: 100%;
  }
</style>
