<template>
  <div class="soil_constituent">
    <div class="echarts" ref="echarts" v-if="dataDate.length > 0"></div>
    <div class="curInfo">
      <div class="percent">总类型</div>
      <div class="name">{{ allDate }}</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 allDate = ref(0)
const { build_status } = useDicts(proxy);
console.log(build_status, 333);
const dataDate = ref([])
async function getProjectStatisticsM() {
  let { data, code } = await buildstatusCount()
  data.forEach((k) => {
    dataDate.value.push({ name: k.typeName, value: k.number ,buildStatus:k.typeCode})
  })
  data.reduce((i, k) => {
    allDate.value += k.number
  }, 0)
  dataDate.value.forEach(function (val, idx, arr) {
    total += val.value;
  });
  for (let i = 0; i < dataDate.value.length; i++) {
    baseDataWrap.push(
      {
        value: dataDate.value[i].value,
        name: dataDate.value[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: dataDate.value[i].value,
        name: dataDate.value[i].name,
        itemStyle: {
          normal: {
            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: dataDate.value[0]?.name,
  percent: dataDate.value[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}',
      selected: {
        // ...
      },
    },
    legend: [
      {
        data: dataDate.value,
        icon: 'vertical',
        right: '5px',
        top: 'center',
        orient: 'vertical',
        itemGap: 16,
        itemWidth: 10,
        itemHeight: 12,
        right: '1%',
        selected: {
        },
        formatter: function (name) {
          let target, percent;
          for (let i = 0; i < dataDate.value.length; i++) {
            if (dataDate.value[i].name === name) {
              target = dataDate.value[i].value;
              percent = ((target / total) * 100).toFixed(1);
            }
          }
          let arr = [' {blue|' + name.slice(0,10)+'...' + '}', ' {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: {
          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 = dataDate.value[0]?.name;
    curActive.percent = dataDate.value[0]?.value;
  });
  myChart.value.on('legendselectchanged', function (params) {
    let date = dataDate.value.filter((i) => i.name == params.name)
    bus.emit('getProjectList',date );
  });
};

onMounted(() => {
  window.addEventListener('resize', () => {
    myChart.value && myChart.value.resize();
  });
  getProjectStatisticsM()
  setTimeout(() => {
    initEcharts();
  }, 500)

});
</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>