<template>
    <div ref="wrapperRef" class="progress-wrapper">
        <el-progress :percentage="100" :stroke-width="strokeWidth" :show-text="false" :striped="pipeStatus"
            :striped-flow="pipeStatus" :duration="duration" />
    </div>
</template>

<script setup>
import { ref, onMounted, computed ,nextTick} from 'vue'

const props = defineProps({
    strokeWidth: {// 进度条宽度，单位为像素
        type: Number,
        default: 8,
    },
    pipeStatus: {
        type: Boolean,
        default: false,
    },
    durationValue: {// 进度条动画时长，单位为毫秒
        type: Number,
    },
})

const wrapperRef = ref(null)
const width = ref(0)
// 获取 DOM 宽度
// onMounted(() => {
//     if (wrapperRef.value) {
//         width.value = wrapperRef.value.offsetWidth || 0
//     }
// })
onMounted(() => {
  nextTick(() => {
    if (wrapperRef.value) {
      width.value = wrapperRef.value.offsetWidth || 0
    }
  })
})


// 根据宽度计算 duration，宽度越大，速度越慢（duration 越大）
const duration = computed(() => {
    if (props.durationValue !== null && !isNaN(props.durationValue)) {
        return props.durationValue
    }
    const w = width.value == 0 ? 100 : width.value
    return Math.round(w / 10)
})
</script>
