<template>
	<view class="query-item">
		<view class="query-title">
			<text>{{ title }}</text>
		</view>
		<view class="query-list">
			<view v-for="(item, index) in filterList" :key="index" @click="itemClick(index)"
				:class="['tag-item', { checked: item.checked, 'mr-30': (index + 1) % 3 !== 0 }]">
				{{ $t(item.name) }}
			</view>
		</view>
	</view>
</template>

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

<style lang="scss" scoped>
	.query-item {
		margin-top: 40rpx;

		.query-title {
			color: #333;
			font-size: 14px;
			font-weight: 700;
		}

		.query-list {
			display: flex;
			flex-wrap: wrap;

			.tag-item {
				margin-top: 30rpx;
				min-width: 198rpx;
				padding: 0 12rpx;
				height: 68rpx;
				border-radius: 32rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #333;
				font-size: 13px;
				border: 1px solid #fff;
				background-color: #f6f6f6;
			}

			.checked {
				border: 1px solid #377dff4d;
				background-color: #377dff0d;
				color: #377dffff;
			}

			.mr-30 {
				margin-right: 30rpx;
			}
		}
	}
</style>