<template>
	<view class="pets-container">
		<u-navbar title="我的宠物" :border="false" bg-color="#ffffff">
			<template #right>
				<u-icon name="plus-circle-fill" color="#ff6b6b" size="24" @click="addPet"></u-icon>
			</template>
		</u-navbar>
		
		<view class="pets-list" v-if="petsList.length > 0">
			<u-card v-for="pet in petsList" :key="pet.id" :margin="20" :padding="20" @click="viewPetDetail(pet)">
				<view class="pet-card-content">
					<u-avatar :src="pet.avatar || '/static/default-pet.png'" size="60" shape="circle"></u-avatar>
					<view class="pet-info">
						<u-text :text="pet.name" type="primary" size="16" bold></u-text>
						<u-text :text="pet.breed" type="info" size="14"></u-text>
						<u-text :text="`${pet.age}岁 · 陪伴${pet.companionDays}天`" type="tips" size="12"></u-text>
					</view>
					<view class="pet-actions">
						<u-button type="primary" size="mini" @click.stop="addRecord(pet)">记录</u-button>
					</view>
				</view>
			</u-card>
		</view>
		
		<u-empty v-else mode="data" text="还没有添加宠物哦">
			<template #bottom>
				<u-button type="primary" text="添加第一只宠物" @click="addPet"></u-button>
			</template>
		</u-empty>
	</view>
</template>

<script>
export default {
	data() {
		return {
			petsList: []
		}
	},
	onShow() {
		this.loadPets()
	},
	methods: {
		loadPets() {
			try {
				const pets = uni.getStorageSync('pets') || []
				this.petsList = pets
			} catch (error) {
				console.error('加载宠物列表失败', error)
				this.petsList = []
			}
		},
		addPet() {
			uni.navigateTo({
				url: '/pages/pets/add-pet'
			})
		},
		viewPetDetail(pet) {
			uni.navigateTo({
				url: `/pages/pets/pet-detail?id=${pet.id}`
			})
		},
		addRecord(pet) {
			uni.navigateTo({
				url: `/pages/pets/add-record?petId=${pet.id}`
			})
		}
	}
}
</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;
	}
}


</style>
