<template>
	<view class="container">
		<uv-navbar :fixed="false" title="客服中心" left-arrow @leftClick="$onClickLeft" />
		<view class="service-content">
			<view class="section-title">常见问题</view>

			<view class="question-list">
				<view class="question-item" v-for="(item, index) in questionList" :key="index"
					@click="showDetail(item)">
					<text class="question-text">{{ item.title }}</text>
					<view class="arrow-icon">
						<uv-icon name="arrow-right" size="16" color="#C8C9CC"></uv-icon>
					</view>
				</view>
			</view>

		</view>

		<!-- 问题详情弹窗 -->
		<uni-popup ref="popup" type="bottom" :safe-area="false" :visible="showPopup">
			<view class="popup-wrapper">
				<view class="popup-content">
					<view class="popup-title">{{ currentQuestion.title }}</view>
					<view class="popup-detail">
						<template v-for="(item, idx) in currentQuestion.content" :key="idx">
							<view class="detail-item">{{ item }}</view>
						</template>
					</view>
					<view class="popup-footer">
						<view class="popup-close" @click="closePopup"></view>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 添加客服电话按钮 -->
		<view class="service-footer">
			<view class="service-btn" @click="callService">
				<uv-icon name="phone" size="20" color="#fff"></uv-icon>
				<text class="btn-text">客服电话</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'

// 使用标准uni-popup组件

// 问题列表数据
const questionList = ref([
	{
		title: '外送订单超时',
		content: [
			'点击“订单”查看订单详情，了解订单状态；', '配送时间超过30分钟，可点击帮助中心底部客服电话人工咨询'
		]
	},
	{
		title: '外送订单取消',
		content: [
			'商家出餐前，可至“订单”列表点击“取消订单”，待商家同意后即可取消'
		]
	},
	{
		title: '外送订单退款',
		content: [
			'订单申请取消成功后，钱款和优惠券都将自动返还支付账户；', '如遇退款异常情况，可点击帮助中心底部客服电话人工咨询'
		]
	},
	{
		title: '外送餐品问题',
		content: [
			'如遇餐品送错、送漏或餐品质量问题，请点击帮助中心底部客服电话，进行人工投诉'
		]
	}

]);

onLoad((options) => {
	if (options && options.phone) {
		phoneNumber.value = options.phone;
	}
});



// 弹窗控制
const showPopup = ref(false);
const currentQuestion = ref({
	title: '',
	content: []
});

// popup引用
const popup = ref(null);

// 显示问题详情
const showDetail = (item) => {
	console.log('Opening detail for:', item.title);
	currentQuestion.value = item;
	showPopup.value = true;
	// 使用toggle方法切换popup显示状态
	uni.$nextTick(() => {
		popup.value.toggle();
	});
	popup.value.toggle();
}

// 关闭弹窗
const closePopup = () => {
	// 使用toggle方法关闭popup
	popup.value.toggle();
	// 延迟重置状态，避免关闭动画过程中看到内容变化
	setTimeout(() => {
		showPopup.value = false;
	}, 200);
}

// 添加打电话方法
const callService = () => {
	uni.makePhoneCall({
		phoneNumber: '15251830311' // 替换为实际客服电话
	});
}
</script>

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

.service-content {
	padding: 15px;
}

.section-title {
	font-size: 18px;
	font-weight: bold;
	color: #333;
	padding: 10px 10px;
	margin: 0 4px;
	background-color: #fff;
	border-bottom: 1px solid #f5f5f5;
	text-align: center;
}

.question-list {
	background-color: #fff;
	border-radius: 0 0 10px 10px;
	margin: 0 4px;
	padding: 5px 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.question-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 15px;
	border-bottom: 1px solid #f5f5f5;
}

.question-text {
	font-size: 15px;
	color: #333;
}

.arrow-icon {
	color: #ccc;
}

.popup-wrapper {
	background-color: #fff;
	border-radius: 20px 20px 20px 20px;
	margin: 0 14px;
	overflow: hidden;
	position: relative;
	margin-bottom: 0;
	padding-bottom: constant(safe-area-inset-bottom);
	/* iOS 11.0 */
	padding-bottom: env(safe-area-inset-bottom);
	/* iOS 11.2+ */
}

/* 弹窗样式 */
.popup-content {
	padding: 20px 15px 30px;
}

.popup-title {
	font-size: 18px;
	font-weight: bold;
	color: #333;
	padding-bottom: 15px;
	border-bottom: 1px solid #f5f5f5;
	margin-bottom: 15px;
}

.popup-detail {
	padding: 10px 0;
}

.detail-item {
	font-size: 14px;
	color: #333;
	line-height: 1.8;
	margin-bottom: 10px;
}

.popup-footer {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

.popup-close {
	width: 40px;
	height: 5px;
	background-color: #ddd;
	border-radius: 5px;
	margin-bottom: 10px;
}

/* 新增客服电话按钮样式 */
.service-footer {
	position: fixed;
	bottom: 30px;
	left: 0;
	right: 0;
	padding: 15px;
	// background-color: #fff;
	// box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

.service-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #52ac41;
	color: #fff;
	border-radius: 50px;
	padding: 12px 0;
}

.btn-text {
	font-size: 16px;
	margin-left: 8px;
}
</style>