<template>
    <view class="progress" :style="{ width: width + 'rpx' }">
        <view class="progress-track" :style="{ background: bg, borderColor: border }">
            <view
                class="progress-fill"
                :style="{
                    width: percent + '%',
                    background: activeBg,
                }"
            ></view>
        </view>
    </view>
</template>

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

const props = withDefaults(
    defineProps<{
        rate: number; // 0~1
        width?: number | string;
        bg?: string;
        border?: string;
        activeBg?: string;
        color?: string;
    }>(),
    {
        rate: 0,
        width: 200,
        bg: '#E0E7FF',
        border: '#C7D2FE',
        activeBg: 'linear-gradient(90deg, #818CF8 0%, #4F46E5 100%)',
        color: '#4F46E5',
    },
);

const percent = computed(() => {
    const r = Number(props.rate);
    if (Number.isNaN(r)) return 0;
    return Math.max(0, Math.min(100, Math.round(r * 100)));
});
</script>

<style lang="scss" scoped>
.progress {
    display: inline-block;
    vertical-align: middle;
}

.progress-track {
    position: relative;
    width: 100%;
    height: 16rpx;
    border-radius: 999rpx;
    overflow: hidden;
    border: 2rpx solid;
    box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.06);
}

.progress-fill {
    height: 100%;
    border-radius: 999rpx;
    transition: width 400ms ease-out;
    box-shadow: inset 0 -2rpx 0 rgba(0, 0, 0, 0.1);
}
</style>
