<template>
	<view class="content" :class="{ between: type == 'between' }">
		<view class="box" :class="{ active: currentIndex == index }" v-for="(item, index) in tagList" :key="index" @click="handleChange(index)">
			{{ rangekey ? item[rangekey] || item : item }}
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref, watch } from 'vue'

const $props = defineProps(['tagList', 'type', 'rangekey', 'currentIndex'])
const $emit = defineEmits(['change'])

// 当前索引值
const currentIndex = ref(0)

onLoad(() => {
	if ($props.currentIndex) {
		currentIndex.value = $props.currentIndex
	}
})

// 监听索引值变化
watch(
	() => $props.currentIndex,
	(a, b) => {
		currentIndex.value = $props.currentIndex
	}
)

// 切换tag时的回调
const handleChange = (index) => {
	if (currentIndex.value != index) {
		currentIndex.value = index
		// 给父组件传值
		$emit('change', currentIndex.value)
	}
}
</script>

<style lang="scss" scoped>
.content {
	display: flex;
	align-items: center;
	height: 70rpx;
	overflow-x: auto;

	.box {
		position: relative;
		padding: 0 10rpx;
		margin-right: 35rpx;
		height: 50rpx;
		font-size: 32rpx;
		text-align: center;
		white-space: nowrap;
		color: #333333;
	}

	.active {
		color: #000;
		font-weight: bold;

		&::after {
			position: absolute;
			bottom: 12rpx;
			left: 0;
			content: '';
			width: 100%;
			height: 9rpx;
			background-image: linear-gradient(270deg, rgba(91, 186, 255, 0.5) 0%, rgba(0, 119, 255, 0.5) 100%);
		}
	}
}

.between {
	justify-content: space-between;
}
</style>
