<template>
	<view class="adoption-container">
		<view class="search-container">
			<u-search placeholder="搜索宠物品种或地区" v-model="searchKeyword" @search="searchPets"></u-search>
			<view class="publish-btn" @click="publishAdoption">
				<text class="publish-text">发布</text>
			</view>
		</view>

		<view class="filter-bar">
			<u-button v-for="filter in filters" :key="filter.key"
				:text="filter.name"
				:type="currentFilter === filter.key ? 'primary' : 'info'"
				size="mini"
				plain
				@click="setFilter(filter.key)">
			</u-button>
		</view>

		<scroll-view class="adoption-list" scroll-y="true">
			<view v-for="pet in filteredPets" :key="pet.id" class="pet-card" @click="viewDetail(pet)">
				<view class="pet-adoption-item">
					<view class="pet-avatar">
						<image :src="pet.avatar || '/static/default-pet.png'" class="avatar-image" mode="aspectFill"></image>
					</view>
					<view class="pet-info">
						<text class="pet-name">{{ pet.name }}</text>
						<text class="pet-details">{{ pet.breed }} · {{ pet.age }}岁 · {{ pet.gender }}</text>
						<text class="pet-location">{{ pet.location }}</text>
						<view class="pet-tags">
							<view class="status-tag" :class="{ 'available': pet.status === '待领养' }">
								<text class="tag-text">{{ pet.status }}</text>
							</view>
						</view>
					</view>
					<view class="contact-btn" @click.stop="contact(pet)">
						<text class="btn-text">联系</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchKeyword: '',
			currentFilter: 'all',
			filters: [
				{ key: 'all', name: '全部' },
				{ key: 'cat', name: '猫咪' },
				{ key: 'dog', name: '狗狗' },
				{ key: 'available', name: '待领养' }
			],
			adoptionPets: [
				{
					id: 1,
					name: '小花',
					breed: '中华田园猫',
					age: 1,
					gender: '母',
					location: '北京市朝阳区',
					status: '待领养',
					avatar: '/static/cat1.jpg',
					type: 'cat',
					description: '性格温顺，已绝育，已接种疫苗'
				},
				{
					id: 2,
					name: '大黄',
					breed: '金毛',
					age: 2,
					gender: '公',
					location: '上海市浦东新区',
					status: '待领养',
					avatar: '/static/dog1.jpg',
					type: 'dog',
					description: '活泼可爱，喜欢和人玩耍'
				}
			]
		}
	},
	computed: {
		filteredPets() {
			let result = this.adoptionPets

			if (this.currentFilter !== 'all') {
				if (this.currentFilter === 'available') {
					result = result.filter(pet => pet.status === '待领养')
				} else {
					result = result.filter(pet => pet.type === this.currentFilter)
				}
			}

			if (this.searchKeyword) {
				result = result.filter(pet =>
					pet.name.includes(this.searchKeyword) ||
					pet.breed.includes(this.searchKeyword) ||
					pet.location.includes(this.searchKeyword)
				)
			}

			return result
		}
	},
	methods: {
		setFilter(key) {
			this.currentFilter = key
		},

		searchPets() {
			// 搜索逻辑在computed中处理
		},

		publishAdoption() {
			uni.navigateTo({
				url: '/pages/adoption/publish'
			})
		},

		viewDetail(pet) {
			uni.navigateTo({
				url: `/pages/adoption/detail?id=${pet.id}`
			})
		},

		contact(pet) {
			uni.showModal({
				title: '联系方式',
				content: '请添加微信：pet_love_123',
				showCancel: false
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.adoption-container {
	background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
	min-height: 100vh;
}

.search-container {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	margin: 20rpx 30rpx;
	border-radius: 24rpx;
	padding: 20rpx;
	box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
	border: 1rpx solid rgba(255, 255, 255, 0.3);
	display: flex;
	align-items: center;
	gap: 16rpx;

	.publish-btn {
		background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 100%);
		border-radius: 20rpx;
		padding: 16rpx 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.4);
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.95);
		}

		.publish-text {
			font-size: 28rpx;
			color: #ffffff;
			font-weight: 500;
		}
	}
}

.filter-bar {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	margin: 20rpx 30rpx;
	border-radius: 24rpx;
	padding: 24rpx;
	display: flex;
	gap: 20rpx;
	box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
	border: 1rpx solid rgba(255, 255, 255, 0.3);

	:deep(.u-button) {
		margin: 0;
		background: rgba(255, 138, 128, 0.1);
		border: 2rpx solid rgba(255, 138, 128, 0.3);
		border-radius: 20rpx;
	}

	:deep(.u-button--primary) {
		background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 100%);
		border: none;
		box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.4);
	}
}

.adoption-list {
	height: calc(100vh - 300rpx);
	padding: 0 30rpx;
}

.pet-card {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	margin: 20rpx 0;
	border-radius: 24rpx;
	box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
	border: 1rpx solid rgba(255, 255, 255, 0.3);
	transition: all 0.3s ease;

	&:active {
		transform: scale(0.98);
		box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.3);
	}
}

.pet-adoption-item {
	display: flex;
	align-items: center;
	padding: 24rpx;

	.pet-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.2);

		.avatar-image {
			width: 100%;
			height: 100%;
		}
	}

	.pet-info {
		flex: 1;
		margin-left: 24rpx;

		.pet-name {
			font-size: 32rpx;
			font-weight: 600;
			color: #FF8A80;
			display: block;
			margin-bottom: 8rpx;
		}

		.pet-details {
			font-size: 28rpx;
			color: #666666;
			display: block;
			margin-bottom: 8rpx;
		}

		.pet-location {
			font-size: 24rpx;
			color: #999999;
			display: block;
			margin-bottom: 16rpx;
		}

		.pet-tags {
			.status-tag {
				background: rgba(255, 193, 7, 0.1);
				border: 2rpx solid rgba(255, 193, 7, 0.3);
				border-radius: 16rpx;
				padding: 8rpx 16rpx;
				display: inline-block;

				&.available {
					background: rgba(76, 175, 80, 0.1);
					border-color: rgba(76, 175, 80, 0.3);

					.tag-text {
						color: #4CAF50;
					}
				}

				.tag-text {
					font-size: 24rpx;
					color: #FFC107;
					font-weight: 500;
				}
			}
		}
	}

	.contact-btn {
		background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 100%);
		border-radius: 20rpx;
		padding: 16rpx 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.4);
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.95);
		}

		.btn-text {
			font-size: 28rpx;
			color: #ffffff;
			font-weight: 500;
		}
	}
}
</style>
