<!-- 景区承载量 -->
<template>
  <div class="gauge" :id="id" />
</template>

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

  const props = defineProps({
    value: {
      type: Number,
      default: () => 0
    },
    colors: {
      type: Array,
      default: () => ['#02F9FA', '#0063FF']
    }
  })

  const { id, setOption } = useEchart()

  let params = null

  watch(
    () => props.value,
    (val) => {
      setTimeout(() => {
        init()
      }, 1000)
    },
    { immediate: true }
  )

  const init = () => {
    if (!params) {
      params = {
        series: [
          {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            radius: '120%',
            splitNumber: 10,
            center: ['50%', '60%'],
            itemStyle: {
              color: {
                type: 'linear',
                x: 1,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: props.value > 50 ? '#FFCBB9' : '#02F9FA'
                  },
                  {
                    offset: 1,
                    color: props.value > 50 ? '#FF4603' : '#0063FF'
                  }
                ],
                global: false
              }
              // shadowColor: 'red',
              // shadowBlur: 10,
              // shadowOffsetX: 2,
              // shadowOffsetY: 2
            },
            progress: {
              show: true,
              roundCap: false,
              width: fitChartSize(6)
            },
            axisLine: {
              roundCap: false,
              lineStyle: {
                width: fitChartSize(6)
              }
            },
            pointer: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            detail: {
              width: '100%',
              offsetCenter: [0, '20%'],
              valueAnimation: true,
              formatter: function (value) {
                return '{value|' + value + '}{unit|%}'
              },
              rich: {
                value: {
                  fontSize: fitChartSize(14),
                  fontWeight: 'bolder',
                  color: '#02F9FA'
                },
                unit: {
                  fontSize: fitChartSize(14),
                  color: '#02F9FA'
                }
              }
            },
            data: [
              {
                value: props.value
              }
            ]
          }
        ]
      }
    } else {
      params.series[0].data[0].value = props.value
    }
    setOption(params)
  }
</script>

<style lang="scss" scoped>
  .gauge {
    width: vw(120);
    height: vh(50);
  }
</style>
