<template>
	<view class="pet-detail-container">
		<!-- 头部操作栏 -->
		<view class="header-actions">
			<text class="page-title">{{ petInfo.name || '宠物详情' }}</text>
			<view class="edit-btn" @click="editPet">
				<text class="edit-text">编辑</text>
			</view>
		</view>

		<view class="pet-header">
			<u-avatar :src="petInfo.avatar || '/static/default-pet.png'" size="80" shape="circle"></u-avatar>
			<view class="pet-basic-info">
				<u-text :text="petInfo.name" type="primary" size="18" bold></u-text>
				<u-text :text="`${petInfo.breed} · ${petInfo.gender}`" type="info" size="14"></u-text>
				<u-text :text="`${petInfo.age}岁 · ${petInfo.weight}`" type="tips" size="12"></u-text>
			</view>
		</view>
		
		<u-gap height="20"></u-gap>
		
		<u-card title="基本信息" :padding="20">
			<view class="info-grid">
				<view class="info-item">
					<u-text text="生日" type="tips" size="12"></u-text>
					<u-text :text="petInfo.birthday" type="primary" size="14"></u-text>
				</view>
				<view class="info-item">
					<u-text text="陪伴天数" type="tips" size="12"></u-text>
					<u-text :text="`${petInfo.companionDays}天`" type="primary" size="14"></u-text>
				</view>
				<view class="info-item">
					<u-text text="体重" type="tips" size="12"></u-text>
					<u-text :text="petInfo.weight" type="primary" size="14"></u-text>
				</view>
				<view class="info-item">
					<u-text text="性别" type="tips" size="12"></u-text>
					<u-text :text="petInfo.gender" type="primary" size="14"></u-text>
				</view>
			</view>
		</u-card>
		
		<u-gap height="20"></u-gap>
		
		<u-card title="最近记录" :padding="20">
			<view class="records-list" v-if="recentRecords.length > 0">
				<view class="record-item" v-for="record in recentRecords" :key="record.id">
					<view class="record-date">{{ record.date }}</view>
					<view class="record-content">{{ record.content }}</view>
				</view>
			</view>
			<u-empty v-else mode="data" text="暂无记录" :show="true"></u-empty>
		</u-card>
		
		<u-gap height="20"></u-gap>

		<!-- 性格标签展示 -->
		<u-card title="性格特征" :padding="20" v-if="petInfo.personality && petInfo.personality.length > 0">
			<view class="personality-tags">
				<u-tag
					v-for="tag in petInfo.personality"
					:key="tag"
					:text="tag"
					type="primary"
					size="small"
					plain
				></u-tag>
			</view>
			<u-button
				text="重新设置性格"
				type="info"
				size="mini"
				plain
				@click="setPersonality"
				style="margin-top: 20rpx;"
			></u-button>
		</u-card>

		<u-card title="性格设置" :padding="20" v-else>
			<u-empty mode="data" text="还未设置宠物性格" :show="true">
				<template #bottom>
					<u-button type="primary" text="设置性格特征" size="mini" @click="setPersonality"></u-button>
				</template>
			</u-empty>
		</u-card>

		<u-gap height="20"></u-gap>

		<!-- 快捷功能按钮 -->
		<view class="quick-actions">
			<view class="action-row">
				<view class="action-item" @click="addRecord">
					<u-icon name="edit-pen" size="24" color="#81C784"></u-icon>
					<text class="action-text">添加记录</text>
				</view>
				<view class="action-item" @click="chatWithPet">
					<u-icon name="chat" size="24" color="#64B5F6"></u-icon>
					<text class="action-text">AI聊天</text>
				</view>
				<view class="action-item" @click="viewHealth">
					<u-icon name="heart" size="24" color="#FF8A80"></u-icon>
					<text class="action-text">健康档案</text>
				</view>
			</view>
			<view class="action-row">
				<view class="action-item" @click="viewTimeline">
					<u-icon name="clock" size="24" color="#FFB74D"></u-icon>
					<text class="action-text">成长时光</text>
				</view>
				<view class="action-item" @click="viewRecords">
					<u-icon name="list" size="24" color="#9C27B0"></u-icon>
					<text class="action-text">所有记录</text>
				</view>
				<view class="action-item" @click="shareProfile">
					<u-icon name="share" size="24" color="#FF9800"></u-icon>
					<text class="action-text">分享档案</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			petId: '',
			petInfo: {},
			currentLayout: 1,
			activeTab: 0,
			drawerExpanded: false,
			recentRecords: [
				{
					id: 1,
					date: '2024-01-15',
					content: '今天小橘很活泼，食欲很好'
				},
				{
					id: 2,
					date: '2024-01-14',
					content: '带小橘去公园散步，玩得很开心'
				}
			],
			layout1Items: [
				{ id: 1, icon: '📝', text: '添加记录', action: 'addRecord' },
				{ id: 2, icon: '💬', text: 'AI聊天', action: 'chatWithPet' },
				{ id: 3, icon: '📊', text: '健康档案', action: 'viewHealth' },
				{ id: 4, icon: '⏰', text: '成长时光', action: 'viewTimeline' },
				{ id: 5, icon: '📋', text: '所有记录', action: 'viewRecords' },
				{ id: 6, icon: '🔔', text: '提醒设置', action: 'showReminder' },
				{ id: 7, icon: '📷', text: '拍照记录', action: 'takePhoto' },
				{ id: 8, icon: '🎵', text: '音频日记', action: 'recordAudio' },
				{ id: 9, icon: '🏥', text: '医疗记录', action: 'medicalRecord' }
			],
			layout2Items: [
				{ id: 1, icon: '📝', text: '添加记录', action: 'addRecord' },
				{ id: 2, icon: '💬', text: 'AI聊天', action: 'chatWithPet' },
				{ id: 3, icon: '📊', text: '健康档案', action: 'viewHealth' },
				{ id: 4, icon: '⏰', text: '成长时光', action: 'viewTimeline' },
				{ id: 5, icon: '📋', text: '所有记录', action: 'viewRecords' },
				{ id: 6, icon: '🔔', text: '提醒设置', action: 'showReminder' },
				{ id: 7, icon: '📷', text: '拍照记录', action: 'takePhoto' },
				{ id: 8, icon: '🎵', text: '音频日记', action: 'recordAudio' }
			],
			tabs: [
				{
					id: 1,
					name: '日常',
					items: [
						{ id: 1, icon: '📝', text: '添加记录', action: 'addRecord' },
						{ id: 2, icon: '💬', text: 'AI聊天', action: 'chatWithPet' },
						{ id: 3, icon: '📷', text: '拍照记录', action: 'takePhoto' }
					]
				},
				{
					id: 2,
					name: '健康',
					items: [
						{ id: 4, icon: '📊', text: '健康档案', action: 'viewHealth' },
						{ id: 5, icon: '🏥', text: '医疗记录', action: 'medicalRecord' },
						{ id: 6, icon: '💊', text: '用药提醒', action: 'medicineReminder' }
					]
				},
				{
					id: 3,
					name: '其他',
					items: [
						{ id: 7, icon: '⏰', text: '成长时光', action: 'viewTimeline' },
						{ id: 8, icon: '📋', text: '所有记录', action: 'viewRecords' },
						{ id: 9, icon: '🔔', text: '提醒设置', action: 'showReminder' }
					]
				}
			],
			layout7Items: [
				{ id: 1, icon: '📝', text: '添加记录', action: 'addRecord' },
				{ id: 2, icon: '💬', text: 'AI聊天', action: 'chatWithPet' },
				{ id: 3, icon: '📊', text: '健康档案', action: 'viewHealth' },
				{ id: 4, icon: '⏰', text: '成长时光', action: 'viewTimeline' },
				{ id: 5, icon: '📋', text: '所有记录', action: 'viewRecords' },
				{ id: 6, icon: '🔔', text: '提醒设置', action: 'showReminder' }
			]
		}
	},
	onLoad(options) {
		this.petId = options.id
		this.loadPetInfo()
	},
	methods: {
		loadPetInfo() {
			try {
				// 从本地存储获取宠物信息
				const pets = uni.getStorageSync('pets') || []
				this.petInfo = pets.find(pet => pet.id == this.petId) || {}

				// 如果没有找到宠物信息，使用默认数据
				if (!this.petInfo.id) {
					this.petInfo = {
						id: this.petId,
						name: '未知宠物',
						breed: '未知品种',
						age: 0,
						companionDays: 0,
						avatar: '/static/default-pet.png',
						gender: '未知',
						weight: '0kg',
						birthday: '未知'
					}
				}
			} catch (error) {
				console.error('加载宠物信息失败', error)
				this.petInfo = {}
			}
		},
		
		editPet() {
			uni.navigateTo({
				url: `/pages/pets/edit-pet?id=${this.petId}`
			})
		},
		
		addRecord() {
			uni.navigateTo({
				url: `/pages/pets/select-record-type?petId=${this.petId}`
			})
		},

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

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

		setPersonality() {
			uni.navigateTo({
				url: `/pages/pets/pet-personality?petId=${this.petId}`
			})
		},

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

		viewRecords() {
			uni.navigateTo({
				url: `/pages/pets/pet-records?petId=${this.petId}`
			})
		},

		shareProfile() {
			uni.showToast({
				title: '分享功能开发中',
				icon: 'none'
			})
		},

		switchLayout(layoutNumber) {
			this.currentLayout = layoutNumber
		},

		handleAction(action) {
			switch(action) {
				case 'addRecord':
					this.addRecord()
					break
				case 'chatWithPet':
					this.chatWithPet()
					break
				case 'viewHealth':
					this.viewHealth()
					break
				case 'viewTimeline':
					this.viewTimeline()
					break
				case 'viewRecords':
					this.viewRecords()
					break
				case 'showReminder':
					uni.showToast({
						title: '提醒功能开发中',
						icon: 'none'
					})
					break
				case 'takePhoto':
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'],
						sourceType: ['camera'],
						success: () => {
							uni.showToast({
								title: '拍照成功',
								icon: 'success'
							})
						}
					})
					break
				case 'recordAudio':
					uni.showToast({
						title: '音频功能开发中',
						icon: 'none'
					})
					break
				case 'medicalRecord':
					uni.showToast({
						title: '医疗记录功能开发中',
						icon: 'none'
					})
					break
				case 'medicineReminder':
					uni.showToast({
						title: '用药提醒功能开发中',
						icon: 'none'
					})
					break
				default:
					console.log('未知操作:', action)
			}
		}
	}
}
</script>

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

.header-actions {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	margin: 20rpx 30rpx;
	border-radius: 24rpx;
	padding: 24rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
	border: 1rpx solid rgba(255, 255, 255, 0.3);

	.page-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #FF8A80;
	}

	.edit-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);
		}

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

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

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

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

.info-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30rpx;
	
	.info-item {
		display: flex;
		flex-direction: column;
		
		:deep(.u-text:first-child) {
			margin-bottom: 8rpx;
		}
	}
}

.records-list {
	.record-item {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		
		&:last-child {
			border-bottom: none;
		}
		
		.record-date {
			font-size: 24rpx;
			color: #999;
			margin-bottom: 8rpx;
		}
		
		.record-content {
			font-size: 28rpx;
			color: #333;
		}
	}
}

/* 性格标签 */
.personality-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 12rpx;
}

/* 快捷功能按钮 */
.quick-actions {
	background: #ffffff;
	margin: 0 30rpx;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);

	.action-row {
		display: flex;
		justify-content: space-around;
		margin-bottom: 30rpx;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12rpx;
		padding: 20rpx;
		border-radius: 16rpx;
		transition: all 0.3s ease;
		min-width: 120rpx;

		&:active {
			background: #F5F5F5;
			transform: scale(0.95);
		}

		.action-text {
			font-size: 24rpx;
			color: #666666;
		}
	}
}
</style>
