<template>
  <div class="echarts-container">
    <div class="main" ref="main"></div>
    <div class="percent-text" :style="{top: type ? '36%' : '36%'}">
      <p v-if="type">{{ title }}</p>
      <span v-if="type">{{ percent }}%</span>
      <span v-if="!type">{{ percent.toFixed(0) }}%</span>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  color: {
    type: Array,
    default: ['rgba(0, 138, 255, 1)', 'rgba(24, 254, 254, 1)']
  }, 
  title: {
    type: String,
    default: '本月良好占比'
  }, 
  percent: {
    type: Number,
    default: 72.32
  },
  type: {
    type: Boolean,
    default: true
  },
});
watch(props, () =>{
  initChart()
},{deep:true, immediate: false})
const { proxy } = getCurrentInstance();
const myChart = shallowRef(null)
const main = ref(null)
const initChart = () => {
  if (myChart.value != null && myChart.value != "" && myChart.value != undefined) {
    myChart.value.dispose();//销毁
  }
  myChart.value = proxy.echarts.init(main.value);
  const dashed = []
  for(let i = 0; i <= 100; i += 2){
    dashed.push({value: 1, itemStyle:{color:'rgba(0, 0, 0, 0)'}}, {value: 1, itemStyle:{color:'rgba(0, 138, 255, 0.4)'}})
  }
  let option = {
    series: [
      {
        type: 'pie',
        radius: props.type ? ['75%', '90%'] : ['90%', '100%'],
        avoidLabelOverlap: false,
        label: { show: false },
        emphasis: {
          disabled: false,
          scale: false,
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 100 - props.percent, itemStyle: {color:'rgba(0, 138, 255, 0.2)'} },
          { value: props.percent, itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: props.color[0] // 0% 处的颜色
              }, {
                offset: 1, color: props.color[1],  // 100% 处的颜色
              }],
              global: false
            }
          }},
        ]
      }
    ]
  }
  if (props.type) {
    option.series.push({
      type: 'pie',
      radius: ['98%', '100%'],
      avoidLabelOverlap: false,
      label: { show: false },
      emphasis: {
        disabled: false,
        scale: false,
      },
      labelLine: { show: false },
      data: dashed
    })
  }else{
    option.series.push({
      type: 'pie',
      radius: props.type ? ['50%', '74%'] : ['65%', '89%'],
      avoidLabelOverlap: false,
      label: { show: false },
      emphasis: {
        disabled: false,
        scale: false,
      },
      labelLine: { show: false },
      data: [
        { value: 100 - props.percent, itemStyle: {color:'rgba(0, 0, 0, 0)'} },
        { value: props.percent, itemStyle: { color: 'rgba(255,255,255,0.1)' }},
      ]
    })
  }
  myChart.value.setOption(option);
}

nextTick(()=>{
  initChart()
  window.addEventListener('resize',() => {
    myChart.value.resize()
  })
});
</script>

<style lang="scss" scoped>
.echarts-container{
  width: 100%;
  height: 100%;
  position: relative;
  .main{
    width: 100%;
    height: 100%;
  }
  .percent-text{
    width: 100%;
    position: absolute;
    top: 36%;
    text-align: center;
    >p{
      margin: 0;
      font-size: w(12);
    }
    >span{
      font-size: w(16);
      line-height: h(24);
      font-family: pmzd;
      color: #fff;
    }
  }
}
</style>