<template>
	<view class="customer-service-container">
		<u-navbar title="客服中心" :background="{ background: '#458CF9' }" title-color="#FFFFFF"></u-navbar>
		
		<view class="content">
			<!-- 快速服务区域 -->
			<view class="quick-service">
				<view class="section-title">快速服务</view>
				<view class="service-grid">
					<view class="service-item" v-for="item in quickServices" :key="item.id" @click="handleServiceClick(item)">
						<view class="service-icon">
							<text class="icon">{{ item.icon }}</text>
						</view>
						<text class="service-name">{{ item.name }}</text>
					</view>
				</view>
			</view>

			<!-- 常见问题区域 -->
			<view class="faq-section">
				<view class="section-title">常见问题</view>
				
				<!-- 分类标签 -->
				<view class="category-tabs">
					<view 
						class="tab-item" 
						v-for="(tab, index) in categories" 
						:key="tab.id"
						:class="{ active: activeCategory === tab.id }"
						@click="switchCategory(tab.id)"
					>
						{{ tab.name }}
					</view>
				</view>

				<!-- 四列网格 -->
				<view class="grid-section">
					<view class="grid-container">
						<view 
							class="grid-item" 
							v-for="item in gridItems" 
							:key="item.id"
							@click="handleGridItemClick(item)"
						>
							<text class="grid-text">{{ item.title }}</text>
						</view>
					</view>
				</view>

				<!-- 问题列表 -->
				<view class="question-list">
					<view 
						class="question-item" 
						v-for="question in currentQuestions" 
						:key="question.id"
						@click="handleQuestionClick(question)"
					>
						<view class="question-content">
							<text class="question-text">{{ question.title }}</text>
							<u-icon name="arrow-right" color="#999" size="24"></u-icon>
						</view>
					</view>
				</view>
			</view>

			<!-- 人工客服区域 -->
			<view class="human-service">
				<!-- 输入框模式 -->
				<view class="input-mode" v-if="isInputMode">
					<view class="input-container">
						<u-input
							v-model="inputText"
							placeholder="请在这里输入文字"
							:border="false"
							:clearable="false"
							class="custom-input"
							:custom-style="{
								backgroundColor: '#fff',
								borderRadius: '44rpx',
								padding: '0 30rpx',
								height: '88rpx',
								fontSize: '28rpx'
							}"
						></u-input>
						<view class="switch-icon" @click="toggleInputMode">
							<u-icon name="chat" color="#458CF9" size="40"></u-icon>
						</view>
					</view>
					<u-button 
						class="send-btn"
						@click="handleSendMessage"
						:custom-style="{
							background: 'linear-gradient(270deg, #65A7FF 0%, #458CF9 100%)',
							color: '#fff',
							border: 'none',
							height: '60rpx',
							borderRadius: '30rpx',
							fontSize: '26rpx',
							fontWeight: '500',
							marginTop: '20rpx'
						}"
					>
						发送
					</u-button>
				</view>

				<!-- 按钮模式 -->
				<view class="button-mode" v-else>
					<view class="switch-icon" @click="toggleInputMode">
						<u-icon name="keyboard" color="#458CF9" size="40"></u-icon>
					</view>
					<u-button 
						class="consult-btn" 
						@click="handleHumanService"
						:custom-style="{
							background: 'linear-gradient(270deg, #65A7FF 0%, #458CF9 100%)',
							color: '#fff',
							border: 'none',
							height: '88rpx',
							borderRadius: '44rpx',
							fontSize: '32rpx',
							fontWeight: '500',
							flex: 1,
							marginLeft: '20rpx'
						}"
					>
						<u-icon name="server-fill" color="#fff" size="36" class="btn-icon"></u-icon>
						咨询人工客服
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

// 快速服务数据
const quickServices = ref([
	{ id: 1, name: '问题反馈', icon: '💬' },
	{ id: 2, name: '投资理财', icon: '💰' },
	{ id: 3, name: '项目咨询', icon: '📋' },
	{ id: 4, name: '余额查询', icon: '🏦' },
	{ id: 5, name: '催促发货', icon: '🚚' },
	{ id: 6, name: '退款', icon: '↩️' },
	{ id: 7, name: '购买咨询', icon: '🛒' }
]);

// 分类数据
const categories = ref([
	{ id: 'guess', name: '猜你想问' },
	{ id: 'hot', name: '热门活动' },
	{ id: 'intro', name: '商城介绍' },
	{ id: 'after-sale', name: '售后问题' }
]);

// 四列网格数据
const gridItems = ref([
	{ id: 1, title: '融豆获取' },
	{ id: 2, title: '物流信息' },
	{ id: 3, title: '版本信息' },
	{ id: 4, title: '项目介绍' }
]);

// 所有问题数据 - 为每个分类都添加问题
const allQuestions = ref([
	// 猜你想问
	{ id: 1, category: 'guess', title: '系统版本更新有哪些内容？' },
	{ id: 2, category: 'guess', title: '普通会员体验有哪些内容？如何成为正式会员？' },
	{ id: 3, category: 'guess', title: '如何参与项目？如何成为代理？' },
	
	// 热门活动
	{ id: 4, category: 'hot', title: '最新投资活动有哪些？' },
	{ id: 5, category: 'hot', title: '如何参与限时优惠理财？' },
	{ id: 6, category: 'hot', title: '会员专享福利包含哪些内容？' },
	{ id: 7, category: 'hot', title: '新用户专享优惠如何获取？' },
	
	// 商城介绍
	{ id: 8, category: 'intro', title: '平台的主要服务有哪些？' },
	{ id: 9, category: 'intro', title: '如何保障投资安全？' },
	{ id: 10, category: 'intro', title: '平台的资质和认证情况？' },
	{ id: 11, category: 'intro', title: '用户资金如何管理？' },
	
	// 售后问题
	{ id: 12, category: 'after-sale', title: '投资后如何申请退款？' },
	{ id: 13, category: 'after-sale', title: '遇到问题如何投诉？' },
	{ id: 14, category: 'after-sale', title: '售后服务流程是怎样的？' },
	{ id: 15, category: 'after-sale', title: '投资纠纷如何处理？' }
]);

// 当前激活的分类
const activeCategory = ref('guess');

// 输入模式状态
const isInputMode = ref(false);
const inputText = ref('');

// 计算当前分类的问题列表
const currentQuestions = computed(() => {
	return allQuestions.value.filter(question => question.category === activeCategory.value);
});

// 切换输入模式
const toggleInputMode = () => {
	isInputMode.value = !isInputMode.value;
	if (!isInputMode.value) {
		inputText.value = ''; // 切换回按钮模式时清空输入内容
	}
};

// 发送消息
const handleSendMessage = () => {
	if (!inputText.value.trim()) {
		uni.showToast({
			title: '请输入内容',
			icon: 'none'
		});
		return;
	}
	
	console.log('发送消息:', inputText.value);
	uni.showToast({
		title: '消息已发送',
		icon: 'success'
	});
	
	// 模拟发送消息后的处理
	setTimeout(() => {
		inputText.value = '';
		isInputMode.value = false;
	}, 1500);
};

// 切换分类
const switchCategory = (categoryId: string) => {
	activeCategory.value = categoryId;
	console.log('切换到分类:', categoryId, '问题数量:', currentQuestions.value.length);
};

// 处理网格项点击
const handleGridItemClick = (item: any) => {
	console.log('点击网格项:', item.title);
	
	// 显示对应问题的答案
	const answers: any = {
		1: '融豆可以通过以下方式获取：\n\n• 每日签到获得融豆奖励\n• 完成投资任务获得融豆\n• 参与平台活动赢取融豆\n• 邀请好友注册获得融豆\n• 首次投资赠送融豆',
		2: '物流信息查询：\n\n• 在"我的订单"中查看物流状态\n• 联系客服查询具体物流信息\n• 物流一般3-7个工作日内送达\n• 如有延迟可联系客服催促',
		3: '版本信息：\n\n当前版本：V2.5.1\n\n更新内容：\n• 优化投资理财功能\n• 新增融豆奖励系统\n• 改善用户体验\n• 修复已知问题',
		4: '项目介绍：\n\n我们平台提供多种投资项目：\n• 短期理财产品（1-3个月）\n• 中长期投资项目（6-12个月）\n• 高风险高收益项目\n• 稳健保本型项目'
	};
	
	uni.showModal({
		title: item.title,
		content: answers[item.id] || '相关信息正在完善中，如需详细了解请咨询人工客服。',
		confirmText: '知道了',
		showCancel: false
	});
};

// 处理快速服务点击
const handleServiceClick = (service: any) => {
	console.log('点击服务:', service.name);
	uni.showToast({
		title: `进入${service.name}`,
		icon: 'none'
	});
};

// 处理问题点击
const handleQuestionClick = (question: any) => {
	console.log('点击问题:', question.title);
	
	// 显示问题答案
	uni.showModal({
		title: question.title,
		content: getAnswerByQuestion(question),
		confirmText: '知道了',
		showCancel: false
	});
};

// 根据问题获取答案（为所有分类的问题都添加答案）
const getAnswerByQuestion = (question: any) => {
	const answers: any = {
		// 猜你想问
		1: '本次系统版本更新主要包含以下内容：\n\n1. 优化了用户界面设计\n2. 新增了投资理财功能\n3. 修复了已知的系统问题\n4. 提升了系统性能和稳定性\n5. 增加了融豆奖励系统',
		2: '普通会员可以体验基础的投资理财服务，查看部分项目信息。\n\n成为正式会员需要：\n• 完成实名认证\n• 满足投资条件\n• 通过风险评估\n• 具体请查看会员升级页面',
		3: '参与项目流程：\n\n1. 在平台完成实名认证\n2. 通过风险评估测试\n3. 选择适合的投资项目\n4. 确认投资金额\n\n成为代理：\n• 联系客服申请\n• 满足相关条件\n• 开通代理权限',
		
		// 热门活动
		4: '最新投资活动包括：\n\n• 新用户专享高收益理财\n• 限时加息活动（年化+1%）\n• 投资返现优惠\n• 邀请好友得奖励活动\n• 节假日特别活动',
		5: '参与限时优惠理财：\n\n1. 登录平台查看活动页面\n2. 选择限时优惠产品\n3. 确认投资金额\n4. 享受额外优惠收益\n* 活动期间投资可享受额外奖励',
		6: '会员专享福利：\n\n• 专属高收益理财产品\n• 优先参与新项目投资\n• 专属客服服务\n• 投资手续费优惠\n• 定期投资分析报告',
		7: '新用户专享优惠：\n\n1. 注册即送融豆奖励\n2. 首次投资享受额外收益\n3. 新手专享理财产品\n4. 邀请好友获得更多奖励',
		
		// 商城介绍
		8: '平台主要服务：\n\n• 理财产品投资\n• 项目融资服务\n• 财富管理咨询\n• 风险评估服务\n• 资产配置建议',
		9: '投资安全保障：\n\n• 银行级资金存管\n• 多重风险控制体系\n• 专业风控团队\n• 合规运营监管\n• 投资者保护机制',
		10: '平台资质认证：\n\n• 金融监管部门备案\n• 信息安全等级保护\n• 第三方审计认证\n• 合法经营许可\n• 行业协会会员',
		11: '用户资金管理：\n\n• 资金第三方存管\n• 实时资金流向监控\n• 多重身份验证\n• 交易密码保护\n• 资金变动实时通知',
		
		// 售后问题
		12: '退款申请流程：\n\n1. 提交退款申请\n2. 客服审核处理（1-3个工作日）\n3. 退款到账（3-7个工作日）\n4. 如有问题联系客服',
		13: '投诉渠道：\n\n• 在线客服即时沟通\n• 客服热线400-123-4567\n• 官方邮箱投诉\n• 在线留言反馈\n• 工作时间：9:00-18:00',
		14: '售后服务流程：\n\n1. 问题反馈\n2. 客服受理\n3. 问题处理\n4. 结果反馈\n5. 满意度调查',
		15: '投资纠纷处理：\n\n• 首先联系客服协商解决\n• 提供相关证据材料\n• 平台调解处理\n• 必要时转交监管部门\n• 法律途径解决'
	};
	
	return answers[question.id] || '相关问题解答正在完善中，如需详细了解请咨询人工客服。';
};

// 处理人工客服咨询
const handleHumanService = () => {
	console.log('咨询人工客服');
	
	uni.showModal({
		title: '联系人工客服',
		content: '您即将联系人工客服，客服工作时间：9:00-18:00',
		confirmText: '立即联系',
		cancelText: '取消',
		success: (res) => {
			if (res.confirm) {
				// 模拟拨打客服电话
				uni.makePhoneCall({
					phoneNumber: '400-123-4567'
				});
			}
		}
	});
};
</script>

<style lang="scss" scoped>
.customer-service-container {
	background: #f5f5f5;
	min-height: 100vh;
	
	.content {
		padding: 30rpx;
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 30rpx;
		padding-left: 10rpx;
		border-left: 6rpx solid #458CF9;
	}
	
	// 快速服务样式
	.quick-service {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		
		.service-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 30rpx;
			
			.service-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 20rpx 0;
				
				.service-icon {
					width: 80rpx;
					height: 80rpx;
					background: linear-gradient(135deg, #65A7FF 0%, #458CF9 100%);
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 15rpx;
					
					.icon {
						font-size: 36rpx;
					}
				}
				
				.service-name {
					font-size: 24rpx;
					color: #333;
					text-align: center;
					line-height: 1.4;
				}
			}
		}
	}
	
	// 常见问题样式
	.faq-section {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		
		.category-tabs {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 10rpx;
			margin-bottom: 30rpx;
			border-bottom: 1rpx solid #e8e8e8;
			padding-bottom: 20rpx;
			
			.tab-item {
				text-align: center;
				padding: 20rpx 0;
				font-size: 28rpx;
				color: #666;
				border-radius: 8rpx;
				background: #f8f9fa;
				border: 1rpx solid #e8e8e8;
				transition: all 0.3s;
				
				&.active {
					background: #458CF9;
					color: #fff;
					font-weight: 500;
					border-color: #458CF9;
					transform: scale(1.05);
				}
				
				&:active {
					transform: scale(0.95);
				}
			}
		}
		
		// 四列网格样式
		.grid-section {
			margin-bottom: 30rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #e8e8e8;
			
			.grid-container {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 15rpx;
				
				.grid-item {
					background: #f8f9fa;
					border-radius: 12rpx;
					padding: 25rpx 10rpx;
					text-align: center;
					border: 1rpx solid #e8e8e8;
					transition: all 0.3s;
					
					&:active {
						background: #e9ecef;
						transform: scale(0.98);
					}
					
					.grid-text {
						font-size: 26rpx;
						color: #333;
						font-weight: 500;
						line-height: 1.4;
					}
				}
			}
		}
		
		.question-list {
			.question-item {
				padding: 25rpx 0;
				border-bottom: 1rpx solid #f0f0f0;
				transition: all 0.3s;
				
				&:last-child {
					border-bottom: none;
				}
				
				&:active {
					background: #f8f9fa;
				}
				
				.question-content {
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.question-text {
						flex: 1;
						font-size: 28rpx;
						color: #333;
						line-height: 1.5;
					}
				}
			}
		}
	}
	
	// 人工客服区域样式
	.human-service {
		padding: 20rpx 0 40rpx;
		
		// 输入框模式
		.input-mode {
			.input-container {
				display: flex;
				align-items: center;
				gap: 20rpx;
				
				.custom-input {
					flex: 1;
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
				}
				
				.switch-icon {
					width: 80rpx;
					height: 80rpx;
					background: #fff;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
					transition: all 0.3s;
					
					&:active {
						transform: scale(0.95);
					}
				}
			}
			
			.send-btn {
				width: 200rpx;
				align-self: flex-end;
			}
		}
		
		// 按钮模式
		.button-mode {
			display: flex;
			align-items: center;
			gap: 20rpx;
			
			.switch-icon {
				width: 80rpx;
				height: 80rpx;
				background: #fff;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
				transition: all 0.3s;
				
				&:active {
					transform: scale(0.95);
				}
			}
			
			.consult-btn {
				.btn-icon {
					margin-right: 15rpx;
				}
			}
		}
	}
}

// 响应式调整
@media (max-width: 750rpx) {
	.quick-service .service-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 15rpx;
	}
	
	.faq-section .category-tabs {
		grid-template-columns: repeat(4, 1fr);
		gap: 8rpx;
	}
	
	.faq-section .grid-section .grid-container {
		grid-template-columns: repeat(4, 1fr);
		gap: 10rpx;
	}
}
</style>