<template>
  <!-- 景区停车场空位 -->
  <div class="vacancy" :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) => {
      if (val.length > 0) {
        setTimeout(() => {
          init()
        }, 1000)
      }
    },
    { immediate: true }
  )

  let params = null

  const getSeriesData = () => {
    return props.list.map((item) => {
      return {
        ...item,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(255, 112, 33, 0)'
              },
              {
                offset: 1,
                color: '#00CCFF'
              }
            ]
          }
        }
      }
    })
  }
  const getScatterData = () => {
    return props.list.map((item) => {
      return {
        ...item,
        itemStyle: {
          color: '#fff',
          opacity: 1
        }
      }
    })
  }
  const getYAxisData = () => {
    return props.list.map((item) => item.value)
  }
  const init = () => {
    if (!params) {
      params = {
        backgroundColor: 'transparent',
        tooltip: {
          show: false
        },
        legend: {
          show: false
        },
        grid: {
          left: '4%',
          right: '4%',
          top: '16%',
          bottom: '-10%',
          containLabel: true
        },
        xAxis: [
          {
            splitLine: {
              show: false
            },
            type: 'value',
            show: false
          }
        ],
        yAxis: [
          {
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            type: 'category',
            axisTick: {
              show: false
            },
            data: [],
            axisLabel: {
              show: false
            }
          },
          {
            type: 'category',
            inverse: false,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              textStyle: {
                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: getYAxisData()
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: fitChartSize(8),
            showBackground: true,
            barBorderRadius: [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: getSeriesData()
          },
          {
            name: '外圆',
            type: 'scatter',
            emphasis: {
              scale: false
            },
            showSymbol: true,
            symbol: 'circle',
            symbolSize: fitChartSize(10),
            z: 2,
            animationDelay: 500,
            data: getScatterData()
          }
        ]
      }
    } else {
      params.yAxis[1].data = getYAxisData()
      params.series[0].data = getSeriesData()
      params.series[1].data = getScatterData()
    }
    setOption(params)
  }
</script>

<style scoped lang="scss">
  .vacancy {
    width: vw(250);
    height: vh(160);
  }
</style>
