<template>
  <div>
    <div class="label">客户黑名单</div>
    <div class="f1">
      <table>
        <tr>
          <td>黑名单数量</td>
          <td style="color: #f7cb32;font-weight: bolder;">112</td>
          <td>已经处理</td>
          <td style="color: #69d8d2;font-weight: bolder;">10</td>
        </tr>
        <tr>
          <td>费用</td>
          <td style="color: #f29961;font-weight: bolder;">112</td>
          <td>处理完成率</td>
          <td style="color: #748bf0;font-weight: bolder;">8.9%</td>
        </tr>
      </table>
    </div>
    <div id="blacklist" ></div>
  </div>
</template>

<script>
  export default {
    name: "TrafficStatistics",
    data() {
      return {
        xc: '',
        timer:''
      }
    },
    beforeDestroy() {
      //清除定时器
      clearInterval(this.timer);
    },
    methods: {
      setBar(iddata) {
        var self = this
        this.xc = this.$echarts.init(document.getElementById('blacklist'))

        var scale=this.$parent.$parent.$parent.scale

        var color = ["#69d8d2", "#013e48"]
        var center = [66, 82]
        var startAngle=0

        this.xc.setOption({
          color: color,
          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:18*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;',
          },
          series: [
            {
              name: 'demo',
              type: 'pie',
              center: ['50%', '40%'],
              radius: ['40%', '60%'],
              minAngle: 15,//最小角度
              startAngle: startAngle, //起始角度
              avoidLabelOverlap: false,
              hoverAnimation: false,
              label: {
                show:false
                // normal: {
                //   formatter: function (params, ticket, callback) {
                //     return '{b|' + params.name + '}{b|' + params.value + '}\n';
                //   },
                //   borderWidth: 20 * scale,
                //   borderRadius: 4 * scale,
                //   padding: [0, -89 * scale],
                //   rich: {
                //     a: {
                //       color: '#f3c832',
                //       fontSize: 12 * scale,
                //     },
                //     b: {
                //       fontSize: 12 * scale,
                //       color: '#6fd9d0'
                //     }
                //   }
                // }
              },
              labelLine: {
                show:false
                // normal: {
                //   length: 10 * scale,
                //   length2: 90 * scale,
                //   lineStyle: {
                //     color: color[0]
                //   }
                // }
              },
              data: iddata
            }
          ]
        })

        let idx = 0;
        var dataLen=iddata.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)
      },
    },
    ready() {
       var ss=[{name:'未处理',value:102},{name:'已处理',value:10}]
      this.setBar(ss)
    }
  }
</script>

<style scoped>
  @media screen and (max-width: 1920px) {
    .label {
      margin-left: 6%;
      font-size: 0.85em;
      color: #fff;
      height: 8%;
    }

    .f1{
      margin-top: 6%;
      padding-left: 15%;
      height: 25%;
    }
    .f1 table tr td{
      color: white;
      height: 10%;
      width: 2%;
      text-align: left;
      padding: 1% 2% 0 2%;
    }
    #blacklist {
      height: 67%;
      width: 99%;
      padding: 1% 2% 3% 2%;
    }
  }
  @media screen and (max-width: 1366px) {
    .label {
      margin-left: 6%;
      font-size: 0.85em;
      color: #fff;
      height: 8%;
    }

    .f1{
      margin-top: 6%;
      padding-left: 15%;
      height: 25%;
    }
    .f1 table tr td{
      color: white;
      height: 10%;
      width: 2%;
      text-align: left;
      font-size: 1rem;
      padding: 1% 2% 0 2%;
    }
    #blacklist {
      height: 67%;
      width: 99%;
      padding: 1% 2% 3% 2%;
    }
  }

</style>
