<template>
  <!-- 拥堵时长 -->
  <div style="position:relative;">
	  <div  class="jam" :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 > 0) {
        setTimeout(() => {
			condShow.value = 2
          init()
        }, 1000)
      }
    },
    { immediate: true }
  )

  let params = null
	
  const setSeriesData = () => {
    return props.list.map((item) => {
      return {
        name: item.name,
        value: item.duration,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(255, 112, 33, 0)'
              },
              {
                offset: 1,
                color: '#FF7021'
              }
            ]
          }
        }
      }
    })
  }
  const setScatterData = () => {
    return props.list.map((item) => {
      return {
        name: item.name,
        value: item.duration,
        itemStyle: {
          color: '#fff',
          opacity: 1
        }
      }
    })
  }
  const setYAxisData = () => {
    return props.list.map((item) => item.duration)
  }
  const init = () => {
    if (!params) {
      params = {
        backgroundColor: 'transparent',
        tooltip: {
          show: false
        },
        legend: {
          show: false
        },
        grid: {
          left: '4%',
          right: '4%',
          top: '16%',
          bottom: '4%',
          containLabel: false
        },
        xAxis: [
          {
            splitLine: {
              show: false
            },
            type: 'value',
            show: false
          }
        ],
        yAxis: [
          {
            type: 'category',
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            data: []
          },
          {
            type: 'category',
            inverse: false,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              color: '#fff',
              fontSize: fitChartSize(12),
              verticalAlign: 'bottom',
              padding: [0, 0, 6, 0],
              inside: true,
              formatter: function (value) {
                return `{value|${value}}{value|分钟}`
              },
              rich: {
                value: {
                  align: 'center',
                  color: '#fff',
                  fontWeight: 600,
                  fontSize: fitChartSize(14)
                }
              }
            },
            data: setYAxisData()
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: fitChartSize(8),
            showBackground: true,
            borderRadius: [0, 0, 0, 0],
            backgroundStyle: {
              color: 'rgba(0, 150, 255, 0.15)'
            },
            label: {
              show: true,
              offset: [10, -10],
              color: '#fff',
              fontWeight: 500,
              position: 'left',
              align: 'left',
              fontSize: fitChartSize(14),
              formatter: function (params) {
                return params.data.name
              }
            },
            data: setSeriesData()
          },
          {
            name: '外圆',
            type: 'scatter',
            emphasis: {
              scale: false
            },
            showSymbol: true,
            symbol: 'circle',
            symbolSize: fitChartSize(10),
            z: 2,
            data: setScatterData(),
            animationDelay: 500
          }
        ]
      }
    } else {
      params.series[0].data = setSeriesData()
      params.series[1].data = setScatterData()
    }
    setOption(params)
  }
</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;
	}
  .jam {
    width: vw(250);
    height: vh(160);
  }
</style>
