<template>
	<view class="progress-bar">
		<view
			class="progress-track"
			:style="trackStyle"
		>
			<view
				class="progress-fill"
				:style="fillStyle"
			></view>
		</view>
		<text
			v-if="showText"
			class="progress-text"
			:style="textStyle"
		>{{ clampedPercent }}%</text>
	</view>
</template>

<script>
import themeMixin from '@/mixins/themeMixin.js'

export default {
	name: 'ProgressBar',
	mixins: [themeMixin],
	props: {
		percent: {
			type: Number,
			default: 0
		},
		height: {
			type: Number,
			default: 12
		},
		showText: {
			type: Boolean,
			default: false
		},
		color: {
			type: String,
			default: ''
		},
		trackColor: {
			type: String,
			default: ''
		},
		animated: {
			type: Boolean,
			default: true
		},
		type: {
			type: String,
			default: 'gradient'
		}
	},
	computed: {
		clampedPercent() {
			return Math.max(0, Math.min(100, this.percent))
		},
		statusColor() {
			if (this.color) return this.color
			if (this.clampedPercent >= 100) return this.themeConfig.dangerColor
			if (this.clampedPercent > 80) return this.themeConfig.warningColor
			return this.themeConfig.primaryColor
		},
		trackStyle() {
			return {
				height: this.height + 'rpx',
				backgroundColor: this.trackColor || this.themeConfig.borderLight
			}
		},
		fillStyle() {
			const style = {
				width: this.clampedPercent + '%',
				transition: this.animated ? 'width 0.4s ease' : 'none'
			}
			if (this.type === 'gradient') {
				style.background = `linear-gradient(90deg, ${this.statusColor}, ${this.themeConfig.gradientEnd})`
			} else {
				style.backgroundColor = this.statusColor
			}
			return style
		},
		textStyle() {
			return {
				color: this.themeConfig.textSecondary
			}
		}
	}
}
</script>

<style scoped>
.progress-bar {
	display: flex;
	align-items: center;
}

.progress-track {
	flex: 1;
	border-radius: 100rpx;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	border-radius: 100rpx;
}

.progress-text {
	font-size: 22rpx;
	margin-left: 16rpx;
}
</style>
