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

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

  const { id, setOption } = useEchart()

  const props = defineProps({
    width: {
      type: Number,
      default: () => 0
    },
    height: {
      type: Number,
      default: () => 0
    },
    value: {
      type: Number,
      default: () => 0
    },
    title: {
      type: [String, Number],
      default: () => ''
    },
    subTitle: {
      type: [String, Number],
      default: () => ''
    }
  })

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

  let params = null
  let defaultCofig = {
    title: [
      {
        text: props.title,
        x: 'center',
        top: '20%',
        textStyle: {
          color: '#00D0FF',
          fontSize: fitChartSize(18)
        }
      },
      {
        text: props.subTitle,
        x: 'center',
        top: '50%',
        textStyle: {
          color: '#fff',
          fontSize: fitChartSize(16)
        }
      }
    ],
    series: [
      // 内侧环
      {
        type: 'gauge',
        radius: '100%',
        center: ['50%', '50%'],
        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: props.value
          }
        ]
      },
      {
        type: 'gauge',
        radius: '90%',
        center: ['50%', '50%'],
        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: props.value
          }
        ]
      }
    ]
  }

  const init = () => {
    if (!params) {
      params = defaultCofig
    } else {
      params.title[0].text = props.title
      params.title[1].text = props.subTitle
      params.series.map((item) => {
        item.data[0].value = props.value
      })
    }
    setOption(params)
  }
</script>

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