<template>
	<view class="knowledge-detail-container page-container-unified">

		<!-- 知识内容卡片 -->
		<view class="content-card">
			<view class="knowledge-header">
				<view class="title-row">
					<text class="knowledge-title">{{ knowledgeDetail.title }}</text>
					<view class="header-actions">
						<view class="action-button" @click="toggleFavorite">
							<u-icon :name="isFavorited ? 'heart-fill' : 'heart'" size="32" :color="isFavorited ? '#FF8A80' : '#999'"></u-icon>
						</view>
						<view class="action-button" @click="shareKnowledge">
							<u-icon name="share" size="32" color="#999"></u-icon>
						</view>
					</view>
				</view>
				<view class="knowledge-meta">
					<view class="category-tag">
						<text class="tag-text">{{ knowledgeDetail.category }}</text>
					</view>
					<text class="read-count">{{ knowledgeDetail.readCount }}次阅读</text>
				</view>
			</view>
			
			<view class="knowledge-content">
				<rich-text :nodes="knowledgeDetail.content"></rich-text>
			</view>
		</view>


	</view>
</template>

<script>
export default {
	data() {
		return {
			knowledgeId: '',
			isFavorited: false,
			knowledgeDetail: {
				id: 1,
				title: '猫咪日常饮食指南',
				category: '饮食',
				readCount: 1256,
				content: `
					<p style="margin-bottom: 16px; line-height: 1.6; color: #333;">猫咪的健康饮食是保证其长寿和活力的关键因素。作为肉食动物，猫咪对蛋白质的需求量很高，同时也需要适量的脂肪和少量的碳水化合物。</p>
					
					<h3 style="margin: 24px 0 16px 0; color: #FF8A80; font-size: 18px; font-weight: 600;">营养需求</h3>
					<p style="margin-bottom: 16px; line-height: 1.6; color: #333;">成年猫咪每天需要的营养成分包括：</p>
					<ul style="margin-bottom: 16px; padding-left: 20px; color: #333;">
						<li style="margin-bottom: 8px;">蛋白质：26-30%</li>
						<li style="margin-bottom: 8px;">脂肪：9-15%</li>
						<li style="margin-bottom: 8px;">碳水化合物：不超过10%</li>
						<li style="margin-bottom: 8px;">水分：充足的饮水</li>
					</ul>
					
					<h3 style="margin: 24px 0 16px 0; color: #FF8A80; font-size: 18px; font-weight: 600;">喂食建议</h3>
					<p style="margin-bottom: 16px; line-height: 1.6; color: #333;">建议采用定时定量的喂食方式，成年猫咪每天喂食2-3次，幼猫需要更频繁的喂食。选择高质量的猫粮，避免给猫咪喂食人类食物。</p>
					
					<h3 style="margin: 24px 0 16px 0; color: #FF8A80; font-size: 18px; font-weight: 600;">注意事项</h3>
					<p style="margin-bottom: 16px; line-height: 1.6; color: #333;">避免给猫咪喂食巧克力、洋葱、大蒜等对猫咪有害的食物。保持食物和水的新鲜，定期清洁食具。</p>
				`
			}
		}
	},
	
	onLoad(options) {
		if (options.id) {
			this.knowledgeId = options.id;
			this.loadKnowledgeDetail();
		}
	},

	onShow() {
		// 每次显示页面时检查收藏状态
		this.checkFavoriteStatus();
	},
	
	methods: {
		
		loadKnowledgeDetail() {
			// 这里应该根据knowledgeId从服务器或本地数据加载详细信息
			// 模拟数据加载
			const knowledgeData = this.getKnowledgeById(this.knowledgeId);
			if (knowledgeData) {
				this.knowledgeDetail = { ...knowledgeData };
				// 增加阅读次数
				this.knowledgeDetail.readCount += 1;
			}
		},

		getKnowledgeById(id) {
			// 模拟从数据源获取知识详情
			const allKnowledge = [
				{
					id: 1,
					title: '猫咪日常饮食指南',
					category: '饮食',
					readCount: 1256,
					content: `
						<p style="margin-bottom: 16px; line-height: 1.6; color: #333;">猫咪的健康饮食是保证其长寿和活力的关键因素。作为肉食动物，猫咪对蛋白质的需求量很高，同时也需要适量的脂肪和少量的碳水化合物。</p>

						<h3 style="margin: 24px 0 16px 0; color: #FF8A80; font-size: 18px; font-weight: 600;">营养需求</h3>
						<p style="margin-bottom: 16px; line-height: 1.6; color: #333;">成年猫咪每天需要的营养成分包括：</p>
						<ul style="margin-bottom: 16px; padding-left: 20px; color: #333;">
							<li style="margin-bottom: 8px;">蛋白质：26-30%</li>
							<li style="margin-bottom: 8px;">脂肪：9-15%</li>
							<li style="margin-bottom: 8px;">碳水化合物：不超过10%</li>
							<li style="margin-bottom: 8px;">水分：充足的饮水</li>
						</ul>

						<h3 style="margin: 24px 0 16px 0; color: #FF8A80; font-size: 18px; font-weight: 600;">喂食建议</h3>
						<p style="margin-bottom: 16px; line-height: 1.6; color: #333;">建议采用定时定量的喂食方式，成年猫咪每天喂食2-3次，幼猫需要更频繁的喂食。选择高质量的猫粮，避免给猫咪喂食人类食物。</p>

						<h3 style="margin: 24px 0 16px 0; color: #FF8A80; font-size: 18px; font-weight: 600;">注意事项</h3>
						<p style="margin-bottom: 16px; line-height: 1.6; color: #333;">避免给猫咪喂食巧克力、洋葱、大蒜等对猫咪有害的食物。保持食物和水的新鲜，定期清洁食具。</p>
					`
				},
				{
					id: 2,
					title: '猫咪健康体检指南',
					category: '健康',
					readCount: 892,
					content: `
						<p style="margin-bottom: 16px; line-height: 1.6; color: #333;">定期体检是维护猫咪健康的重要措施，可以及早发现和预防疾病。</p>
						<h3 style="margin: 24px 0 16px 0; color: #FF8A80; font-size: 18px; font-weight: 600;">体检频率</h3>
						<p style="margin-bottom: 16px; line-height: 1.6; color: #333;">幼猫建议每3个月体检一次，成年猫每6个月一次，老年猫每3个月一次。</p>
					`
				}
			];
			return allKnowledge.find(item => item.id == id);
		},



		checkFavoriteStatus() {
			// 检查当前知识是否已收藏
			// 这里应该从本地存储或服务器获取收藏状态
			const favorites = uni.getStorageSync('knowledge_favorites') || [];
			this.isFavorited = favorites.includes(this.knowledgeId);
		},
		
		toggleFavorite() {
			this.isFavorited = !this.isFavorited;

			// 更新本地存储的收藏列表
			let favorites = uni.getStorageSync('knowledge_favorites') || [];
			if (this.isFavorited) {
				if (!favorites.includes(this.knowledgeId)) {
					favorites.push(this.knowledgeId);
				}
			} else {
				favorites = favorites.filter(id => id !== this.knowledgeId);
			}
			uni.setStorageSync('knowledge_favorites', favorites);

			uni.showToast({
				title: this.isFavorited ? '已收藏' : '已取消收藏',
				icon: 'none'
			});
		},
		
		shareKnowledge() {
			uni.showActionSheet({
				itemList: ['分享到微信', '分享到朋友圈', '复制链接'],
				success: (res) => {
					uni.showToast({
						title: '分享功能开发中',
						icon: 'none'
					});
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.knowledge-detail-container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
}



/* 知识内容卡片 */
.content-card {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	border-radius: 24rpx;
	padding: 32rpx;
	box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
	border: 1rpx solid rgba(255, 255, 255, 0.3);
	margin-bottom: 40rpx;
	flex: 1;
	overflow-y: auto;
}

.knowledge-header {
	margin-bottom: 32rpx;
}

.title-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 20rpx;
}

.knowledge-title {
	font-size: 40rpx;
	font-weight: 700;
	color: #FF8A80;
	flex: 1;
	line-height: 1.3;
	margin-right: 20rpx;
}

.header-actions {
	display: flex;
	gap: 12rpx;
	flex-shrink: 0;
}

.action-button {
	width: 56rpx;
	height: 56rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.8);
	transition: all 0.3s ease;

	&:active {
		background: rgba(255, 138, 128, 0.1);
		transform: scale(0.95);
	}
}

.knowledge-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.category-tag {
	background: rgba(255, 138, 128, 0.1);
	border: 2rpx solid rgba(255, 138, 128, 0.3);
	border-radius: 20rpx;
	padding: 12rpx 20rpx;
	
	&.small {
		padding: 8rpx 16rpx;
		border-radius: 16rpx;
	}
	
	.tag-text {
		font-size: 26rpx;
		color: #FF8A80;
		font-weight: 500;
	}
}

.read-count {
	font-size: 26rpx;
	color: #999;
}

.knowledge-content {
	line-height: 1.6;
	color: #333;
}



/* 响应式设计 */
@media (max-width: 375px) {
	.knowledge-title {
		font-size: 36rpx;
	}
	
	.content-card {
		padding: 24rpx;
	}
	
	.related-item {
		padding: 20rpx;
	}
}
</style>
