<template>
  <div class="pie" :id="id" />
</template>

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

  const { id, setOption } = useEchart()

  let props = defineProps({
    value: {
      type: Number,
      default: () => 0
    },
    label: {
      type: String,
      default: () => ''
    }
  })
  watch(
    () => props.value,
    (val) => {
      if (val) {
        nextTick(() => {
          init()
        })
      }
    },
    { immediate: true }
  )

  let params = null

  const init = () => {
    if (!params) {
      params = {
        backgroundColor: 'transparent',
        title: [
          {
            text: `${(props.value * 100).toFixed(2)}%`,
            x: 'center',
            top: '40%',
            textStyle: {
              color: '#02F9FA',
              fontSize: fitChartSize(24)
            }
          },
          {
            text: props.label,
            x: 'center',
            top: '56%',
            textStyle: {
              color: '#fff',
              fontSize: fitChartSize(12)
            }
          }
        ],
        series: [
          {
            type: 'gauge',
            radius: '100%',
            center: ['50%', '50%'],
            min: 0,
            max: 1,
            startAngle: 90,
            endAngle: 450,
            clockwise: false,
            itemStyle: {
              color: '#00D0FF'
            },
            axisLine: {
              show: true,
              roundCap: false,
              lineStyle: {
                color: [
                  [0, '#075199'],
                  [1, '#075199']
                ],
                width: fitChartSize(6)
              }
            },
            progress: {
              show: true,
              roundCap: false,
              width: fitChartSize(6)
            },
            pointer: {
              // 指针
              show: false
            },
            axisTick: {
              // 刻度
              show: false
            },
            splitLine: {
              // 分割线
              show: false
            },
            axisLabel: {
              // 刻度标签
              show: false
            },
            detail: {
              // 仪表盘详情
              show: false
            },
            data: [
              {
                value: props.value
              }
            ]
          },
          {
            type: 'gauge',
            radius: '95%',
            center: ['50%', '50%'],
            min: 0,
            max: 1,
            startAngle: 90,
            endAngle: 450,
            clockwise: false,
            itemStyle: {
              color: '#057EB9'
            },
            axisLine: {
              roundCap: false,
              lineStyle: {
                color: [
                  [0, '#075199'],
                  [1, '#075199']
                ],
                width: fitChartSize(10)
              }
            },
            progress: {
              show: true,
              roundCap: false,
              width: fitChartSize(10)
            },
            pointer: {
              // 指针
              show: false
            },
            axisTick: {
              // 刻度
              show: false
            },
            splitLine: {
              // 分割线
              show: false
            },
            axisLabel: {
              // 刻度标签
              show: false
            },
            detail: {
              // 仪表盘详情
              show: false
            },
            data: [
              {
                value: props.value
              }
            ]
          }
        ]
      }
    } else {
      params.series[0].data[0].value = props.value
    }
    setOption(params)
  }
</script>

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