<!-- 车源地 -->
<template>
  <div class="vehicle-source" :id="id" />
</template>

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

  const { id, setOption } = useEchart()

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

  watch(
    () => props.list,
    (val) => {
		console.log(val,'llllllllllllllll')
      if (val.length > 0) {
        setTimeout(() => {
          init()
        }, 1000)
      }
    },
    { immediate: true }
  )

  let params = null

  const getSeriesData = () => {
    return props.list.map((item) => item.value)
  }
  const getXAxisData = () => {
    return props.list.map((item) => item.name)
  }
  const init = () => {
    if (!params) {
      params = {
        grid: {
          left: '4%',
          right: '4%',
          top: '10%',
          bottom: '10%',
          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: [
          {
            data: getSeriesData(),
            type: 'bar',
            showBackground: true,
            barWidth: fitChartSize(8),
            label: {
              show: true,
              position: 'top',
              color: '#fff',
              fontSize: fitChartSize(10)
            },
            itemStyle: {
              borderRadius: [0, 0, 0, 0],
              color: {
                type: 'linear',
                x: 0,
                y: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(0, 208, 255, 0)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(0, 208, 255, 1)'
                  }
                ]
              }
            },
            backgroundStyle: {
              color: 'rgba(0, 150, 255, 0.15)'
            }
          }
        ]
      }
    } else {
      params.xAxis.data = getXAxisData()
      params.series[0].data = getSeriesData()
    }
    setOption(params)
  }
</script>

<style scoped lang="scss">
  .vehicle-source {
    width:vw(310);
    height: vh(160);
  }
</style>
