<!-- @format -->

<script>
  import { defineComponent } from 'vue';
  import BaseBar from './BasePie.vue';

  export default defineComponent({
    name: 'PieLabelLineAlign',
    extends: BaseBar,
    props: {
      series: {
        type: Array,
        required: true,
      },
      borderColor: {
        type: String,
        required: true,
      },
      colorDatas: {
        type: Array,
        default: () => {
          return [
            '#15B0A7',
            '#2193D3',
            '#2D71D8',
            '#10AAB4',
            '#1AA5E1',
            '#15B0A7',
            '#1AA5E1',
            '#30BB78',
            '#04C19F',
            '#37B2E7',
            '#397ADC',
          ];
        },
      },
    },
    data() {
      return {};
    },
    computed: {},
    created() {},
    mounted() {
      let optionData = this.optionHandle();

      this.setOption(optionData);
      this.renderChart();
    },
    methods: {
      optionHandle() {
        let clientWidth = parseInt(this.$refs.BasePieRef.clientWidth);
        let colorDatas = this.colorDatas;
        let colorLen = colorDatas.length;
        let borderColor = this.borderColor;
        let { name: titleName, data: seriesDatas, total } = this.series[0];
        let option = {
          animationDuration: 300,
          animationEasing: 'linear',
          textStyle: {
            color: '#fff',
            fontFamily: 'Microsoft YaHei',
          },
          graphic: {
            elements: [
              {
                type: 'text',
                left: 'center',
                top: '44%',
                z: 5,
                style: {
                  text: titleName,
                  textAlign: 'center',
                  font: '400 0.563em "Microsoft YaHei"',
                  fill: '#EBF9FF',
                  width: 30,
                  height: 30,
                },
              },
              {
                type: 'text',
                left: 'center',
                top: '49%',
                z: 5,
                style: {
                  text: total,
                  textAlign: 'center',
                  font: '500 1.8125em "Microsoft YaHei"',
                  fill: '#E1F5FE',
                  width: 30,
                  height: 30,
                },
              },
            ],
          },
          series: [
            {
              name: titleName,
              type: 'pie',
              radius: ['35%', '50%'],
              itemStyle: {
                borderColor: borderColor,
                borderWidth: 2,
                color: function (params) {
                  var idx = params.dataIndex;

                  return colorDatas[idx % colorLen];
                  // debugger;
                },
              },
              textStyle: { fontSize: '12', fontFamily: 'Microsoft YaHei' },
              data: seriesDatas.map((item, index) => {
                item.label = {
                  color: colorDatas[index % colorLen],
                };
                return item;
              }),
              label: {
                show: true,
                alignTo: 'labelLine',
                minMargin: 8,
                edgeDistance: 20,
                lineHeight: 15,
                // 这里定义了文本 百分比 是'value'样式的
                formatter: '{value|{b}}  {c}  {d}%',
                rich: {
                  // 这个'value'样式表示文字颜色为白色
                  value: {
                    fontSize: 11,
                    color: '#EFFFFF',
                    opacity: 0.65,
                  },
                },
                // color:function (params){
                //    var idx = params.dataIndex;

                //    return colorDatas[idx%colorLen];
                //     // debugger;
                // },
                // formatter: function(val){
                //     debugger;
                //  let data = val.data;
                //  let rStr = "";
                //  let index = -1;
                //  for(let key in data){
                //      index += 1;
                //      let m = 'mark'+index;
                //      rStr += data[key]+"-";//`{${m}|${data[key]}}`
                //  }
                //  return rStr;
                // },
                // rich: {
                //     mark0:{
                //         fontSize: 11,
                //         color:'#EFFFFF',
                //         opacity:0.65
                //     }
                //     ,
                //     mark1:{
                //         padding: [0,0,0,8],
                //         color:'#397ADC',
                //         opacity:0.65
                //     },
                //     mark2:{
                //         padding: [0,0,0,8],
                //         color:'#397ADC',
                //         opacity:0.65
                //     }
                // }
              },
              labelLine: {
                show: true,
                lineStyle: { color: '#FFFFFF', opacity: 0.35 },
                length: 10,
                length2: 2,
                maxSurfaceAngle: 60,
              },
              labelLayout: function (params) {
                const isLeft = params.labelRect.x < clientWidth / 2;
                const points = params.labelLinePoints;
                params.labelRect.y = params.labelRect.y - 7;
                points[2][0] = isLeft
                  ? params.labelRect.x
                  : params.labelRect.x + params.labelRect.width;
                return {
                  dy: -8,
                  labelLinePoints: points,
                };
              },
            },
            {
              name: 'bg',
              type: 'pie',
              radius: '30%',
              showEmptyCircle: true,
              emptyCircleStyle: {
                color: '#00667C',
                opacity: 0.3,
              },
            },
            {
              name: 'bg2',
              type: 'pie',
              radius: '25%',
              showEmptyCircle: true,
              emptyCircleStyle: {
                color: '#027D98',
                borderWidth: 1,
                shadowColor: 'rgba(2, 125, 152, 1)',
                shadowBlur: 2,
                opacity: 0.4,
              },
            },
          ],
        };
        return option;
      },
    },
  });
</script>
