<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: [
          { name : 'a',value :22},
          { name : 'b',value :33},
        ],
        resdata1: [],
        resdata2: [],
        timer:''
      }
    },
    beforeDestroy() {
      //清除定时器
      clearInterval(this.timer);
    },
    methods: {
      setBar() {
          this.$parent.loadnum++
        this.xc = this.$echarts.init(document.getElementById('gasdistri'))
        let legendname = ['a','b','c']
        // 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.scale
          console.log(this.$parent.$parent.scale,'as54815234984')
        this.xc.setOption(
          {
            title: {
              text: '',
              subtext: '',
              x: 'center'
            },
            tooltip: {
              trigger: 'item',
                show: true,
                alwaysShowContent:true,
                backgroundColor:'#01396d',
              // borderColor :'rgba(13, 109, 180)',
              borderWidth:0,
              hideDelay:100,
                padding:10*scale,
                textStyle:{
                    fontSize:14*scale
                },
              formatter: function (params) {
                  // var flag=false
                  // legendname.forEach(function (s) {
                      // if(params.name==s){
                          // flag=true
                          return params.marker + " " + params.name + "  <span style=\"color:#64d8d4;font-weight: normal\">&nbsp;&nbsp;&nbsp;" + params.value + "</span>" +
                              " <span style=\"color:#e1e52a;font-weight: normal\">&nbsp;&nbsp;&nbsp;" + parseFloat((params.value/childrentotal) * 100).toFixed(2) + "%</span>"
                      // }
                  // })
                // if(!flag) {
                //   return "<div style='text-align: center;height: 1px'>"+params.data.parentname + "</div><br/>" + "" + params.marker + " " + params.name + "  <span style=\"color:#64d8d4;font-weight: normal\">&nbsp;&nbsp;&nbsp;"
                //     + params.value + "</span>" + " <span style=\"color:#e1e52a;font-weight: normal\">&nbsp;&nbsp;&nbsp;" + parseFloat((params.value / childrentotal) * 100).toFixed(3) + "%</span>"
                // }
              },
                position: function(point, params, dom, rect, size) {
                    //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
                    var x = point[0]; //
                    var y = point[1];
                    var viewWidth = size.viewSize[0];
                    var viewHeight = size.viewSize[1];
                    var boxWidth = size.contentSize[0];
                    var boxHeight = size.contentSize[1];
                    var posX = 0; //x坐标位置
                    var posY = 0; //y坐标位置
                    if (x < boxWidth) { //左边放不开
                        posX = 5;
                    } else { //左边放的下
                        posX = x - boxWidth;
                    }

                    if (y < boxHeight) { //上边放不开
                        posY = 5;
                    } else { //上边放得下
                        posY = y - boxHeight;
                    }
                    return [posX, posY];
                },
                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;
        // let idx1 = 0;
        var dataLen=echartsdata.length
        var oroptionmapjsonr_charts=this.xc
        // var sidx=0
        var series=oroptionmapjsonr_charts.getOption().series
        console.log(series)
          // var len=series[1].data.length
        var flag=false
        this.timer=  setInterval(()=>{

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

          idx = (idx+ 1) % dataLen;

          // 选中当前图形
          oroptionmapjsonr_charts.dispatchAction({
            type: 'pieSelect',
            seriesIndex: 0,
            dataIndex: idx
          });
          oroptionmapjsonr_charts.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: idx
          });

        }, 3000)
      },
      searchdata(flag) {
        let getGen = getData(this, flag)
        co(getGen)
      },
      linesql(param) {
        // 拼接sql，请求后台
           if(param=='f_gasproperties'){
               let getGen = DataSql.getData(this,'getprice',{item:param}, 'resdata1')
               co(getGen)
           }else {
               let getGen = DataSql.getData(this,'getprice',{item:param}, 'resdata2')
               co(getGen)
           }


      },
      resize() {
          console.log('刷新用气性质')
          if(this.timer!=''){
              this.resdata2.splice(0,this.resdata2.length)
              this.childrengasname.splice(0,this.childrengasname.length)
              clearInterval(this.timer);
          }
          this.linesql('f_gasproperties,f_price')
      }
    },
    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.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) {
            if(this.resdata1.length<1){
                return
            }
          var self = this
          this.resdata1.forEach(function (s) {
            let item = {}
            item.name = s.f_gasproperties
            item.value = s.value
            self.parentgasname.push(item)
          })

        },
      },
      'resdata2': {
        deep: true,
        handler(val) {
            if(this.resdata2.length<1){
                return
            }
          var self = this
          this.resdata2.forEach(function (s) {
            let item = {}
            item.name = s.f_price
            // item.parentname = s.f_gasproperties
            item.value = s.value
            self.childrengasname.push(item)
          })

        },
      }
    },
    ready() {
      // this.searchdata()
      this.setBar()
      // this.linesql('f_gasproperties')
      // this.linesql('f_gasproperties,f_price')
    },
  }
</script>
<style scoped>
  .label {
    margin-left: 6%;
    font-size: 1.85rem;
    color: #fff;
    width: 100%;
    height: 9%;
  }

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