<template>
  <!-- 用户类型统计 -->
  <div style="width: 100%;height: 100%;">
    <div class="head_headlineUrl">{{title}}</div>
    <div class="card_collect">
      <div id="userChart"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'UserTypestatistics',
    props: {
      title: {
        type: String,
        default: () => '文字',
      },
      dataList: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        myChartAnn4: null,
      }
    },
    mounted() {
      this.getUserCylinder()
    },
    methods: {
      getUserCylinder() {
        var that = this
        var chartDom = document.getElementById('userChart');
        that.myChartAnn4 = that.$echarts.init(chartDom);
        var colorList = [{
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [{
              offset: 0,
              color: 'rgba(51,192,205,0.1)' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(51,192,205,0.57)' // 100% 处的颜色
            }
          ],
          globalCoord: false // 缺省为 false
        }, {
          type: 'linear',
          x: 1,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0,
              color: 'rgba(115,172,255,0.02)' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(115,172,255,0.67)' // 100% 处的颜色
            }
          ],
          globalCoord: false // 缺省为 false
        }, {
          type: 'linear',
          x: 1,
          y: 0,
          x2: 0,
          y2: 0,
          colorStops: [{
              offset: 0,
              color: 'rgba(158,135,255,0.02)' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(158,135,255,0.57)' // 100% 处的颜色
            }
          ],
          globalCoord: false // 缺省为 false
        }]
        var colorLine = ['#33C0CD', '#73ACFF', '#9E87FF']

        function getRich() {
          let result = {}
          colorLine.forEach((v, i) => {
            result[`hr${i}`] = {
              backgroundColor: colorLine[i],
              borderRadius: 3,
              width: 3,
              height: 3,
              padding: [3, 3, 0, -12]
            }
            result[`a${i}`] = {
              padding: [-11, 6, -20, 6],
              color: colorLine[i],
              backgroundColor: 'transparent',
              fontSize: 12
            }
          })
          return result
        }
        var data = [{
          'name': '门店管理员',
          'value': 25
        }, {
          'name': '配送员',
          'value': 20
        }, {
          'name': '销售员',
          'value': 18
        }].sort((a, b) => {
          return b.value - a.value
        })
        data.forEach((v, i) => {
          v.labelLine = {
            lineStyle: {
              width: 1,
              color: colorLine[i]
            }
          }
        })
        var option;
        option = {
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {c}人 ({d}%)',
            backgroundColor: 'rgba(3, 124, 213, 0.5)',
            extraCssText: 'background: rgba(3, 124, 213, 0.5);',
            textStyle: {
              color: '#ffffff'
            }
          },
          legend: {
            show: false,
          },
          series: [{
            type: 'pie',
            radius: '60%',
            center: ['50%', '50%'],
            clockwise: true,
            avoidLabelOverlap: true,
            label: {
              show: true,
              position: 'outside',
              formatter: function(params) {
                const name = params.name
                const percent = params.percent + '%'
                const index = params.dataIndex
                return [`{a${index}|${name}：${percent}}`, `{hr${index}|}`].join('\n')
              },
              rich: getRich()
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  return colorList[params.dataIndex]
                }
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            data,
            roseType: 'radius'
          }]
        };;
        let lastIndex = 0;
        let currentIndex = 0;
        setInterval(() => {
          that.myChartAnn4.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: lastIndex,
          });
          that.myChartAnn4.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: currentIndex,
          });
          that.myChartAnn4.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: currentIndex,
          });
          lastIndex = currentIndex;
          ++currentIndex;
          if (currentIndex > 2) {
            currentIndex = 0;
          }
        }, 2000)
        that.myChartAnn4.setOption(option);
      },
      getResize() {
        this.myChartAnn4.resize();
      }
    }
  }
</script>

<style lang="scss">
  .head_headlineUrl {
    display: flex;
    align-items: center;
    padding-left: 40px;
    margin-left: 10px;
    margin-right: 20px;
    width: calc(100% - 70px);
    height: 50px;
    font-size: 18px;
    color: #fff;
    background: url(../../src/assets/images/headlineUrl.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .card_collect {
    width: calc(100% - 20px);
    height: calc(100% - 50px);
  }

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