<template>
  <div>
    <div ref="assetEchart" class="asset_echart"></div>
  </div>
</template>
<script setup>
import { init } from 'echarts';
import 'echarts-liquidfill/src/liquidFill.js';
import { reactive, toRefs, ref, onMounted, watchEffect } from 'vue';
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: '1%',
        y: '50%',
        textStyle: {
          fontSize: 14,
          fontWeight: '100',
          color: '#fff',
          lineHeight: 16,
          textAlign: 'center',
        },
      },
      {
        text: xData[1]?.itemContent,
        x: '55%',
        y: '50%',
        textStyle: {
          fontSize: 14,
          fontWeight: '100',
          color: '#fff',
          lineHeight: 16,
          textAlign: 'center',
        },
      },
    ],
    series: [
      {
        type: 'liquidFill',
        radius: '47%',
        center: ['18%', '25%'],
        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: '#011430  ',
        },
        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: ['70%', '25%'],
        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: '#011430',
        },
        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',
          },
        },
      },
    ],
  });
};
function chartSize(container, charts) {
  function getStyle(el, name) {
    if (window.getComputedStyle) {
      return window.getComputedStyle(el, null);
    } else {
      return el.currentStyle;
    }
  }
  const hi = getStyle(container, 'height').height;
  charts.style.height = hi;
}
watchEffect(() => {});
onMounted(() => {
  setTimeout(() => {
    initM();
  }, 100);
});
</script>

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