<template>
	<uni-popup ref="popup" type="top" background-color="#fff" @change="change">
		<view class="filter-popup">
			<view class="filter-header">
				<text class="filter-title">伴宠师条件筛选</text>
				<uni-icons type="closeempty" size="20" color="#999" @click="close"></uni-icons>
			</view>
			
			<!-- 性别选择 -->
			<view class="filter-section">
				<view class="section-title">伴宠师性别</view>
				<view class="tag-group">
					<view :class="['tag-item', gender === '' ? 'active' : '']" @click="selectGender('')">
						<text>不限</text>
					</view>
					<view :class="['tag-item', gender === '女生' ? 'active' : '']" @click="selectGender('女生')">
						<text>女生</text>
					</view>
					<view :class="['tag-item', gender === '男生' ? 'active' : '']" @click="selectGender('男生')">
						<text>男生</text>
					</view>
				</view>
			</view>
			
			<!-- 服务宠物类型 -->
			<view class="filter-section">
				<view class="section-title">伴宠师服务宠物类型</view>
				<view class="tag-group">
					<view :class="['tag-item', petTypes.includes('1') ? 'active' : '']" @click="togglePetType('1')">
						<text>猫咪</text>
					</view>
					<view :class="['tag-item', petTypes.includes('2') ? 'active' : '']" @click="togglePetType('2')">
						<text>狗狗</text>
					</view>
					<view :class="['tag-item', petTypes.includes('3') ? 'active' : '']" @click="togglePetType('3')">
						<text>异宠</text>
					</view>
				</view>
			</view>
			
			<!-- 伴宠师等级 -->
			<view class="filter-section">
				<view class="section-title">伴宠师等级</view>
				<view class="tag-group">
					<view :class="['tag-item', level === '初级伴宠师' ? 'active' : '']" @click="selectLevel('初级伴宠师')">
						<text>初级伴宠师</text>
					</view>
					<view :class="['tag-item', level === '高级伴宠师' ? 'active' : '']" @click="selectLevel('高级伴宠师')">
						<text>高级伴宠师</text>
					</view>
				</view>
			</view>
			
			<!-- 底部按钮 -->
			<view class="filter-footer">
				<view class="reset-btn" @click="resetFilter">
					<text>重置</text>
				</view>
				<view class="confirm-btn" @click="confirmFilter">
					<text>确定</text>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: 'FilterPopup',
		data() {
			return {
				gender: '', // 性别筛选，空字符串表示不限
				petTypes: [], // 宠物类型筛选
				level: '' // 伴宠师等级
			}
		},
		methods: {
			// 打开弹窗
			open() {
				this.$refs.popup.open('top')
			},
			// 关闭弹窗
			close() {
				this.$refs.popup.close()
			},
			// 弹窗状态变化
			change(e) {
				console.log('弹窗状态：', e.show)
			},
			// 选择性别
			selectGender(gender) {
				this.gender = gender
			},
			// 切换宠物类型
			togglePetType(type) {
				const index = this.petTypes.indexOf(type)
				if (index > -1) {
					this.petTypes.splice(index, 1)
				} else {
					this.petTypes.push(type)
				}
			},
			// 选择等级
			selectLevel(level) {
				this.level = level
			},
			// 重置筛选条件
			resetFilter() {
				this.gender = ''
				this.petTypes = []
				this.level = ''
			},
			// 确认筛选
			confirmFilter() {
				const filterData = {
					gender: this.gender,
					petTypes: this.petTypes,
					level: this.level
				}
				this.$emit('confirm', filterData)
				this.close()
			}
		}
	}
</script>

<style lang="scss">
.filter-popup {
	padding: 30rpx;
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;
	
	.filter-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		
		.filter-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
	}
	
	.filter-section {
		margin-bottom: 30rpx;
		
		.section-title {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 20rpx;
		}
		
		.tag-group {
			display: flex;
			flex-wrap: wrap;
			
			.tag-item {
				padding: 15rpx 30rpx;
				background-color: #f5f5f5;
				border-radius: 50rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				
				text {
					font-size: 26rpx;
					color: #666;
				}
				
				&.active {
					background-color: #FFF4E5;
					
					text {
						color: #FFB13F;
					}
				}
			}
		}
	}
	
	.filter-footer {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		
		.reset-btn, .confirm-btn {
			width: 48%;
			height: 80rpx;
			border-radius: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.reset-btn {
			background-color: #f5f5f5;
			
			text {
				color: #666;
				font-size: 28rpx;
			}
		}
		
		.confirm-btn {
			background-color: #FFB13F;
			
			text {
				color: #fff;
				font-size: 28rpx;
			}
		}
	}
}
</style>