<template>
  <el-progress
    class="def-progress"
    :percentage="progressVal"
    :color="color"
    :type="type"
    :status="status"
    :strokeLinecap="strokeLinecap"
    v-bind="$attrs"
  >
    <!--进度条内容插槽-->
    <template #default="{ percentage }">
      <!--使用作用域插槽传递数据-->
      <slot :percentage="percentage"></slot>
    </template>
  </el-progress>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

/* 类型声明 */
type TType = 'line' | 'circle' | 'dashboard'
type TStatus = 'success' | 'exception' | 'warning'
type TStrokeLinecap = 'butt' | 'round' | 'square'

/* 参数相关 */
// https://element-plus.gitee.io/zh-CN/component/progress.html#progress-属性
const props = defineProps<{
  percentage: number // 百分比，必填 0 - 100
  time?: number // 自定义动画时长（毫秒）
  color?: string // 进度条背景色 （会覆盖 status 状态颜色）
  type?: TType // 进度条类型 line/circle/dashboard
  status?: TStatus // 进度条当前状态 success/exception/warning
  strokeLinecap?: TStrokeLinecap // circle/dashboard类型路径两端的形状 butt/round/square
}>()

/* 数据处理 */
const progressVal = ref<number>(0)
const progressDuration = ref(props.time || 1500)
const setProgressVal = () => {
  // 加载动画
  if (progressDuration.value) {
    const delay = progressDuration.value / +props.percentage
    const timer = window.setInterval(() => {
      progressVal.value += 1
      if (progressVal.value >= props.percentage) {
        progressVal.value = +props.percentage
        window.clearInterval(timer)
      }
    }, delay)
    return
  }
  progressVal.value = +props.percentage
}
setProgressVal()
</script>

<style scoped lang="scss">
.def-progress {
}
</style>
