<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);
const props = defineProps({
  data: {
    type: Array,
  },
});
props.data.xData.reduce((n, v) => {
  return n + v.itemScore;
}, 0);
const initM = () => {
  const chart = init(assetEchart.value);
  window.addEventListener('resize', () => {
    chart.resize();
  });
  chart.setOption({
    title: [
      {
        text: props.data.xData[0]?.itemContent,
        x: '10%',
        y: '79%',
        textStyle: {
          fontSize: 14,
          fontWeight: '100',
          color: '#fff',
          lineHeight: 16,
          textAlign: 'center',
        },
      },
      {
        text: props.data.xData[1]?.itemContent,
        x: '61%',
        y: '79%',
        textStyle: {
          fontSize: 14,
          fontWeight: '100',
          color: '#fff',
          lineHeight: 16,
          textAlign: 'center',
        },
      },
    ],
    series: [
      {
        type: 'liquidFill',
        radius: '57%',
        center: ['25%', '45%'],
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#0e3f6a  ',
                opacity: '0.6',
              },
              {
                offset: 1,
                color: '#2ecefc ',
                opacity: '0.9',
              },
            ],
            globalCoord: true,
          },
        ],
        data: [props.data.xData[0]?.realScore], // data个数代表波浪数
        backgroundStyle: {
          borderWidth: 1,
          color: '#1e5187',
          opacity: '0.3',
        },
        label: {
          textStyle: {
            fontSize: 14,
            color: '#0f406a',
          },
          formatter: function (param) {
            return props.data.xData[0]?.standardFlag == 1 ? '已完成' : '未完成' + '\n' + '总数' + (props.data.xData[0]?.itemScore || 0);
          },
        },
        outline: {
          borderDistance: 12,
          itemStyle: {
            borderWidth: 7,
            borderColor: '#3077a7',
            opacity: '0.9',
          },
        },
      },
      {
        //第二个球的填充
        type: 'liquidFill',
        radius: '57%',
        center: ['80%', '45%'],
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#0e3f6a',
                opacity: '0.6',
              },
              {
                offset: 1,
                color: '#2ecefc',
                opacity: '0.9',
              },
            ],
            globalCoord: false,
          },
        ],
        data: [props.data.xData[1]?.standardFlag == 1 ? 1 : 0], // data个数代表波浪数
        //   data: [props.data[1]?.realValue/props.data[1]?.itemScore], // data个数代表波浪数
        backgroundStyle: {
          borderWidth: 1,
          color: '#1e5187',
          opacity: '0.3',
        },
        label: {
          textStyle: {
            fontSize: 14,
            color: '#fff',
          },
          formatter: function (param) {
            return (param.value * 100 || 0) + '%' + '\n' + '总数' + (props.data.xData[1]?.itemScore || 0);
          },
        },
        outline: {
          // show: false
          borderDistance: 12,
          itemStyle: {
            borderWidth: 7,
            borderColor: '#3077a7',
            opacity: '0.9',
          },
        },
      },
    ],
  });
};

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

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