<template>
	<un-pages
		:show-nav-bar="true"
		nav-bar-title="帮助中心"
		:show-back="true"
		:show-tab-bar="false"
	>
		<view class="help-container">
			<!-- 搜索框 -->
			<view class="search-section">
				<view class="search-box">
					<uni-icons type="search" size="18" color="#999"></uni-icons>
					<input
						class="search-input"
						type="text"
						placeholder="搜索问题关键词"
						v-model="searchKeyword"
						@input="handleSearch"
						placeholder-style="color: #999; font-size: 28rpx;"
					/>
					<view v-if="searchKeyword" class="clear-btn" @tap="clearSearch">
						<uni-icons type="clear" size="16" color="#999"></uni-icons>
					</view>
				</view>
			</view>

			<!-- 分类标签 -->
			<view class="category-section" v-if="!searchKeyword">
				<scroll-view scroll-x class="category-scroll" show-scrollbar="false">
					<view class="category-list">
						<view
							class="category-item"
							:class="{ active: activeCategory === item.value }"
							v-for="item in categoryList"
							:key="item.value"
							@tap="selectCategory(item.value)"
						>
							<text class="category-text">{{ item.label }}</text>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 问题列表 -->
			<view class="faq-section">
				<view class="faq-list" v-if="filteredQuestions.length > 0">
					<view
						class="faq-item"
						v-for="(item, index) in filteredQuestions"
						:key="index"
						animation="fadeInUp"
						:style="{ 'animation-delay': index * 0.1 + 's' }"
					>
						<view class="faq-question" @tap="toggleAnswer(index)">
							<text class="question-text">{{ item.question }}</text>
							<uni-icons
								:type="item.expanded ? 'up' : 'down'"
								size="16"
								:color="item.expanded ? '#667eea' : '#ccc'"
								class="arrow-icon"
							></uni-icons>
						</view>
						<view class="faq-answer" :class="{ expanded: item.expanded }">
							<text class="answer-text">{{ item.answer }}</text>
						</view>
					</view>
				</view>
				<view class="empty-state" v-else>
					<text class="empty-icon">🔍</text>
					<text class="empty-text">暂无相关问题</text>
				</view>
			</view>

			<!-- 底部反馈入口 -->
			<view class="feedback-section">
				<view class="feedback-card" @tap="goToFeedback">
					<view class="feedback-left">
						<view class="feedback-icon-wrapper">
							<uni-icons type="chat" size="24" color="#fff"></uni-icons>
						</view>
						<view class="feedback-info">
							<text class="feedback-title">问题反馈</text>
							<text class="feedback-desc">遇到问题？告诉我们</text>
						</view>
					</view>
					<uni-icons type="right" size="18" color="#ccc"></uni-icons>
				</view>
			</view>

			<!-- 联系方式 -->
			<view class="contact-section">
				<view class="contact-item">
					<uni-icons type="email" size="20" color="#667eea"></uni-icons>
					<text class="contact-label">客服邮箱</text>
					<text class="contact-value">support@familyaccount.com</text>
				</view>
				<view class="contact-item">
					<uni-icons type="phone" size="20" color="#667eea"></uni-icons>
					<text class="contact-label">客服电话</text>
					<text class="contact-value">400-XXX-XXXX</text>
				</view>
			</view>
		</view>
	</un-pages>
</template>

<script>
export default {
	data() {
		return {
			searchKeyword: '',
			activeCategory: 'all',
			categoryList: [
				{ label: '全部', value: 'all' },
				{ label: '账户相关', value: 'account' },
				{ label: '功能使用', value: 'function' },
				{ label: '家庭共享', value: 'family' },
				{ label: '数据统计', value: 'statistics' },
				{ label: '问题反馈', value: 'feedback' }
			],
			questions: [
				{
					question: '如何注册账号？',
					answer: '点击首页的"注册"按钮，输入用户名、密码和确认密码，即可快速完成注册。注册后可使用手机号或邮箱登录。',
					category: 'account',
					expanded: false
				},
				{
					question: '忘记密码怎么办？',
					answer: '在登录页面点击"忘记密码"按钮，通过注册时的手机号或邮箱验证后，可设置新密码。',
					category: 'account',
					expanded: false
				},
				{
					question: '如何添加一笔账单？',
					answer: '点击首页底部的"+"按钮，选择收入或支出，填写金额、分类、日期和备注，点击保存即可完成记账。',
					category: 'function',
					expanded: false
				},
				{
					question: '如何修改或删除账单？',
					answer: '在账单列表中点击需要操作的账单，进入详情页面后可以进行编辑或删除操作。已删除的账单无法恢复。',
					category: 'function',
					expanded: false
				},
				{
					question: '如何创建家庭？',
					answer: '进入"家庭"页面，点击"创建家庭"，设置家庭名称后即可创建。创建者自动成为家主，可以邀请家庭成员。',
					category: 'family',
					expanded: false
				},
				{
					question: '如何加入家庭？',
					answer: '向家主索要家庭邀请码，在"家庭"页面点击"加入家庭"，输入邀请码即可加入。一个人只能加入一个家庭。',
					category: 'family',
					expanded: false
				},
				{
					question: '家主如何管理家庭成员？',
					answer: '家主可以在家庭页面查看所有成员，点击成员后的管理按钮可以移除成员。被移除的成员将无法查看该家庭的账单数据。',
					category: 'family',
					expanded: false
				},
				{
					question: '如何查看收支统计？',
					answer: '进入"统计"页面，可以选择查看"个人"或"家庭"的收支数据，支持按日、周、月、年进行统计，并可查看分类统计和趋势图表。',
					category: 'statistics',
					expanded: false
				},
				{
					question: '如何切换查看个人和家庭数据？',
					answer: '在账单列表和统计页面，顶部有"个人"和"家庭"切换按钮，点击即可在个人数据和家庭数据之间切换。',
					category: 'function',
					expanded: false
				},
				{
					question: '如何导出数据？',
					answer: '在统计页面点击"导出"按钮，可以选择导出Excel或CSV格式的报表，支持导出指定时间范围内的账单数据。',
					category: 'function',
					expanded: false
				},
				{
					question: '如何修改个人资料？',
					answer: '进入"我的"页面，点击个人设置，在资料编辑页面可以修改头像、昵称、邮箱等信息。用户名注册后不可修改。',
					category: 'account',
					expanded: false
				},
				{
					question: '数据会被安全保存吗？',
					answer: '是的，您的所有数据都经过加密存储，并定期备份。我们严格遵守隐私政策，不会泄露您的个人财务信息。',
					category: 'account',
					expanded: false
				},
				{
					question: '如何提交问题反馈？',
					answer: '在帮助中心底部点击"问题反馈"卡片，详细描述您遇到的问题，我们会尽快回复并处理您的反馈。',
					category: 'feedback',
					expanded: false
				},
				{
					question: '如何联系我们？',
					answer: '您可以通过客服邮箱 support@familyaccount.com 或客服电话 400-XXX-XXXX 联系我们，我们的工作时间为周一至周五 9:00-18:00。',
					category: 'feedback',
					expanded: false
				}
			]
		}
	},

	computed: {
		filteredQuestions() {
			let result = this.questions

			// 按分类筛选
			if (this.activeCategory !== 'all') {
				result = result.filter(item => item.category === this.activeCategory)
			}

			// 按关键词搜索
			if (this.searchKeyword) {
				const keyword = this.searchKeyword.toLowerCase()
				result = result.filter(item =>
					item.question.toLowerCase().includes(keyword) ||
					item.answer.toLowerCase().includes(keyword)
				)
			}

			return result
		}
	},

	methods: {
		// 选择分类
		selectCategory(value) {
			this.activeCategory = value
		},

		// 搜索处理
		handleSearch() {
			// 搜索时自动显示所有分类的结果
		},

		// 清空搜索
		clearSearch() {
			this.searchKeyword = ''
		},

		// 展开/收起答案
		toggleAnswer(index) {
			this.filteredQuestions[index].expanded = !this.filteredQuestions[index].expanded
		},

		// 跳转到反馈页面
		goToFeedback() {
			uni.navigateTo({
				url: '/pages/ucenter/feedback/index'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.help-container {
	min-height: 100vh;
	background: #F8F8F8;
	padding-bottom: 40rpx;
}

.search-section {
	padding: 30rpx;
	background: #fff;
	animation: fadeInDown 0.6s ease-out;

	.search-box {
		display: flex;
		align-items: center;
		background: #F5F5F5;
		border-radius: 48rpx;
		padding: 20rpx 30rpx;

		.search-input {
			flex: 1;
			margin-left: 16rpx;
			margin-right: 16rpx;
			font-size: 28rpx;
			color: #333;
		}

		.clear-btn {
			display: flex;
			align-items: center;
		}
	}
}

.category-section {
	padding: 20rpx 30rpx 0;
	animation: fadeInDown 0.6s ease-out 0.1s both;

	.category-scroll {
		white-space: nowrap;

		.category-list {
			display: inline-flex;
			padding-bottom: 20rpx;

			.category-item {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				padding: 16rpx 32rpx;
				margin-right: 16rpx;
				background: #fff;
				border-radius: 48rpx;
				font-size: 26rpx;
				color: #666;
				transition: all 0.3s ease;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);

				&.active {
					background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
					color: #fff;
					box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.35);
				}

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

				.category-text {
					white-space: nowrap;
				}
			}
		}
	}
}

.faq-section {
	margin: 20rpx 30rpx;
	animation: fadeInUp 0.6s ease-out 0.2s both;

	.faq-list {
		.faq-item {
			background: #fff;
			border-radius: 24rpx;
			margin-bottom: 20rpx;
			overflow: hidden;
			box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
			transition: transform 0.3s ease, box-shadow 0.3s ease;

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

			.faq-question {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 32rpx 30rpx;
				transition: background 0.3s ease;

				&:active {
					background: #f8f8f8;
				}

				.question-text {
					flex: 1;
					font-size: 30rpx;
					color: #333;
					font-weight: 500;
					line-height: 1.5;
					margin-right: 20rpx;
				}

				.arrow-icon {
					flex-shrink: 0;
					transition: transform 0.3s ease;
				}
			}

			.faq-answer {
				max-height: 0;
				overflow: hidden;
				transition: max-height 0.4s ease, padding 0.4s ease;
				background: #FAFAFA;

				.answer-text {
					display: block;
					padding: 0 30rpx;
					font-size: 28rpx;
					color: #666;
					line-height: 1.8;
					opacity: 0;
					transform: translateY(-10rpx);
					transition: opacity 0.3s ease, transform 0.3s ease;
				}

				&.expanded {
					max-height: 500rpx;
					padding: 20rpx 0 32rpx;

					.answer-text {
						opacity: 1;
						transform: translateY(0);
					}
				}
			}
		}
	}

	.empty-state {
		background: #fff;
		border-radius: 24rpx;
		padding: 120rpx 40rpx;
		text-align: center;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);

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

		.empty-text {
			display: block;
			font-size: 28rpx;
			color: #999;
		}
	}
}

.feedback-section {
	margin: 30rpx;
	animation: fadeInUp 0.6s ease-out 0.3s both;

	.feedback-card {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 24rpx;
		padding: 30rpx;
		box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.35);
		transition: transform 0.3s ease;

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

		.feedback-left {
			display: flex;
			align-items: center;

			.feedback-icon-wrapper {
				width: 72rpx;
				height: 72rpx;
				background: rgba(255, 255, 255, 0.25);
				border-radius: 18rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 24rpx;
				border: 2rpx solid rgba(255, 255, 255, 0.3);
				backdrop-filter: blur(10rpx);
			}

			.feedback-info {
				display: flex;
				flex-direction: column;

				.feedback-title {
					font-size: 30rpx;
					color: #fff;
					font-weight: bold;
					margin-bottom: 6rpx;
				}

				.feedback-desc {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.85);
				}
			}
		}
	}
}

.contact-section {
	margin: 30rpx;
	background: #fff;
	border-radius: 24rpx;
	overflow: hidden;
	box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
	animation: fadeInUp 0.6s ease-out 0.4s both;

	.contact-item {
		display: flex;
		align-items: center;
		padding: 28rpx 30rpx;
		border-bottom: 1rpx solid #f5f5f5;

		&:last-child {
			border-bottom: none;
		}

		.contact-label {
			font-size: 28rpx;
			color: #666;
			margin-left: 16rpx;
			margin-right: 20rpx;
			flex-shrink: 0;
		}

		.contact-value {
			flex: 1;
			font-size: 26rpx;
			color: #333;
			font-weight: 500;
		}
	}
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-30rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
</style>
