<!-- 客源地分析TOP5 -->
<template>

  <div style="position:relative;">
  	<div
  	  :id="id"
  	  :style="{
  	    width: styleUtil.px2vw(width),
  	    height: styleUtil.px2vh(height),
		opacity:list.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'

  let props = defineProps({
    list: {
      type: Array,
      default: () => []
    },
    width: {
      type: Number,
      default: () => 0
    },
    height: {
      type: Number,
      default: () => 0
    }
  })

  const { id, setOption } = useEchart()
  let params = null
	let condShow = ref(0)
	let aIndex = 1
  watch(
    () => props.list,
    (val) => {
		aIndex+=1
		if(aIndex>=3&&!val.length){
			  condShow.value = 1
		}
	   if (val.length > 0) {
		   condShow.value = 2
		   setTimeout(() => {
			 init()
		   }, 1000)
	   }

    },
    {
      immediate: true
    }
  )
  const getYAxisData = () => {
    return props.list.map((item) => Number(item.value))
  }
  const getSeriesData = () => {
    return props.list.map((item) => {
      return {
        name: item.name,
        value: Number(item.value),
        itemStyle: {
          borderRadius: [0, 0, 0, 0],
          color: parseFloat(item.value) > 50 ? '#FF7021' : '#00CCFF'
        }
      }
    })
  }
  const init = () => {
    if (!params) {
      params = {
        backgroundColor: 'transparent',
        tooltip: {
          show: false
        },
        legend: {
          show: false
        },
        grid: {
          left: '4%',
          right: '4%',
          top: '4%',
          bottom: '-4%',
          containLabel: false
        },
        xAxis: [{ max: 100, show: false }],
        yAxis: [
          {
            type: 'category',
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            }
          },
          {
            type: 'category',
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              color: '#fff',
              fontSize: fitChartSize(18),
              verticalAlign: 'bottom',
              padding: [0, -fitChartSize(10), fitChartSize(10), 0],
              inside: true,
              formatter: function (value) {
                return `{value|${value}}%`
              },
              rich: {
                value: {
                  align: 'center',
                  color: '#fff',
                  fontSize: fitChartSize(14)
                }
              }
            },
            data: getYAxisData()
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: fitChartSize(12),
            showBackground: true,
            borderRadius: [0, 0, 0, 0],
            backgroundStyle: {
              color: 'rgba(0, 150, 255, 0.15)'
            },
            label: {
              show: true,
              offset: [fitChartSize(12), -fitChartSize(20)],
              color: '#D3E5FF',
              fontWeight: 500,
              position: 'left',
              align: 'left',
              fontSize: fitChartSize(14),
              formatter: function (params) {
                return params.data.name ?? '其他'
              }
            },
            data: getSeriesData()
          }
        ]
      }
    } else {
      params.yAxis[1].data = getYAxisData()
      params.series[0].data = getSeriesData()
    }
    setOption(params)
  }

  watch(
    () => props.list,
    (val) => {
      if (val.length > 0) {
        setTimeout(() => {
          init()
        }, 1000)
      }
    },
    {
      immediate: true
    }
  )
</script>

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