<template>
	<view style="margin-top: 40rpx;margin-left: 40rpx;">
		<view>
			<text style="color: #333;">{{ title }}</text>
		</view>
		<view class="u-flex" style="flex-wrap: wrap;">
			<view v-for="(item, index) in filterList" :key="index" class="u-page__tag-item">
				<u-tag
					shape="circle"
					size="large"
					borderColor="#377DFF4D"
					:bgColor="item.checked?'#f5f8ff':'#F6F6F6'"
					:color="item.checked?'#377DFF':'#333'"
					:text="item.name"
					@click="radioClick(index)"
					
				/>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		title: {
			type: String,
			default: ''
		},
		filterList: {
			type: Array,
			default: () => []
		}
	},
	methods: {
		radioClick(currentIndex) {
			this.$emit('clickTag', currentIndex);
		}
	}
};
</script>

<style>
.u-page__tag-item {
	margin-right: 20px;
	margin-top: 20px;
}
</style>