<template>
	<view class="pet-records-container">
		<!-- 头部操作栏 -->
		<view class="header-section">
			<view class="header-info">
				<text class="pet-name">{{ petName }}的记录</text>
				<text class="record-count">共{{ totalRecords }}条记录</text>
			</view>
			<view class="header-actions">
				<view class="search-btn" @click="toggleSearch">
					<text class="search-icon">🔍</text>
				</view>
				<view class="add-btn" @click="addRecord">
					<text class="add-text">+ 添加</text>
				</view>
			</view>
		</view>

		<!-- 搜索栏 -->
		<view class="search-section" v-if="showSearch">
			<view class="search-input-wrapper">
				<input
					class="search-input"
					v-model="searchKeyword"
					placeholder="搜索记录内容、标签..."
					@input="onSearchInput"
					@confirm="performSearch"
				/>
				<view class="search-clear" v-if="searchKeyword" @click="clearSearch">
					<text class="clear-icon">✕</text>
				</view>
			</view>
		</view>

		<!-- 分类筛选栏 -->
		<view class="filter-section">
			<view class="primary-filters">
				<view
					class="filter-tab"
					:class="{ active: activeCategory === 'all' }"
					@click="switchCategory('all')"
				>
					<text class="tab-text">全部</text>
				</view>
				<view
					class="filter-tab"
					:class="{ active: activeCategory === category.key }"
					v-for="category in primaryCategories"
					:key="category.key"
					@click="switchCategory(category.key)"
				>
					<text class="tab-icon">{{ category.icon }}</text>
					<text class="tab-text">{{ category.name }}</text>
				</view>
			</view>

			<!-- 二级分类筛选 -->
			<view class="secondary-filters" v-if="activeCategory !== 'all' && subCategories.length > 0">
				<view
					class="sub-filter-tab"
					:class="{ active: activeSubCategory === 'all' }"
					@click="switchSubCategory('all')"
				>
					<text class="sub-tab-text">全部</text>
				</view>
				<view
					class="sub-filter-tab"
					:class="{ active: activeSubCategory === subCategory.key }"
					v-for="subCategory in subCategories"
					:key="subCategory.key"
					@click="switchSubCategory(subCategory.key)"
				>
					<text class="sub-tab-icon">{{ subCategory.icon }}</text>
					<text class="sub-tab-text">{{ subCategory.name }}</text>
				</view>
			</view>
		</view>

		<!-- 排序选择 -->
		<view class="sort-section">
			<view class="sort-options">
				<view
					class="sort-option"
					:class="{ active: sortBy === 'time' }"
					@click="changeSortBy('time')"
				>
					<text class="sort-text">按时间</text>
				</view>
				<view
					class="sort-option"
					:class="{ active: sortBy === 'category' }"
					@click="changeSortBy('category')"
				>
					<text class="sort-text">按分类</text>
				</view>
				<view
					class="sort-option"
					:class="{ active: sortBy === 'popularity' }"
					@click="changeSortBy('popularity')"
				>
					<text class="sort-text">按热度</text>
				</view>
			</view>
		</view>

		<!-- 记录列表 -->
		<scroll-view
			class="records-scroll"
			scroll-y
			@scrolltolower="loadMoreRecords"
			@refresherrefresh="onRefresh"
			:refresher-enabled="true"
			:refresher-triggered="refreshing"
		>
			<view class="records-list">
				<!-- 记录项 -->
				<view
					class="record-item"
					v-for="record in displayRecords"
					:key="record.id"
					@click="viewRecordDetail(record)"
				>
					<view class="record-header">
						<view class="record-category">
							<text class="category-icon">{{ getCategoryIcon(record.category, record.subCategory) }}</text>
							<text class="category-name">{{ getCategoryName(record.category, record.subCategory) }}</text>
						</view>
						<view class="record-time">
							<text class="time-text">{{ formatTime(record.recordTime) }}</text>
						</view>
					</view>

					<view class="record-content">
						<text class="record-title">{{ record.title }}</text>
						<text class="record-text">{{ record.content }}</text>
					</view>

					<!-- 标签 -->
					<view class="record-tags" v-if="record.tags && record.tags.length > 0">
						<view
							class="tag-item"
							v-for="tag in record.tags.slice(0, 3)"
							:key="tag"
						>
							<text class="tag-text"># {{ tag }}</text>
						</view>
						<view class="more-tags" v-if="record.tags.length > 3">
							<text class="more-text">+{{ record.tags.length - 3 }}</text>
						</view>
					</view>

					<!-- 图片预览 -->
					<view class="record-photos" v-if="record.photos && record.photos.length > 0">
						<view
							class="photo-item"
							v-for="(photo, index) in record.photos.slice(0, 3)"
							:key="index"
						>
							<image class="photo-image" :src="photo" mode="aspectFill" />
						</view>
						<view class="more-photos" v-if="record.photos.length > 3">
							<text class="more-photos-text">+{{ record.photos.length - 3 }}</text>
						</view>
					</view>

					<!-- 社交数据 -->
					<view class="record-social">
						<view class="social-item">
							<text class="social-icon">👁️</text>
							<text class="social-count">{{ getSocialData(record.id).views }}</text>
						</view>
						<view class="social-item">
							<text class="social-icon">❤️</text>
							<text class="social-count">{{ getSocialData(record.id).likes }}</text>
						</view>
						<view class="social-item">
							<text class="social-icon">💬</text>
							<text class="social-count">{{ getSocialData(record.id).comments.length }}</text>
						</view>
						<view class="share-level">
							<text class="share-icon">{{ getShareIcon(record.shareLevel) }}</text>
						</view>
					</view>
				</view>

				<!-- 加载更多 -->
				<view class="load-more" v-if="hasMoreRecords && !refreshing">
					<view class="loading-indicator" v-if="loadingMore">
						<text class="loading-text">加载中...</text>
					</view>
					<view class="load-more-tip" v-else>
						<text class="tip-text">上拉加载更多</text>
					</view>
				</view>

				<!-- 空状态 -->
				<view class="empty-state" v-if="displayRecords.length === 0 && !loadingMore && !refreshing">
					<text class="empty-icon">📝</text>
					<text class="empty-title">{{ getEmptyTitle() }}</text>
					<text class="empty-subtitle">{{ getEmptySubtitle() }}</text>
					<view class="empty-action" @click="addRecord">
						<text class="action-text">添加第一条记录</text>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 浮动添加按钮 -->
		<view class="fab-button" @click="addRecord">
			<text class="fab-icon">+</text>
		</view>
	</view>
</template>

<script>
import recordManager from '@/utils/recordManager.js'

export default {
	data() {
		return {
			petId: '',
			petName: '',

			// 记录数据
			allRecords: [],
			displayRecords: [],
			totalRecords: 0,

			// 搜索功能
			showSearch: false,
			searchKeyword: '',
			searchResults: [],

			// 分类筛选
			activeCategory: 'all',
			activeSubCategory: 'all',
			primaryCategories: [
				{ key: 'health', name: '健康', icon: '🏥' },
				{ key: 'care', name: '护理', icon: '🛁' },
				{ key: 'behavior', name: '行为', icon: '🎾' },
				{ key: 'daily', name: '日常', icon: '📝' },
				{ key: 'expense', name: '消费', icon: '💰' }
			],
			subCategories: [],

			// 排序
			sortBy: 'time', // time, category, popularity

			// 分页和加载
			page: 1,
			pageSize: 10,
			hasMoreRecords: true,
			loadingMore: false,
			refreshing: false,

			// 社交数据缓存
			socialDataCache: {}
		}
	},

	onLoad(options) {
		this.petId = options.petId || ''
		this.petName = options.petName || '宠物'
		this.loadRecords()
	},

	methods: {
		loadRecords() {
			// 获取所有记录
			this.allRecords = recordManager.getRecords(this.petId)
			this.totalRecords = this.allRecords.length

			// 初始化社交数据缓存
			this.initSocialDataCache()

			// 应用筛选和排序
			this.applyFiltersAndSort()
		},

		initSocialDataCache() {
			this.socialDataCache = {}
			this.allRecords.forEach(record => {
				this.socialDataCache[record.id] = recordManager.getSocialData(record.id)
			})
		},

		applyFiltersAndSort() {
			let filteredRecords = [...this.allRecords]

			// 应用搜索筛选
			if (this.searchKeyword) {
				filteredRecords = recordManager.searchRecords(this.petId, this.searchKeyword)
			}

			// 应用分类筛选
			if (this.activeCategory !== 'all') {
				const subCategory = this.activeSubCategory !== 'all' ? this.activeSubCategory : null
				filteredRecords = filteredRecords.filter(record => {
					if (subCategory) {
						return record.category === this.activeCategory && record.subCategory === subCategory
					} else {
						return record.category === this.activeCategory
					}
				})
			}

			// 应用排序
			this.sortRecords(filteredRecords)

			// 分页显示
			this.displayRecords = filteredRecords.slice(0, this.page * this.pageSize)
			this.hasMoreRecords = filteredRecords.length > this.displayRecords.length
		},

		sortRecords(records) {
			switch (this.sortBy) {
				case 'time':
					records.sort((a, b) => new Date(b.recordTime) - new Date(a.recordTime))
					break
				case 'category':
					records.sort((a, b) => {
						if (a.category !== b.category) {
							return a.category.localeCompare(b.category)
						}
						return new Date(b.recordTime) - new Date(a.recordTime)
					})
					break
				case 'popularity':
					records.sort((a, b) => {
						const aPopularity = this.getSocialData(a.id).likes + this.getSocialData(a.id).views
						const bPopularity = this.getSocialData(b.id).likes + this.getSocialData(b.id).views
						return bPopularity - aPopularity
					})
					break
			}
		},

		// 搜索功能
		toggleSearch() {
			this.showSearch = !this.showSearch
			if (!this.showSearch) {
				this.clearSearch()
			}
		},

		onSearchInput() {
			// 实时搜索
			this.performSearch()
		},

		performSearch() {
			this.page = 1
			this.applyFiltersAndSort()
		},

		clearSearch() {
			this.searchKeyword = ''
			this.performSearch()
		},

		// 分类筛选
		switchCategory(category) {
			this.activeCategory = category
			this.activeSubCategory = 'all'
			this.page = 1

			// 更新二级分类选项
			this.updateSubCategories()

			this.applyFiltersAndSort()
		},

		switchSubCategory(subCategory) {
			this.activeSubCategory = subCategory
			this.page = 1
			this.applyFiltersAndSort()
		},

		updateSubCategories() {
			if (this.activeCategory === 'all') {
				this.subCategories = []
				return
			}

			const categoryConfig = recordManager.categories[this.activeCategory]
			if (categoryConfig && categoryConfig.subCategories) {
				this.subCategories = Object.keys(categoryConfig.subCategories).map(key => ({
					key: key,
					name: categoryConfig.subCategories[key].name,
					icon: categoryConfig.subCategories[key].icon
				}))
			} else {
				this.subCategories = []
			}
		},

		// 排序
		changeSortBy(sortType) {
			this.sortBy = sortType
			this.page = 1
			this.applyFiltersAndSort()
		},

		// 加载更多
		loadMoreRecords() {
			if (this.hasMoreRecords && !this.loadingMore) {
				this.loadingMore = true

				setTimeout(() => {
					this.page += 1
					this.applyFiltersAndSort()
					this.loadingMore = false
				}, 500)
			}
		},

		// 下拉刷新
		onRefresh() {
			this.refreshing = true

			setTimeout(() => {
				this.loadRecords()
				this.refreshing = false
			}, 1000)
		},

		// 获取分类信息
		getCategoryIcon(category, subCategory = null) {
			const categoryInfo = recordManager.getCategoryInfo(category, subCategory)
			return categoryInfo.icon
		},

		getCategoryName(category, subCategory = null) {
			const categoryInfo = recordManager.getCategoryInfo(category, subCategory)
			return categoryInfo.name
		},

		getCategoryColor(category) {
			const categoryInfo = recordManager.getCategoryInfo(category)
			return categoryInfo.color
		},

		// 获取社交数据
		getSocialData(recordId) {
			return this.socialDataCache[recordId] || {
				likes: 0,
				views: 0,
				comments: []
			}
		},

		// 分享级别图标
		getShareIcon(shareLevel) {
			const icons = {
				'public': '🌍',
				'family': '👨‍👩‍👧‍👦',
				'private': '🔒'
			}
			return icons[shareLevel] || '👨‍👩‍👧‍👦'
		},

		// 时间格式化
		formatTime(timeStr) {
			if (!timeStr) return ''

			const time = new Date(timeStr)
			const now = new Date()
			const diff = now - time

			const minutes = Math.floor(diff / (1000 * 60))
			const hours = Math.floor(diff / (1000 * 60 * 60))
			const days = Math.floor(diff / (1000 * 60 * 60 * 24))

			if (minutes < 60) {
				return minutes <= 0 ? '刚刚' : `${minutes}分钟前`
			} else if (hours < 24) {
				return `${hours}小时前`
			} else if (days < 7) {
				return `${days}天前`
			} else {
				return `${time.getMonth() + 1}-${time.getDate()}`
			}
		},

		// 空状态文案
		getEmptyTitle() {
			if (this.searchKeyword) {
				return '没有找到相关记录'
			} else if (this.activeCategory !== 'all') {
				const categoryName = this.getCategoryName(this.activeCategory)
				return `暂无${categoryName}记录`
			} else {
				return '还没有记录哦'
			}
		},

		getEmptySubtitle() {
			if (this.searchKeyword) {
				return '试试其他关键词或清空搜索条件'
			} else {
				return '记录宠物的美好时光，从第一条开始'
			}
		},

		// 页面跳转
		viewRecordDetail(record) {
			// 增加浏览量
			recordManager.incrementViews(record.id)
			this.socialDataCache[record.id].views += 1

			uni.navigateTo({
				url: `/pages/pets/record-detail?recordId=${record.id}&petId=${this.petId}&petName=${this.petName}`
			})
		},

		addRecord() {
			uni.navigateTo({
				url: `/pages/pets/add-record?petId=${this.petId}&petName=${this.petName}`
			})
		}
	}
}
</script>

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


/* 头部区域 */
.header-section {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	padding: 32rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);

	.header-info {
		.pet-name {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			display: block;
			margin-bottom: 8rpx;
		}

		.record-count {
			font-size: 22rpx;
			color: #999999;
			display: block;
		}
	}

	.header-actions {
		display: flex;
		align-items: center;
		gap: 16rpx;

		.search-btn {
			width: 64rpx;
			height: 64rpx;
			background: rgba(255, 138, 128, 0.1);
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;

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

			.search-icon {
				font-size: 24rpx;
			}
		}

		.add-btn {
			background: linear-gradient(135deg, #FF8A80, #FFB6C1);
			border-radius: 16rpx;
			padding: 16rpx 24rpx;
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.95);
			}

			.add-text {
				font-size: 24rpx;
				color: white;
				font-weight: 500;
			}
		}
	}
}

/* 搜索区域 */
.search-section {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	padding: 0 32rpx 24rpx 32rpx;
	border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);

	.search-input-wrapper {
		position: relative;
		background: rgba(255, 138, 128, 0.05);
		border-radius: 20rpx;
		padding: 0 20rpx;

		.search-input {
			width: 100%;
			height: 72rpx;
			font-size: 24rpx;
			color: #333333;
			background: transparent;
			border: none;
			outline: none;
		}

		.search-clear {
			position: absolute;
			right: 20rpx;
			top: 50%;
			transform: translateY(-50%);
			width: 32rpx;
			height: 32rpx;
			background: #CCCCCC;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;

			.clear-icon {
				font-size: 16rpx;
				color: white;
			}
		}
	}
}

/* 筛选区域 */
.filter-section {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	padding: 24rpx 32rpx;
	border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);

	.primary-filters {
		display: flex;
		gap: 12rpx;
		margin-bottom: 20rpx;
		overflow-x: auto;

		.filter-tab {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			gap: 8rpx;
			padding: 12rpx 20rpx;
			border-radius: 20rpx;
			background: rgba(255, 138, 128, 0.1);
			transition: all 0.3s ease;

			&.active {
				background: #FF8A80;

				.tab-text {
					color: white;
				}

				.tab-icon {
					color: white;
				}
			}

			&:active {
				transform: scale(0.95);
			}

			.tab-icon {
				font-size: 20rpx;
			}

			.tab-text {
				font-size: 22rpx;
				font-weight: 500;
				color: #666666;
			}
		}
	}

	.secondary-filters {
		display: flex;
		gap: 8rpx;
		overflow-x: auto;

		.sub-filter-tab {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			gap: 6rpx;
			padding: 8rpx 16rpx;
			border-radius: 16rpx;
			background: rgba(255, 138, 128, 0.05);
			transition: all 0.3s ease;

			&.active {
				background: rgba(255, 138, 128, 0.2);

				.sub-tab-text {
					color: #FF8A80;
					font-weight: bold;
				}
			}

			&:active {
				transform: scale(0.95);
			}

			.sub-tab-icon {
				font-size: 16rpx;
			}

			.sub-tab-text {
				font-size: 20rpx;
				color: #666666;
			}
		}
	}
}

/* 排序区域 */
.sort-section {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	padding: 16rpx 32rpx;
	border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);

	.sort-options {
		display: flex;
		gap: 24rpx;

		.sort-option {
			padding: 8rpx 16rpx;
			border-radius: 12rpx;
			background: rgba(255, 138, 128, 0.05);
			transition: all 0.3s ease;

			&.active {
				background: rgba(255, 138, 128, 0.2);

				.sort-text {
					color: #FF8A80;
					font-weight: bold;
				}
			}

			&:active {
				transform: scale(0.95);
			}

			.sort-text {
				font-size: 20rpx;
				color: #666666;
			}
		}
	}
}

/* 记录列表区域 */
.records-scroll {
	height: calc(100vh - 400rpx);
	padding: 0 20rpx;
}

.records-list {
	padding-bottom: 120rpx;
}

.record-item {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	border-radius: 20rpx;
	padding: 24rpx;
	margin-bottom: 16rpx;
	box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.1);
	border: 1rpx solid rgba(255, 255, 255, 0.3);
	transition: all 0.3s ease;

	&:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 8rpx rgba(255, 138, 128, 0.2);
	}

	.record-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;

		.record-category {
			display: flex;
			align-items: center;
			gap: 8rpx;

			.category-icon {
				font-size: 20rpx;
			}

			.category-name {
				font-size: 22rpx;
				font-weight: 500;
				color: #666666;
			}
		}

		.record-time {
			.time-text {
				font-size: 20rpx;
				color: #999999;
			}
		}
	}

	.record-content {
		margin-bottom: 16rpx;

		.record-title {
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 8rpx;
			display: block;
		}

		.record-text {
			font-size: 24rpx;
			color: #666666;
			line-height: 1.6;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
			display: block;
		}
	}

	.record-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 8rpx;
		margin-bottom: 16rpx;

		.tag-item {
			background: rgba(255, 138, 128, 0.1);
			border-radius: 12rpx;
			padding: 4rpx 12rpx;

			.tag-text {
				font-size: 18rpx;
				color: #FF8A80;
			}
		}

		.more-tags {
			background: rgba(153, 153, 153, 0.1);
			border-radius: 12rpx;
			padding: 4rpx 12rpx;

			.more-text {
				font-size: 18rpx;
				color: #999999;
			}
		}
	}

	.record-photos {
		display: flex;
		gap: 8rpx;
		margin-bottom: 16rpx;

		.photo-item {
			width: 120rpx;
			height: 120rpx;
			border-radius: 12rpx;
			overflow: hidden;

			.photo-image {
				width: 100%;
				height: 100%;
			}
		}

		.more-photos {
			width: 120rpx;
			height: 120rpx;
			background: rgba(0, 0, 0, 0.1);
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.more-photos-text {
				font-size: 20rpx;
				color: #666666;
			}
		}
	}

	.record-social {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.social-item {
			display: flex;
			align-items: center;
			gap: 6rpx;

			.social-icon {
				font-size: 16rpx;
			}

			.social-count {
				font-size: 18rpx;
				color: #999999;
			}
		}

		.share-level {
			.share-icon {
				font-size: 16rpx;
			}
		}
	}
}

/* 加载更多和空状态 */
.load-more {
	text-align: center;
	padding: 40rpx 0;

	.loading-indicator {
		.loading-text {
			font-size: 24rpx;
			color: #999999;
		}
	}

	.load-more-tip {
		.tip-text {
			font-size: 24rpx;
			color: #CCCCCC;
		}
	}
}

.empty-state {
	text-align: center;
	padding: 120rpx 40rpx;

	.empty-icon {
		font-size: 120rpx;
		margin-bottom: 32rpx;
		display: block;
	}

	.empty-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 16rpx;
		display: block;
	}

	.empty-subtitle {
		font-size: 26rpx;
		color: #999999;
		margin-bottom: 40rpx;
		display: block;
		line-height: 1.5;
	}

	.empty-action {
		background: linear-gradient(135deg, #FF8A80, #FFB6C1);
		border-radius: 20rpx;
		padding: 16rpx 32rpx;
		display: inline-block;
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.95);
		}

		.action-text {
			font-size: 24rpx;
			color: white;
			font-weight: 500;
		}
	}
}

/* 浮动添加按钮 */
.fab-button {
	position: fixed;
	bottom: 120rpx;
	right: 40rpx;
	width: 112rpx;
	height: 112rpx;
	background: linear-gradient(135deg, #FF8A80, #FFB6C1);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 24rpx rgba(255, 138, 128, 0.3);
	z-index: 999;
	transition: all 0.3s ease;

	&:active {
		transform: scale(0.9);
	}

	.fab-icon {
		font-size: 40rpx;
		color: white;
		font-weight: bold;
	}
}
</style>


