<template>
	<view class="knowledge-container">
		<u-navbar title="宠物知识库" left-icon="arrow-left" @left-click="goBack"></u-navbar>
		
		<u-search placeholder="搜索知识" v-model="searchKeyword" @search="searchKnowledge" @custom="searchKnowledge"></u-search>
		
		<view class="category-tabs">
			<u-tabs :list="categories" @click="switchCategory" :current="currentCategory"></u-tabs>
		</view>
		
		<scroll-view class="knowledge-list" scroll-y="true">
			<u-card v-for="item in filteredKnowledge" :key="item.id" :margin="20" :padding="20" @click="viewDetail(item)">
				<view class="knowledge-item">
					<u-text :text="item.title" type="primary" size="16" bold></u-text>
					<u-text :text="item.summary" type="info" size="14" margin="10rpx 0"></u-text>
					<view class="knowledge-meta">
						<u-tag :text="item.category" type="info" size="mini"></u-tag>
						<u-text :text="item.readCount + '次阅读'" type="tips" size="12"></u-text>
					</view>
				</view>
			</u-card>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchKeyword: '',
			currentCategory: 0,
			categories: [
				{ name: '全部' },
				{ name: '饮食' },
				{ name: '健康' },
				{ name: '训练' },
				{ name: '护理' }
			],
			knowledgeList: [
				{
					id: 1,
					title: '猫咪日常饮食指南',
					summary: '了解猫咪的营养需求，选择合适的猫粮和喂食方式',
					category: '饮食',
					readCount: 1234,
					content: '详细的猫咪饮食指南内容...'
				},
				{
					id: 2,
					title: '狗狗疫苗接种时间表',
					summary: '幼犬和成犬的疫苗接种计划和注意事项',
					category: '健康',
					readCount: 856,
					content: '疫苗接种详细说明...'
				},
				{
					id: 3,
					title: '宠物基础训练方法',
					summary: '如何训练宠物基本指令和良好习惯',
					category: '训练',
					readCount: 642,
					content: '训练方法详细介绍...'
				}
			]
		}
	},
	computed: {
		filteredKnowledge() {
			let result = this.knowledgeList
			
			// 分类筛选
			if (this.currentCategory > 0) {
				const categoryName = this.categories[this.currentCategory].name
				result = result.filter(item => item.category === categoryName)
			}
			
			// 搜索筛选
			if (this.searchKeyword) {
				result = result.filter(item => 
					item.title.includes(this.searchKeyword) || 
					item.summary.includes(this.searchKeyword)
				)
			}
			
			return result
		}
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		
		switchCategory(item) {
			this.currentCategory = item.index
		},
		
		searchKnowledge() {
			// 搜索逻辑已在computed中处理
		},
		
		viewDetail(item) {
			uni.navigateTo({
				url: `/pages/assistant/knowledge-detail?id=${item.id}`
			})
		}
	}
}
</script>

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

.category-tabs {
	background-color: white;
	padding: 20rpx 0;
}

.knowledge-list {
	height: calc(100vh - 300rpx);
}

.knowledge-item {
	.knowledge-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}
}
</style>
