<template>
	<div style="position:relative;">
		<div
		  :id="id"
		  :style="{
		    width: styleUtil.px2vw(width),
		    height: styleUtil.px2vh(height),
			opacity:dataList.length?1:0,
		  }"
		/>
		<div v-if="condShow==0" class="nYong-du">加载中...</div>
		<div v-if="condShow==1" class="nYong-du">暂无数据</div>
	</div>
  
</template>

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

  const props = defineProps({
    width: {
      type: Number,
      default: () => 0
    },
    height: {
      type: Number,
      default: () => 0
    },
    config: {
      type: Object,
      default: () => {
        return {}
      }
    },
    dataList: {
      type: Array,
      default: () => []
    },
    label: {
      type: String,
      default: () => ''
    },
    total: {
      type: Number,
      default: () => 0
    }
  })

  const { id, setOption,chartVal,dispose ,clearOption} = useEchart()

  
  
	let condShow = ref(0)
	let aIndex = 1
	var colorList = []
	// ['#2380fb', '#d9011b','#feae00']
  watch(
    () => props.dataList,
    (newVal) => {
		console.log(newVal,'333333')
		aIndex+=1
		
		if(aIndex>=3&&!newVal.length){
			  condShow.value = 1
		}
      if (newVal.length > 0) {
		
		  console.log(colorList.value,'colorList')
		  condShow.value = 2
        nextTick(() => {
			init()
          // defaultCofig.legend.formatter = (name) => {
          //   let percent = props.dataList.find((item) => item.name == name).value
          //   return name + '\u3000' + `${percent}%`
          // }
          // defaultCofig.series[0].data = props.dataList
          // defaultCofig.series[0].label.formatter = () => {
          //   return `{value|${props.total}}` + '\n' + `{name|${props.label}  }`
          // }
          // setOption({
          //   ...defaultCofig,
          //   ...props.config
          // })
		  
        })
      }else{
		
		 
	  }
    },
    { immediate: true }
  )
  const init = ()=>{
	  props.dataList.forEach((item,index)=>{
		  
		  if(item.name=='负面'){
			  colorList.push('#d9011b')
		  }
		  else if(item.name=='正面'){
			colorList.push('#50F0A6')  
		  }
		  else if(item.name=='中性'){
			colorList.push('#2380fb')	  
		  }
		  else{
			   colorList = ['#3BA272', '#73C0DE','#EE6666','#FAC858','#91CC75','#5470C6','#d9011b','#feae00','#50F0A6']
		  }
	  })
	  
	  var defaultCofig = {
	    color: colorList,
	    legend: {
	      orient: 'vertical',
	      x: 'center',
	      y: '80%',
		  bottom:'20%',
	      itemWidth: fitChartSize(22),
	      itemHeight: fitChartSize(22),
	      itemGap: fitChartSize(10),
	      textStyle: {
	        color: '#ffffff',
	        fontSize: fitChartSize(22)
	      }
	    },
	    series: [
	      {
	        type: 'pie',
	        center: ['50%', '30%'],
	        radius: ['40%', '55%'],
	        itemStyle: {
	          borderWidth: fitChartSize(4),
	          borderColor: '#093672'
	        },
	        label: {
	          show: true,
	          position: 'center',
	          fontWeight: 'bold',
	          formatter: () => {
	            return `{value|${props.total}}` + '\n' + `{name|${props.label}  }`
	          },
	          rich: {
	            value: {
	              color: '#fff',
	              fontSize: fitChartSize(22),
	              fontWeight: 'bold',
	              padding: [0, 0, 5, 0]
	            },
	            name: {
	              color: '#fff',
	              fontSize: fitChartSize(20)
	            }
	          }
	        },
	        labelLine: {
	          show: false
	        },
	        data: []
	      }
	    ]
	  }
	  defaultCofig.legend.formatter = (name) => {
	    let percent = props.dataList.find((item) => item.name == name).value
	    return name + '\u3000' + `${percent}%`
	  }
	  defaultCofig.series[0].data = props.dataList
	  defaultCofig.series[0].label.formatter = () => {
	    return `{value|${props.total}}` + '\n' + `{name|${props.label}  }`
	  }
	  setOption({
	    ...defaultCofig,
	    ...props.config
	  })
  }
</script>

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