<template>
  <div ref="circleWrapperRef" class="circle-wrapper">
    <a-progress
      :width="width"
      :stroke-color="strokeColor"
      :percent="value"
      :type="type"
      :show-info="showInfo"
      :stroke-width="strokeWidth"
      :gap-degree="gapDegree"
    />
    <slot>
      <p>{{ name }}</p>
    </slot>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType, ref } from 'vue'

export default defineComponent({
  name: 'Circle',
  props: {
    type: {
      type: String as PropType<'line' | 'circle' | 'dashboard'>,
      default: 'circle',
    },
    color: {
      type: [String, Array] as PropType<string | string[]>,
      default: ['#0094FF', '#1DF9FF'],
    },
    value: {
      type: Number as PropType<number>,
      default: 0,
    },
    name: {
      type: String as PropType<string>,
      default: '',
    },
    showInfo: {
      type: Boolean as PropType<boolean>,
      default: true,
    },
    rate: {
      type: Number as PropType<number>,
      default: 1.8,
    },
    strokeWidth: {
      type: Number as PropType<number>,
      default: 6,
    },
    gapDegree: {
      type: Number as PropType<number>,
      default: 0,
    },
  },
  setup(props) {
    const circleWrapperRef = ref<HTMLElement | null>(null)
    const strokeColor = computed(() => {
      if (Array.isArray(props.color)) {
        return {
          '0%': props.color[0],
          '100%': props.color[1],
        }
      }
      return props.color
    })
    const width = computed(() => {
      if (circleWrapperRef.value) {
        return circleWrapperRef.value.clientWidth / (props.rate || 1.8)
      }
      return 0
    })
    return {
      circleWrapperRef,
      strokeColor,
      width,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.circle-wrapper
  $full()
  $center()
  flex-direction column
  position relative
  >p
    margin-top .1rem
    font-size .12rem
    font-weight bold
</style>
