<template>
	<view class="pets-container">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-content">
				<view class="navbar-title">
					<text class="title-text">🐾 我的宠物</text>
					<text class="subtitle-text">{{ petsList.length }}只小可爱陪伴着你</text>
				</view>
				<view class="navbar-actions">
					<view class="action-btn" @click="showQuickActions = true">
						<u-icon name="apps" color="#FF8A80" size="20"></u-icon>
					</view>
					<view class="action-btn add-btn" @click="addPet">
						<u-icon name="plus" color="#ffffff" size="18"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 统计卡片 -->
		<view class="stats-card" v-if="petsList.length > 0">
			<view class="stats-item">
				<view class="stats-number">{{ totalRecords }}</view>
				<view class="stats-label">记录</view>
			</view>
			<view class="stats-item">
				<view class="stats-number">{{ totalDays }}</view>
				<view class="stats-label">陪伴天数</view>
			</view>
			<view class="stats-item">
				<view class="stats-number">{{ upcomingReminders }}</view>
				<view class="stats-label">待办提醒</view>
			</view>
		</view>

		<!-- 宠物列表 -->
		<view class="pets-list" v-if="petsList.length > 0">
			<view class="pet-card" v-for="pet in petsList" :key="pet.id" @click="viewPetDetail(pet)">
				<!-- 宠物头像和基本信息 -->
				<view class="pet-header">
					<view class="pet-avatar-container">
						<u-avatar :src="pet.avatar || '/static/default-pet.png'" size="70" shape="circle"></u-avatar>
						<view class="pet-status" :class="pet.healthStatus || 'healthy'">
							<u-icon :name="getHealthIcon(pet.healthStatus)" size="12" color="#ffffff"></u-icon>
						</view>
					</view>
					<view class="pet-basic-info">
						<view class="pet-name-row">
							<text class="pet-name">{{ pet.name }}</text>
							<view class="pet-gender" :class="pet.gender === '公' ? 'male' : 'female'">
								<u-icon :name="pet.gender === '公' ? 'man' : 'woman'" size="12" color="#ffffff"></u-icon>
							</view>
						</view>
						<text class="pet-breed">{{ pet.breed }}</text>
						<text class="pet-age">{{ pet.age }}岁 · 陪伴{{ pet.companionDays }}天</text>
					</view>
				</view>

				<!-- 宠物特征标签 -->
				<view class="pet-tags" v-if="pet.personality && pet.personality.length > 0">
					<u-tag
						v-for="tag in pet.personality.slice(0, 3)"
						:key="tag"
						:text="tag"
						type="primary"
						size="mini"
						plain
					></u-tag>
				</view>

				<!-- 快捷操作按钮 -->
				<view class="pet-actions">
					<view class="action-item" @click.stop="addRecord(pet)">
						<u-icon name="edit-pen" size="16" color="#81C784"></u-icon>
						<text class="action-text">记录</text>
					</view>
					<view class="action-item" @click.stop="chatWithPet(pet)">
						<u-icon name="chat" size="16" color="#64B5F6"></u-icon>
						<text class="action-text">聊天</text>
					</view>
					<view class="action-item" @click.stop="viewHealth(pet)">
						<u-icon name="heart" size="16" color="#FF8A80"></u-icon>
						<text class="action-text">健康</text>
					</view>
					<view class="action-item" @click.stop="viewTimeline(pet)">
						<u-icon name="clock" size="16" color="#FFB74D"></u-icon>
						<text class="action-text">时光</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-else>
			<image class="empty-image" src="/static/empty-pets.png" mode="aspectFit"></image>
			<text class="empty-title">还没有小伙伴呢</text>
			<text class="empty-desc">添加你的第一只宠物，开始记录美好时光吧~</text>
			<u-button
				class="add-first-pet-btn"
				type="primary"
				text="添加第一只宠物"
				shape="round"
				@click="addPet"
			></u-button>
		</view>

		<!-- 快捷操作弹窗 -->
		<u-popup v-model="showQuickActions" mode="bottom" border-radius="20">
			<view class="quick-actions-popup">
				<view class="popup-header">
					<text class="popup-title">快捷操作</text>
					<u-icon name="close" size="20" @click="showQuickActions = false"></u-icon>
				</view>
				<view class="quick-actions-grid">
					<view class="quick-action-item" @click="navigateToRecords">
						<u-icon name="list" size="24" color="#81C784"></u-icon>
						<text class="quick-action-text">所有记录</text>
					</view>
					<view class="quick-action-item" @click="navigateToStats">
						<u-icon name="bar-chart" size="24" color="#64B5F6"></u-icon>
						<text class="quick-action-text">数据统计</text>
					</view>
					<view class="quick-action-item" @click="navigateToReminders">
						<u-icon name="bell" size="24" color="#FFB74D"></u-icon>
						<text class="quick-action-text">提醒事项</text>
					</view>
					<view class="quick-action-item" @click="exportData">
						<u-icon name="share" size="24" color="#FF8A80"></u-icon>
						<text class="quick-action-text">数据导出</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			petsList: [],
			showQuickActions: false,
			totalRecords: 0,
			totalDays: 0,
			upcomingReminders: 0
		}
	},
	onShow() {
		this.loadPets()
		this.loadStatistics()
	},
	computed: {
		// 计算总陪伴天数
		totalCompanionDays() {
			return this.petsList.reduce((total, pet) => total + (pet.companionDays || 0), 0)
		}
	},
	methods: {
		loadPets() {
			try {
				let pets = uni.getStorageSync('pets') || []

				// 如果没有宠物数据，添加一些模拟数据
				if (pets.length === 0) {
					pets = [
						{
							id: 1,
							name: '小橘',
							breed: '橘猫',
							age: 2,
							companionDays: 365,
							avatar: '/static/default-pet.png',
							gender: '公',
							weight: '4.5kg',
							birthday: '2022-01-15',
							healthStatus: 'healthy',
							personality: ['活泼', '粘人', '贪吃'],
							lastRecord: '2024-01-15'
						},
						{
							id: 2,
							name: '小白',
							breed: '金毛',
							age: 3,
							companionDays: 1095,
							avatar: '/static/default-pet.png',
							gender: '母',
							weight: '25kg',
							birthday: '2021-03-20',
							healthStatus: 'healthy',
							personality: ['温顺', '聪明', '忠诚'],
							lastRecord: '2024-01-14'
						}
					]
					// 保存模拟数据到本地存储
					uni.setStorageSync('pets', pets)
				}

				this.petsList = pets
			} catch (error) {
				console.error('加载宠物列表失败', error)
				this.petsList = []
			}
		},

		loadStatistics() {
			try {
				// 加载统计数据
				const records = uni.getStorageSync('petRecords') || []
				this.totalRecords = records.length

				// 计算总陪伴天数
				this.totalDays = this.petsList.reduce((total, pet) => total + (pet.companionDays || 0), 0)

				// 模拟待办提醒数量
				this.upcomingReminders = Math.floor(Math.random() * 5) + 1
			} catch (error) {
				console.error('加载统计数据失败', error)
			}
		},

		getHealthIcon(status) {
			const iconMap = {
				healthy: 'checkmark',
				warning: 'warning',
				sick: 'close'
			}
			return iconMap[status] || 'checkmark'
		},

		addPet() {
			uni.navigateTo({
				url: '/pages/pets/add-pet'
			})
		},

		viewPetDetail(pet) {
			uni.navigateTo({
				url: `/pages/pets/pet-detail?id=${pet.id}`
			})
		},

		chatWithPet(pet) {
			uni.navigateTo({
				url: `/pages/pets/pet-chat-simple?petId=${pet.id}`
			})
		},

		addRecord(pet) {
			uni.navigateTo({
				url: `/pages/pets/add-record-simple?petId=${pet.id}`
			})
		},

		viewHealth(pet) {
			uni.navigateTo({
				url: `/pages/pets/health-charts?petId=${pet.id}`
			})
		},

		viewTimeline(pet) {
			uni.navigateTo({
				url: `/pages/pets/pet-timeline?petId=${pet.id}`
			})
		},

		// 快捷操作方法
		navigateToRecords() {
			this.showQuickActions = false
			uni.navigateTo({
				url: '/pages/pets/all-records'
			})
		},

		navigateToStats() {
			this.showQuickActions = false
			uni.navigateTo({
				url: '/pages/pets/statistics'
			})
		},

		navigateToReminders() {
			this.showQuickActions = false
			uni.navigateTo({
				url: '/pages/pets/reminders'
			})
		},

		exportData() {
			this.showQuickActions = false
			uni.showToast({
				title: '数据导出功能开发中',
				icon: 'none'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.pets-container {
	background-color: #f8f9fa;
	min-height: 100vh;
}

.pet-card-content {
	display: flex;
	align-items: center;

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

		:deep(.u-text) {
			margin-bottom: 8rpx;
		}
	}

	.pet-actions {
		margin-left: 20rpx;
		display: flex;
		gap: 8px;
		flex-direction: column;
	}
}


</style>
