<template>
  
  <div style="position: relative;">
  	<div class="spotRate" :id="id" />
  	<div v-if="condShow==0" class="nYong-du">加载中...</div>
  	<div v-if="condShow==1" class="nYong-du">暂无数据</div>
  </div>
</template>

<script setup>
  import { fitChartSize } from '@/utils/dataUtil'
  import { useEchart } from '@/hooks/echart'

  const props = defineProps({
    config: {
      type: Object,
      default: () => {
        return {}
      }
    },
    dataList: {
      type: Array,
      default: () => []
    },
    total: {
      type: [Number, String],
      default: () => 0
    },
    label: {
      type: String,
      default: () => ''
    },
    colors: {
      type: Array,
      default: () => ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
    }
  })

  const { id, setOption } = useEchart()

  let params = null
  let condShow = ref(0)
  let aIndex = 1
  var defaultCofig = {
    color: [],
    series: [
      {
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['60%', '80%'],
        itemStyle: {
          borderWidth: fitChartSize(4),
          borderColor: '#093672'
        },
        label: {
          show: true,
          position: 'center',
          fontWeight: 'bold',
          rich: {
            value: {
              color: '#fff',
              fontSize: fitChartSize(20),
              fontWeight: 'bold',
              padding: [0, 0, 5, 0]
            },
            name: {
              color: '#fff',
              fontSize: fitChartSize(12)
            }
          }
        },
        labelLine: {
          show: false
        },
        data: []
      }
    ]
  }

  watch(
    () => props.dataList,
    (newVal) => {
		aIndex+=1
		console.log(aIndex,'aIndex')
		if(aIndex>=3&&!newVal.length){
		   condShow.value = 1
		}
      if (newVal.length > 0) {
		  condShow.value = 2
        nextTick(() => {
          if (!params) {
            defaultCofig.color = props.colors
            defaultCofig.series[0].data = props.dataList
            defaultCofig.series[0].label.formatter = () => {
              return `{value|${props.total}}` + '\n' + `{name|${props.label}}`
            }
            params = {
              ...defaultCofig,
              ...props.config
            }
          } else {
          }
          setOption(params)
        })
      }
    },
    { immediate: true }
  )

  const init = () => {}
</script>

<style scoped lang="scss">
	.nYong-du{
		position:absolute;
		left:0;
		top:0;
		width: 100%;
		height: 100%;
		font-size:vw(18);
		color:#999;
		display: flex;
		align-items: center;
		justify-content: center;
	}
  .spotRate {
    width: vw(200);
    height: vh(200);
  }
</style>
