<template>
  <div class="circle" :style="`background-image:url(${CircleBg})`">
    <n-progress
      class="circle-item"
      type="circle"
      :percentage="+value"
      :color="color"
      :border-radius="radius"
      :fill-border-radius="radius"
      :stroke-width="+strokeWidth"
      indicator-text-color="#fff"
      :show-indicator="showInfo"
      :rail-color="railColor"
    >
      <slot />
    </n-progress>
  </div>
</template>

<script lang="ts" setup>
import { NProgress } from 'naive-ui'
import { PropType } from 'vue'
import CircleBg from '@/assets/images/circle-bg.png'
defineProps({
  color: {
    type: [String, Array] as PropType<string | string[]>,
    default: '#F7933E',
  },
  railColor: {
    type: [String, Array] as PropType<string | string[]>,
    default: 'rgba(255,255,255,0.1)',
  },
  value: {
    type: Number as PropType<number>,
    default: 0,
  },
  radius: {
    type: Number as PropType<number>,
    default: 0,
  },
  strokeWidth: {
    type: Number as PropType<number>,
    default: 8,
  },
  showInfo: {
    type: Boolean as PropType<boolean>,
    default: true,
  },
})
</script>

<style lang="stylus" scoped>
.circle
  width 100%
  height 100%
  background-repeat no-repeat
  background-size 100% 100%
  background-position center
  padding .05rem
  box-sizing border-box
  .circle-item
    width 100%
    height 100%
</style>
