<template>
  <div>
    <div class="label">报建用户分布</div>
    <div id="applyuser"></div>
  </div>
</template>

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

  export default {
    name: "inspec-distri",
    props: {
      listenheight: String,
      f_filiale: String,
    },
    data() {
      return {
        xc: '',
        resdata: [],
        ecdata: [],
        totaluser: '',
        timer:''
      }
    },
    beforeDestroy() {
      //清除定时器
      clearInterval(this.timer);
    },
    methods: {
      setBar() {
        this.xc = this.$echarts.init(document.getElementById('applyuser'))
        var scale=this.$parent.$parent.$parent.scale
        let echartData = []
        let lengname = []
        let ecdatastr = []
        this.ecdata.forEach(function (s) {
          ecdatastr.push(DataSql.dataunit(s.value))
          echartData.push(s)
          lengname.push(s.name)
        })
        var rich = {
          yellow: {
            color: "#ffc72b",
            fontSize: 10 * scale,
            padding: [5, 4],
            align: 'center'
          },
          total: {
            color: "#ffc72b",
            fontSize: 10 * scale,
            align: 'center'
          },
          white: {
            color: "#fff",
            align: 'center',
            fontSize: 10 * scale,
            padding: [11*scale, 0, 11*scale, 0]
          },
          blue: {
            color: '#15dce2',
            fontSize: 14 * scale,
            align: 'center',
            padding: [10*scale, 0]
          }
        }
        var total = 0; //用户总和
        echartData.forEach(function (value) {
          total += value.value;
        });
        this.xc.setOption({
          title: [
            {
              text: '总用户数',
              left: '44%',
              top: '36%',
              textStyle: {
                color: '#ffffff',
                fontSize: 14 * scale,

              }
            },
            {
              text: total,
              left: '45%',
              top: '43%',
              padding: [10 * scale, 10 * scale],
              textStyle: {
                color: '#00e2ea',
                fontSize: 14 * scale,
              }
            }],

          tooltip: {
            show: true,
            alwaysShowContent:true,
            backgroundColor:'rgba(2, 59, 63, 0.45)',
            // borderColor :'rgba(13, 109, 180)',
            borderWidth:0,
            hideDelay:100,
            triggerOn:'mousemove',
              padding:10*scale,
              textStyle:{
                  fontSize:16*scale
              },
            formatter: function (params) {
              return  params.marker + " " + params.name + "  <span style=\"color:#e1e52a;font-weight: bolder\">&nbsp;&nbsp;" + params.value + "</span>"
            },
            enterable:true,
            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: '85%',
            itemGap: 20,
            itemWidth: 20 * scale,
            itemHeight: 10 * scale,
            textStyle: {
              fontSize: 12 * scale,
              // padding: [0, 0, 0, 4 * scale],
              color: '#ffffff'
            },
            data: lengname
          },
          series: [
            // {
            //   name: 'Line 1',
            //   type: 'pie',
            //   animation: false,
            //   clockWise: false,
            //   radius: ['30%', '31%'],
            //   center: ['46%', '49%'],
            //   itemStyle: {
            //     normal: {
            //       label: {
            //         show: false
            //       },
            //       labelLine: {
            //         show: false
            //       },
            //     }
            //   },
            //   hoverAnimation: false,
            //   tooltip: {
            //     show: false
            //   },
            //   data: [{
            //     value: 100,
            //     name: '02',
            //     itemStyle: {
            //       normal: {
            //         color: '#29b7ff',//未完成的圆环的颜色
            //         label: {
            //           show: false
            //         },
            //         labelLine: {
            //           show: false
            //         }
            //       }
            //     }
            //   }]
            // },
            {
              name: '总用户数',
              type: 'pie',
              radius: ['35%', '50%'],
              center: ['50%', '42%'],
              minAngle: 15,//最小角度
              startAngle: 60, //起始角度
              hoverAnimation: false,
              color: ['#6fd9d0', '#ede61f',  '#6e93e0','#e5ae26'],
              label: {
                show:false
                // normal: {
                //   borderWidth: 20 * scale,
                //   borderRadius: 4 * scale,
                //   formatter: function (params, ticket, callback) {
                //     var total = 0; //用户总数量
                //     var percent = 0;
                //     echartData.forEach(function (value, index, array) {
                //       total += value.value;
                //     });
                //     percent = ((params.value / total) * 100).toFixed(1);
                //     return '{blue|' + params.name + '}{blue|' + params.value + '}\n\n';
                //   },
                //   padding: [0, -86 * scale],
                //   rich: rich,
                // }
              },

              labelLine: {
                show:false
                // normal: {
                //   length: 20 * scale,
                //   length2: 80 * scale,
                //   lineStyle: {
                //     formatter: function (params, ticket, callback) {
                //       var total = 0; //用户总数量
                //       var percent = 0; //用户占比
                //       echartData.forEach(function (value, index, array) {
                //         total += value.value;
                //       });
                //       percent = ((params.value / total) * 100).toFixed(1);
                //       return '{white|     ' + params.name + '}\n{hr|}\n{yellow|     ' + params.value + '}\n{blue|    ' + percent + '%}';
                //     },
                //   }
                // }
              },
              data: echartData
            },
            // {
            //   name: 'Line 2',
            //   type: 'pie',
            //   animation: false,
            //   clockWise: false,
            //   radius: ['54%', '55%'],
            //   center: ['46%', '49%'],
            //   itemStyle: {
            //     normal: {
            //       label: {
            //         show: false
            //       },
            //       labelLine: {
            //         show: false
            //       },
            //     }
            //   },
            //   hoverAnimation: false,
            //   tooltip: {
            //     show: false
            //   },
            //   data: [{
            //     value: 100,
            //     name: '02',
            //     itemStyle: {
            //       normal: {
            //         color: '#29b7ff',//未完成的圆环的颜色
            //         label: {
            //           show: false
            //         },
            //         labelLine: {
            //           show: false
            //         }
            //       }
            //     }
            //   }
            //   ]
            // }
          ]
        }, true)

        let idx = 0;
        var dataLen=echartData.length
        var oroptionmapjsonr_charts=this.xc
        this.timer=setInterval(()=>{
          // 取消之前选中的图形
          oroptionmapjsonr_charts.dispatchAction({
            type: 'pieUnSelect',
            seriesIndex: 0,
            dataIndex: idx,
          });

          idx = (idx+ 1) % dataLen;
          //console.log(app.currentIndex);
          // 选中当前图形
          oroptionmapjsonr_charts.dispatchAction({
            type: 'pieSelect',
            seriesIndex: 0,
            dataIndex: idx
          });
          oroptionmapjsonr_charts.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: idx
          });
        }, 3000)
      },
    },
    watch: {
      'resdata': {
        deep: true,
        handler(val) {
          for (var i = 0; i < this.resdata.length; i++) {
            let item = {}
            if (this.resdata[i].name == null) {
              item.name = '未确定'
              item.value = this.resdata[i].value
            } else {
              item.name = this.resdata[i].name
              item.value = this.resdata[i].value
            }
            this.ecdata.push(item)
          }
          this.setBar()
          this.$parent.loaddata++
        }
      }
    },
    ready() {
      let getdata = DataSql.getData(this,  'apply',{f_filiale:this.$parent.$parent.f_filiale}, 'resdata')
      co(getdata)
    }
  }
</script>

<style scoped>

  .label {
    font-size: 1.85rem;
    color: #fff;
    height: 8%;
    width: 100%;
    margin-left: 6%;
  }

  #applyuser {
    height: 89%;
    width: 100%;
  }


</style>
