<template>
  <div class="soil_constituent">
    <div class="echarts" ref="echarts" v-if="dataList.length > 0"></div>
    <div class="curInfo">
      <div class="percent">项目总数</div>
      <div class="name">{{ totalData }}</div>
    </div>
  </div>
</template>

<script setup>
import bus from '@/bus';
import { useDicts } from '@/hooks';
import { buildstatusCount } from '@/api/sponeScreen/gcpjApi.js';
import { nextTick } from 'vue';

const { proxy } = getCurrentInstance();
const myChart = shallowRef(null);
const totalData = ref(0);
const { build_status } = useDicts(proxy);
const dataList = ref([]);
async function getProjectStatisticsM() {
  let { data, code } = await buildstatusCount();
  data.forEach(k => {
    dataList.value.push({ name: k.typeName, value: k.number, buildStatus: k.typeCode });
  });
  data.reduce((i, k) => {
    totalData.value += k.number;
  }, 0);
  dataList.value.forEach(function (val, idx, arr) {
    total += val.value;
  });
  for (let i = 0; i < dataList.value.length; i++) {
    baseDataWrap.push(
      {
        value: dataList.value[i].value,
        name: dataList.value[i].name,
        itemStyle: {
          color: colorWrap[i],
          borderWidth: 5,
          borderColor: colorWrap[i],
          shadowBlur: 50,
          shadowColor: 'rgba(7, 132, 250, 0.8)',
        },
      },
      {
        value: 5,
        name: '',
        itemStyle: {
          color: 'transparent',
          borderWidth: 5,
          borderColor: 'transparent',
        },
        tooltip: {
          show: false,
        },
      }
    );

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

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;

const curActive = reactive({
  name: dataList.value[0]?.name,
  percent: dataList.value[0]?.value,
});
const initEcharts = () => {
  myChart.value = proxy.echarts.init(proxy.$refs.echarts);
  // 绘制图表
  myChart.value.setOption({
    grid: {
      left: '1%', // 与容器左侧的距离
      right: '5%', // 与容器右侧的距离
      top: '1%', // 与容器顶部的距离
      bottom: '1%', // 与容器底部的距离
    },
    tooltip: {
      show: true,
      trigger: 'item',
      formatter: '{b} <br/>数量：{c}',
      selected: {
        // ...
      },
    },
    legend: [
      {
        data: dataList.value,
        icon: 'vertical',
        top: 'center',
        orient: 'vertical',
        itemGap: 6,
        itemWidth: 10,
        itemHeight: 12,
        right: '8%',
        selected: {},
        formatter: function (name) {
          let target, percent;
          for (let i = 0; i < dataList.value.length; i++) {
            if (dataList.value[i].name === name) {
              target = dataList.value[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',
            },
          },
        },
      },
    ],

    series: [
      {
        name: '',
        type: 'pie',
        clockwise: false, //顺时加载
        // hoverAnimation: false, //鼠标移入变大
        center: ['30%', '50%'],
        radius: ['80%', '81%'],
        label: {
          show: false,
        },
        data: baseDataWrap,
      },
      {
        name: '',
        type: 'pie',
        color: colorPie,
        selectedMode: 'single',
        radius: ['55%', '58%'],
        center: ['30%', '50%'],
        // hoverAnimation: false,
        label: {
          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 = dataList.value[0]?.name;
    curActive.percent = dataList.value[0]?.value;
  });
  myChart.value.on('legendselectchanged', function (params) {
    let date = dataList.value.filter(i => i.name == params.name);
    bus.emit('getProjectList', date);
  });
};

onMounted(() => {
  window.addEventListener('resize', () => {
    myChart.value && myChart.value.resize();
  });
  getProjectStatisticsM();
  setTimeout(() => {
    initEcharts();
  }, 1500);
});
</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>