<template>
	<view class="u-flex u-flex-wrap">
		<view class="tag-item u-m-r-32" @tap="changeActive(index)" :class="{active:index===active}" v-for="(item,index) in list" :key="index">
			{{item}}
		</view>
	</view>
	
</template>

<script setup>
import { ref, watch } from 'vue';
	const props=defineProps({
		list: {
			type: Array,
			default: () => {
				return []
			}
		},
		defaultIndex: {
			type: Number,
			default: 0
		}
	})
	
	let active=ref(props.defaultIndex)
	
	function changeActive(index){
		active.value=index
	}
	const emits=defineEmits(['change'])
	
	watch(()=>active.value,(newval)=>{
		emits('change',active.value)
	})
	
	
</script>

<style lang="scss">
	.tag-item {
		padding: 8rpx 22rpx;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		text-align: center;
		color: #666;
		background: #F7F7FA;
		&.active {
			background: #E6F0FF;
			color: $my-main-color;
		}
	}
</style>