<!-- 交通负载 -->
<template>
  
  <div style="position: relative;">
  	<div class="traffic-flow" :style="{
			opacity:list.length?1:0,
		}" :id="id" />
  	<div v-if="condShow==0" class="nYong-du">加载中...</div>
  	<div v-if="condShow==1" class="nYong-du">{{text}}</div>
  </div>
</template>

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

  const { id, setOption } = useEchart()

  let props = defineProps({
    list: {
      type: Array,
      default: () => []
    },
	text:{
		type: String,
		default: '暂无数据'
	}
  })
  let condShow = ref(0)
  let aIndex = 1
  watch(
    () => props.list,
    (val) => {
		aIndex+=1
		if(aIndex>=3&&!val.length){
		   condShow.value = 1
		}
      if (val.length) {
        setTimeout(() => {
			condShow.value = 2
          init()
        }, 1000)
      }
    },
    {
      immediate: true
    }
  )
  let params = null

  const getXAxisData = () => {
    return props.list.map((item) => item.name)
  }
  const getSeriesData = () => {
    return props.list.map((item) => item.value)
  }
  const init = () => {
    if (!params) {
      params = {
        grid: {
          left: '4%',
          right: '4%',
          top: '10%',
          bottom: '4%',
          containLabel: true
        },
        xAxis: {
          boundaryGap: true,
          type: 'category',
          data: getXAxisData(),
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(5, 72, 134, 1)'
            }
          },
          axisLabel: {
            fontSize: fitChartSize(12),
            color: 'rgba(255,255,255,0.9)'
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            fontSize: fitChartSize(12),
            color: 'rgba(255,255,255,0.9)'
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: 'rgba(0, 150, 255,0.4)',
              type: 'dashed'
            }
          }
        },
        series: [
          {
            type: 'bar',
            showBackground: true,
            barWidth: fitChartSize(16),
            label: {
              show: true,
              position: 'top',
              color: '#fff',
              fontSize: fitChartSize(10)
            },
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(0, 99, 255, 1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(2, 249, 250, 1)'
                  }
                ]
              }
            },
            backgroundStyle: {
              color: 'rgba(0, 150, 255, 0.15)'
            },
            data: getSeriesData()
          }
        ]
      }
    } else {
      params.xAxis.data = getXAxisData()
      params.series[0].data = getSeriesData()
    }
    setOption(params)
  }

  onMounted(() => {
    init()
  })
</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;
	}
  .traffic-flow {
    width: vw(260);
    height: vh(300);
  }
</style>
