<template>
  <div
    class="gauge"
    :id="id"
    :style="{
      width: styleUtil.px2vw(width),
      height: styleUtil.px2vh(height)
    }"
  />
</template>

<script setup>
  import * as echarts from 'echarts'
  import { guid } from '@/utils/util'
  import styleUtil from '@/utils/styleUtil'
  import { fitChartSize } from '@/utils/dataUtil'

  const props = defineProps({
    width: {
      type: Number,
      default: () => 0
    },
    height: {
      type: Number,
      default: () => 0
    }
  })
  let gaugeChart = null
  let id = ref(guid())
  let defaultCofig = {
    title: [
      {
        text: '45.5%',
        x: 'center',
        top: '34%',
        textStyle: {
          color: '#00D0FF',
          fontSize: fitChartSize(12)
        }
      },
      {
        text: '完成率',
        x: 'center',
        top: '56%',
        textStyle: {
          color: '#fff',
          fontSize: fitChartSize(12)
        }
      }
    ],
    series: [
      // 内侧环
      {
        type: 'gauge',
        radius: '100%',
        center: ['50%', '60%'],
        min: 0,
        max: 100,
        startAngle: 180,
        endAngle: 0,
        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: 50
          }
        ]
      },
      {
        type: 'gauge',
        radius: '90%',
        center: ['50%', '60%'],
        min: 0,
        max: 100,
        startAngle: 180,
        endAngle: 0,
        itemStyle: {
          color: '#057EB9'
        },
        axisLine: {
          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: 50
          }
        ]
      }
    ]
  }

  onMounted(() => {
    init()
  })
  const init = () => {
    // 基于准备好的dom，初始化echarts实例
    gaugeChart = echarts.init(document.getElementById(id.value))
    gaugeChart.setOption({ ...defaultCofig })
    window.addEventListener('resize', resize)
  }
  const resize = () => {
    if (gaugeChart) {
      gaugeChart.dispose()
      init()
    }
  }
</script>

<style lang="scss" scoped></style>
