<template>
  <div class="w-full h-full relative">
    <el-progress
      type="circle"
      :percentage="percentage"
      :stroke-width="barWidth"
      :format="format"
      :width="width"
    />
    <img class="absolute" :style="pointStyle" src="@/assets/images/circle-point.svg" alt="" />
  </div>
</template>

<script setup lang="ts">
import { defineProps, computed } from 'vue';

const props = defineProps({
  percentage: {
    type: Number,
    default: 0,
  },
  width: {
    type: Number,
    default: 120,
  },
  height: {
    type: Number,
    default: 120,
  },
  barWidth: {
    type: Number,
    default: 12,
  },
  format: {
    type: Function,
    default: (val: number) => `${val}%`,
  },
});

// 根据百分比计算圆环上点的位置
const pointStyle = computed(() => {
  // 缩放过小会导致位置异常 使用传入大小
  const { width, height } = props;
  const { percentage, barWidth } = props;
  // 将百分比转换为角度（0-360度）
  const angle = (percentage / 100) * 360;

  // 转换为弧度（并调整0°位置到12点钟方向）
  const radians = (angle - 90) * (Math.PI / 180);

  // 中心位置
  const centerX = width / 2;
  const centerY = height / 2;
  const radius = (width - barWidth) / 2;

  // 计算坐标
  const x = centerX + radius * Math.cos(radians);
  const y = centerY + radius * Math.sin(radians);

  return {
    left: `${x - 14}px`,
    top: `${y - 14}px`,
  };
});
</script>

<style lang="less" scoped>
:deep(*) {
  .el-progress-circle__track {
    stroke: none;
    fill: #0d375f;
  }
  .el-progress-circle__path {
    stroke: url(#circleGradient);
    position: relative;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 15px;
      height: 15px;
      background: #fff;
      opacity: 0.2;
    }
  }
  .el-progress__text {
    color: #fff;
    font-size: 36px;
    font-family: URWGothic-Book, sans-serif;
  }
}
</style>
