<template>
  <div class="soil_constituent">
    <div class="echarts" ref="echarts"></div>
    <div class="curInfo">
      <div class="percent">总类型</div>
      <div class="name">79</div>
    </div>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const myChart = shallowRef(null);
const data = [
  {
    name: '已竣工',
    value: 38,
  },
  {
    name: '已开工',
    value: 33,
  },
  {
    name: '完成施工指标',
    value: 3,
  },
  {
    name: '完成设计概算',
    value: 5,
  },
  {
    name: '项目前期',
    value: 1,
  },
  {
    name: '尚未立项',
    value: 0,
  },
];
let colorPie = [
  'rgba(235, 94, 117, 0.8)',
  'rgba(56, 117, 255, 0.8)',
  'rgba(22, 197, 229, 0.8)',
  'rgba(147, 88, 255, 0.8)',
  'rgba(57, 221, 134, 0.8)',
  'rgba(243, 255, 115, 0.8)',
  'rgba(255, 182, 67, 0.8)',
  'rgba(255, 114, 220, 0.8)',
  'rgba(255, 127, 49, 0.8)',
];
let colorWrap = [
  'rgba(235, 94, 117, 0.8)',
  'rgba(56, 117, 255, 0.8)',
  'rgba(22, 197, 229, 0.8)',
  'rgba(147, 88, 255, 0.8)',
  'rgba(57, 221, 134, 0.8)',
  'rgba(243, 255, 115, 0.8)',
  'rgba(255, 182, 67, 0.8)',
  'rgba(255, 114, 220, 0.8)',
  'rgba(255, 127, 49, 0.8)',
];
let baseDataPie = [],
  baseDataWrap = [];
let total = 0;
data.forEach(function (val, idx, arr) {
  total += val.value;
});
for (let i = 0; i < data.length; i++) {
  baseDataWrap.push(
    {
      value: data[i].value,
      name: data[i].name,
      itemStyle: {
        normal: {
          color: colorWrap[i],
          borderWidth: 5,
          borderColor: colorWrap[i],
          shadowBlur: 50,
          shadowColor: 'rgba(7, 132, 250, 0.8)',
        },
      },
    },
    {
      value: 5,
      name: '',
      itemStyle: {
        normal: {
          color: 'transparent',
          borderWidth: 5,
          borderColor: 'transparent',
        },
      },
      tooltip: {
        show: false,
      },
    }
  );

  if (i < 3) {
    baseDataPie.push({
      value: data[i].value,
      name: data[i].name,
      itemStyle: {
        normal: {
          borderWidth: 20,
          borderColor: colorPie[i],
        },
      },
    });
  }
}

const curActive = reactive({
  name: data[0].name,
  percent: data[0].value,
});
const initEcharts = () => {
  myChart.value = proxy.echarts.init(proxy.$refs.echarts);
  // 绘制图表
  myChart.value.setOption({
    // backgroundColor: "#031223",
    grid: {
      left: '1%', // 与容器左侧的距离
      right: '1%', // 与容器右侧的距离
      top: '1%', // 与容器顶部的距离
      bottom: '1%', // 与容器底部的距离
    },
    tooltip: {
      show: true,
      trigger: 'item',
      formatter: '{b} <br/>数量：{c}',
    },
    legend: [
      {
        data: data,
        icon: 'vertical',
        right: '5px',
        top: 'center',
        orient: 'vertical',
        itemGap: 20,
        itemWidth: 15,
        itemHeight: 8,
        formatter: function (name) {
          let target, percent;
          for (let i = 0; i < data.length; i++) {
            if (data[i].name === name) {
              target = data[i].value;
              percent = ((target / total) * 100).toFixed(1);
            }
          }
          let arr = [' {blue|' + name + '}', ' {yellow|' + target + '}'];
          return arr.join('');
        },
        textStyle: {
          lineHeight: 20,
          color: '#f0f4f6',
          align: 'right',
          rich: {
            yellow: {
              color: '#f0f4f6',
              fontWeight: 'bold',
            },
            blue: {
              color: '#f0f4f6',
              align: 'right',
            },
          },
        },
      },
      /* {
           data: ['检修', '抢修', '其他'],
           icon: 'vertical',
           right: '5px',
           top: 'center',
           orient: 'vertical',
           itemGap: 20,
           itemWidth: 15,
           itemHeight: 8,
           formatter: function(name) {

               let target, percent;
               for (let i = 0; i < data.length; i++) {
                   if (data[i].name === name) {
                       target = data[i].value;
                       percent = ((target / total) * 100).toFixed(1);
                   }
               }
               let arr = [percent + '% ' + ' {yellow|' + target + '}', ' {blue|' + name + '}'];
               return arr.join("\n")

           },
           textStyle: {

               lineHeight: 20,
               color: '#f0f4f6',
               align: 'right',
               rich: {
                   yellow: {
                       color: '#00b5f3'
                       fontWeight: "bold"


                   },
                   blue: {
                       color: '#4be1ff',
                       align: 'right',

                   },
               }

           },
       }*/
    ],

    series: [
      {
        name: '',
        type: 'pie',
        clockWise: false, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        center: ['30%', '50%'],
        radius: ['80%', '81%'],
        label: {
          normal: {
            show: false,
          },
        },
        data: baseDataWrap,
      },
      {
        name: '',
        type: 'pie',
        color: colorPie,
        selectedMode: 'single',
        radius: ['55%', '58%'],
        center: ['30%', '50%'],
        hoverAnimation: false,
        label: {
          normal: {
            show: false,
          },
        },
        tooltip: {
          show: false,
        },
        data: baseDataPie,
      },
    ],
  });

  myChart.value.on('mouseover', function (params) {
    curActive.name = params.data.name;
    curActive.percent = params.data.value;
  });
  myChart.value.on('mouseout', function () {
    curActive.name = data[0].name;
    curActive.percent = data[0].value;
  });
};

onMounted(() => {
  initEcharts();
  window.addEventListener('resize', () => {
    myChart.value && myChart.value.resize();
  });
});
</script>

<style lang="scss" scoped>
.soil_constituent {
  height: 100%;
  position: relative;

  .echarts {
    height: 100%;
  }

  .curInfo {
    position: absolute;
    left: 94px;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    width: 100px;

    .percent {
      // font-size: 26px;
      font-size: 18px;
      color: #fff;
    }

    .name {
      // font-size: 16px;
      font-size: 26px;
      color: #d1deee;
      padding-right: 6%;
      white-space: nowrap;
    }
  }
}
</style>