<template>
  <div>
    <div ref="assetEchart" class="asset_echart"></div>
  </div>
</template>
<script setup>
import { init } from 'echarts';
import 'echarts-liquidfill/src/liquidFill.js';
const assetEchart = ref(null);
let {
  data: { xData },
} = defineProps(['data']);
const all = xData?.reduce((n, v) => {
  return n + v.itemScore;
}, 0);
console.log('xDataxData', xData);
const initM = () => {
  const chart = init(assetEchart.value);
  window.addEventListener('resize', () => {
    chart.resize();
  });
  chart.setOption({
    title: [
      {
        text: xData[0]?.itemContent,
        x: '5%',
        y: '69%',
        textStyle: {
          fontSize: 14,
          fontWeight: '100',
          color: '#fff',
          lineHeight: 16,
          textAlign: 'center',
        },
      },
      {
        text: xData[1]?.itemContent,
        x: '51%',
        y: '69%',
        textStyle: {
          fontSize: 14,
          fontWeight: '100',
          color: '#fff',
          lineHeight: 16,
          textAlign: 'center',
        },
      },
    ],
    series: [
      {
        type: 'liquidFill',
        radius: '47%',
        center: ['25%', '45%'],
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#1FD774  ',
              },
              {
                offset: 1,
                color: '#1FD774 ',
              },
            ],
            globalCoord: false,
          },
        ],
        data: [xData[0]?.realScore], // data个数代表波浪数
        backgroundStyle: {
          borderWidth: 1,
          color: '#fff  ',
        },
        label: {
          normal: {
            textStyle: {
              fontSize: 14,
              color: '#43C6F5',
            },
            formatter: function (param) {
              return xData[0]?.standardFlag == 1 ? '已完成' : '未完成' + '\n' + '总数' + (xData[0]?.itemScore || 0);
            },
          },
        },
        outline: {
          // show: false
          borderDistance: 0,
          itemStyle: {
            borderWidth: 2,
            borderColor: '#43C6F5',
          },
        },
      },
      // {
      //   //第二个球的填充
      //   type: 'liquidFill',
      //   radius: '47%',
      //   center: ['75%', '45%'],
      //   color: [
      //     {
      //       type: 'linear',
      //       x: 0,
      //       y: 0,
      //       x2: 0,
      //       y2: 1,
      //       colorStops: [
      //         {
      //           offset: 0,
      //           color: '#08bbc9',
      //         },
      //         {
      //           offset: 1,
      //           color: '#08bbc9',
      //         },
      //       ],
      //       globalCoord: false,
      //     },
      //   ],
      //   data: [xData[1]?.standardFlag == 1 ? 1 : 0], // data个数代表波浪数
      //   //   data: [xData[1]?.realValue/xData[1]?.itemScore], // data个数代表波浪数
      //   backgroundStyle: {
      //     borderWidth: 1,
      //     color: '#fff',
      //   },
      //   label: {
      //     normal: {
      //       textStyle: {
      //         fontSize: 14,
      //         color: '#08bbc9',
      //       },
      //       formatter: function (param) {
      //         return (param.value * 100 || 0) + '%' + '\n' + '总数' + (xData[1]?.itemScore || 0);
      //       },
      //     },
      //   },
      //   outline: {
      //     // show: false
      //     borderDistance: 0,
      //     itemStyle: {
      //       borderWidth: 2,
      //       borderColor: '#42D4F4',
      //     },
      //   },
      // },
    ],
  });
};

onMounted(() => {
  setTimeout(() => {
    initM();
  }, 100);
});
</script>

<style lang="scss" scoped>
.asset_echart {
  width: 400px;
  height: 240px;
  // margin: 10px 14px 0 16px;
  &_echart {
    width: 100%;
    height: 100%;
  }
}
</style>