<template>
  <div :style="barWrapperStyle" class="progress-bar-wrapper">
    <div :style="barStyle" class="progress-bar"></div>
  </div>
</template>

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

// 定义 Props 类型
interface ProgressBarProps {
  value: number;
  max: number;
  color?: string;
  grayLevelColor?: string;
  height?: string;
  direction?: 'left' | 'right';
  innerRadius?: boolean;
  borderRadius?: string;
}

// 接收 Props
const props = withDefaults(defineProps<ProgressBarProps>(), {
    value: 20,
    max: 100,
    color: "#24de73",
    grayLevelColor: "#f5f5f5",
    direction: "left",
    height: "6px",
    innerRadius: true,
    borderRadius: '3px'
});

// 计算进度百分比
const progress = computed(() => (props.value / props.max) * 100);

// 进度条外层样式，支持根据方向自定义
const barWrapperStyle = computed(() => ({
  overflow: "hidden",
  height: props.height,
  borderRadius: props.borderRadius,
  backgroundColor: props.grayLevelColor, // 背景颜色
  justifyContent: props.direction === 'left' ? 'flex-start' : 'flex-end'
}));

// 进度条样式
const barStyle = computed(() => ({
  width: `${progress.value}%`,
  backgroundColor: props.color,
  borderRadius: props.innerRadius ? props.borderRadius : '',
  transition: "width 0.3s, height 0.3s", // 动画过渡效果
}));
</script>

<style scoped>
.progress-bar-wrapper {
  width: 100%;
  display: flex;
}

.progress-bar {
  height: 100%;
}
</style>