<template>
	<view class="slide-filter-container">
		<view class="progress-bar-bg">
			<view class="progress-bar-length" :style="{width: `${(scaleIndex / (option?.length - 1) * 100)}%`}"></view>
			<view class="scale-area">
				<view 
					class="scale-area-item"
					v-for="(item, index) in option"
					:class="{'scale-area-item-active': index == scaleIndex}"
					@click="clickScale(item, index)"
				>
					{{ item }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, defineProps, defineEmits } from 'vue';

const props = defineProps({
	option: { type: Array, default: () => [] },
	modelValue: { type: Number, default: "" },
});

const emit = defineEmits(['update:modelValue', 'change']);

const scaleIndex = ref(0);
const clickScale = (item, index) => {
	scaleIndex.value = index;
	emit("update:modelValue", item)
	emit("change")
}
</script>

<style lang="scss" scoped>
.slide-filter-container {
	width: 100%;
	.progress-bar-bg {
		height: 20rpx;
		background: #EEEEEE;
		position: relative;
		border-radius: 4rpx;
		.progress-bar-length {
			width: 50%;
			height: 100%;
			background: #6FA256;
			border-radius: 4rpx 0 0 4rpx;
			position: relative;
		}
		.progress-bar-length::after {
			content: '';
			position: absolute;
			width: 2rpx;
			height: 26rpx;
			right: -2rpx;
			top: -3rpx;
			background: #6FA256;
		}
		.scale-area {
			position: absolute;
			height: 46rpx;
			top: 0;
			left: 0;
			font-weight: bold;
			font-size: 20rpx;
			color: #232323;
			display: flex;
			justify-content: space-between;
			width: 100%;
			&-item {
				padding-top: 26rpx;
				width: 20rpx;
				text-align: center;
			}
			&-item-active {
				color: #6FA256;
			}
		}
	}
}
</style>
