<template>
	<view class="agreement-container">
		<view class="agreement-content">
			<!-- 标题 -->
			<view class="page-header">
				<text class="header-title">用户服务协议</text>
				<text class="header-subtitle" v-if="updateDate">更新日期：{{ updateDate }}</text>
			</view>

			<!-- 内容区域 -->
			<view class="content-section">
				<scroll-view scroll-y class="scroll-content">
					<!-- 引言 -->
					<view class="section-block">
						<view class="block-title">重要提示</view>
						<view class="block-content important">
							欢迎您使用时光意境·AI声音克隆服务！在使用本服务前，请您务必仔细阅读并充分理解本协议。您点击"同意"按钮或实际使用本服务，即表示您已阅读并同意接受本协议的全部内容。
						</view>
					</view>

					<!-- 服务说明 -->
					<view class="section-block">
						<view class="block-title">一、服务说明</view>
						<view class="block-subtitle">1.1 服务内容</view>
						<view class="block-content">
							时光意境提供以下AI服务：<br/>
							• <text class="highlight">声音克隆</text>：基于您提供的音频样本创建专属音色<br/>
							• <text class="highlight">语音合成</text>：使用已创建的音色合成语音内容<br/>
							• <text class="highlight">照片复活</text>：让照片中的人物开口说话<br/>
							• <text class="highlight">视频通话</text>：与AI数字人进行实时对话<br/>
							• <text class="highlight">实时对话</text>：基于语音识别和AI的智能对话
						</view>
						
						<view class="block-subtitle">1.2 服务特点</view>
						<view class="block-content">
							• 采用先进的AI技术，提供高质量的声音克隆和合成服务<br/>
							• 支持多种音频格式和场景应用<br/>
							• 提供便捷的用户界面和操作流程<br/>
							• 保护用户隐私和数据安全
						</view>
					</view>

					<!-- 账号注册 -->
					<view class="section-block">
						<view class="block-title">二、账号注册与使用</view>
						<view class="block-subtitle">2.1 注册要求</view>
						<view class="block-content">
							• 您需要提供真实、准确、完整的个人信息<br/>
							• 您需要使用有效的手机号码进行注册<br/>
							• 您需要设置安全的密码并妥善保管<br/>
							• 您应当及时更新您的个人信息
						</view>
						
						<view class="block-subtitle">2.2 账号安全</view>
						<view class="block-content">
							• 您对账号和密码的安全负有全部责任<br/>
							• 如发现账号被盗用，应立即通知我们<br/>
							• 不得将账号转让、出售或出借给他人使用<br/>
							• 不得使用他人账号或冒充他人身份
						</view>
					</view>

					<!-- 使用规范 -->
					<view class="section-block">
						<view class="block-title">三、使用规范</view>
						<view class="block-subtitle">3.1 禁止行为</view>
						<view class="block-content">
							在使用本服务时，您不得：<br/>
							• 上传违法、违规、侵权或不良内容<br/>
							• 克隆他人声音用于欺诈、诈骗等违法行为<br/>
							• 传播虚假信息、谣言或恶意内容<br/>
							• 侵犯他人知识产权、隐私权或其他合法权益<br/>
							• 干扰或破坏服务的正常运行<br/>
							• 进行任何形式的商业推广或广告活动
						</view>
						
						<view class="block-subtitle">3.2 内容规范</view>
						<view class="block-content">
							• 上传的音频、照片等内容应合法合规<br/>
							• 不得包含暴力、色情、恐怖等不良信息<br/>
							• 不得侵犯他人肖像权、名誉权等权利<br/>
							• 应尊重社会公德和公序良俗
						</view>
					</view>

					<!-- 知识产权 -->
					<view class="section-block">
						<view class="block-title">四、知识产权</view>
						<view class="block-subtitle">4.1 平台权利</view>
						<view class="block-content">
							本服务的所有内容（包括但不限于软件、技术、程序、网页、文字、图片、音频、视频等）的知识产权归我们所有。未经我们书面许可，任何人不得擅自使用。
						</view>
						
						<view class="block-subtitle">4.2 用户内容</view>
						<view class="block-content">
							• 您上传的内容，您保留其知识产权<br/>
							• 您授予我们使用、存储、处理该内容的权利<br/>
							• 您保证上传的内容不侵犯第三方权利<br/>
							• 生成的音色和视频，您享有使用权
						</view>
					</view>

					<!-- 费用说明 -->
					<view class="section-block">
						<view class="block-title">五、费用说明</view>
						<view class="block-content">
							• 部分服务可能需要付费使用<br/>
							• 具体收费标准以页面显示为准<br/>
							• 支付成功后，费用不予退还（法律另有规定除外）<br/>
							• 我们保留调整价格的权利，调整前会提前通知
						</view>
					</view>

					<!-- 免责声明 -->
					<view class="section-block">
						<view class="block-title">六、免责声明</view>
						<view class="block-content">
							• 因不可抗力导致的服务中断或故障，我们不承担责任<br/>
							• 因用户自身原因（如操作不当、设备问题等）导致的损失，我们不承担责任<br/>
							• 因第三方原因（如网络故障、黑客攻击等）导致的损失，我们不承担责任<br/>
							• 用户使用本服务产生的法律责任，由用户自行承担
						</view>
					</view>

					<!-- 服务变更 -->
					<view class="section-block">
						<view class="block-title">七、服务变更与终止</view>
						<view class="block-subtitle">7.1 服务变更</view>
						<view class="block-content">
							我们有权根据业务需要，变更、暂停或终止部分或全部服务。如有重大变更，我们会提前通知您。
						</view>
						
						<view class="block-subtitle">7.2 账号终止</view>
						<view class="block-content">
							以下情况下，我们有权终止您的账号：<br/>
							• 您违反本协议的约定<br/>
							• 您从事违法违规活动<br/>
							• 您长期未使用账号（超过12个月）<br/>
							• 您主动申请注销账号
						</view>
					</view>

					<!-- 协议修改 -->
					<view class="section-block">
						<view class="block-title">八、协议修改</view>
						<view class="block-content">
							我们有权根据法律法规变化或业务需要修改本协议。修改后的协议将在应用内公布，如您继续使用服务，即视为同意修改后的协议。
						</view>
					</view>

					<!-- 法律适用 -->
					<view class="section-block">
						<view class="block-title">九、法律适用与争议解决</view>
						<view class="block-content">
							• 本协议的订立、执行和解释及争议的解决均应适用中华人民共和国法律<br/>
							• 如双方就本协议内容或其执行发生争议，双方应友好协商解决<br/>
							• 协商不成时，任何一方均可向我们所在地人民法院提起诉讼
						</view>
					</view>

					<!-- 联系方式 -->
					<view class="section-block">
						<view class="block-title">十、联系我们</view>
						<view class="block-content">
							如您对本协议有任何疑问，请通过以下方式联系我们：<br/><br/>
							<text class="contact-info" v-if="serviceEmail">邮箱：{{ serviceEmail }}</text><br v-if="serviceEmail"/>
							<text class="contact-info" v-if="servicePhone">电话：{{ servicePhone }}</text><br v-if="servicePhone"/>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 同意按钮 -->
			<view class="button-section">
				<button class="agree-btn" @click="handleAgree">我已阅读并同意</button>
			</view>
		</view>
	</view>
</template>

<script>
import { API_BASE, API_ENDPOINTS } from '@/config/api.js';

export default {
	data() {
		return {
			serviceEmail: '',
			servicePhone: '',
			updateDate: ''
		};
	},
	onLoad() {
		this.loadConfig();
	},
	methods: {
		async loadConfig() {
			try {
				const cachedConfig = uni.getStorageSync('appConfig');
				if (cachedConfig) {
					if (cachedConfig.common) {
						this.serviceEmail = cachedConfig.common.serviceEmail || '';
						this.servicePhone = cachedConfig.common.servicePhone || '';
					}
					if (cachedConfig.agreement) {
						this.updateDate = cachedConfig.agreement.updateDate || '';
					}
				}
				
				const res = await uni.request({
					url: `${API_BASE}${API_ENDPOINTS.config.getAppConfig}`,
					method: 'GET',
					header: {
						'Content-Type': 'application/json'
						// 不添加认证头，因为这是公开接口
					}
				});
				
				// 兼容不同平台的返回格式：可能是 [error, res] 或直接是 res
				const response = Array.isArray(res) ? res[1] : res;
				if (response && response.data && response.data.success && response.data.data) {
					const config = response.data.data;
					uni.setStorageSync('appConfig', config);
					
					if (config.common) {
						this.serviceEmail = config.common.serviceEmail || '';
						this.servicePhone = config.common.servicePhone || '';
					}
					if (config.agreement) {
						this.updateDate = config.agreement.updateDate || '';
					}
				}
			} catch (error) {
				console.error('加载配置失败:', error);
			}
		},
		
		handleAgree() {
			uni.showToast({
				title: '感谢您的支持',
				icon: 'success'
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		}
	}
};
</script>

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

.agreement-content {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding: 30upx;
	
	/* 小程序平台需要额外的顶部间距（导航栏 + 状态栏） */
	/* #ifdef MP-WEIXIN */
	padding-top: calc(30upx + 88px);
	/* #endif */
	
	/* App 平台使用安全区域（状态栏高度） */
	/* #ifdef APP-PLUS */
	padding-top: calc(30upx + 44px + env(safe-area-inset-top));
	/* #endif */
	
	/* H5 和其他平台使用安全区域 */
	/* #ifndef MP-WEIXIN || APP-PLUS */
	padding-top: calc(30upx + constant(safe-area-inset-top));
	padding-top: calc(30upx + env(safe-area-inset-top));
	/* #endif */
}

/* 页面标题 */
.page-header {
	text-align: center;
	margin-bottom: 30upx;
	
	.header-title {
		display: block;
		font-size: 44upx;
		font-weight: 700;
		color: #333;
		margin-bottom: 15upx;
	}
	
	.header-subtitle {
		display: block;
		font-size: 24upx;
		color: #999;
	}
}

/* 内容区域 */
.content-section {
	flex: 1;
	background: white;
	border-radius: 30upx;
	overflow: hidden;
	box-shadow: 0 8upx 40upx rgba(0, 0, 0, 0.08);
}

.scroll-content {
	height: 100%;
	padding: 40upx 30upx;
}

/* 内容块 */
.section-block {
	margin-bottom: 40upx;
	width: 100%;
	box-sizing: border-box;
	
	&:last-child {
		margin-bottom: 0;
	}
	
	.block-title {
		font-size: 30upx;
		font-weight: 700;
		color: #333;
		margin-bottom: 20upx;
		padding-left: 20upx;
		border-left: 6upx solid #8B7355;
	}
	
	.block-subtitle {
		font-size: 28upx;
		font-weight: 600;
		color: #555;
		margin: 20upx 0 15upx;
	}
	
	.block-content {
		font-size: 26upx;
		color: #666;
		line-height: 2;
		text-align: justify;
		word-wrap: break-word;
		word-break: break-word;
		white-space: normal;
		
		&.important {
			background: linear-gradient(135deg, #FFF9E6 0%, #FFF3D6 100%);
			padding: 15upx 20upx;
			border-radius: 12upx;
			border-left: 4upx solid #FFB800;
			color: #FF9500;
			font-weight: 600;
			word-wrap: break-word;
			word-break: break-word;
			white-space: normal;
			overflow: visible;
			max-width: 90%;
			margin: 0 auto 0 0;
		}
		
		.highlight {
			color: #8B7355;
			font-weight: 600;
		}
		
		.contact-info {
			color: #8B7355;
			font-weight: 600;
		}
		
		.footer-text {
			display: block;
			text-align: right;
			margin-top: 20upx;
			color: #8B7355;
			font-weight: 600;
		}
	}
}

/* 按钮区域 */
.button-section {
	padding: 30upx 0 0;
}

.agree-btn {
	width: 100%;
	padding: 32upx;
	background: linear-gradient(135deg, #8B7355 0%, #6D8B8B 100%);
	border-radius: 50upx;
	color: white;
	font-size: 32upx;
	font-weight: 600;
	box-shadow: 0 10upx 40upx rgba(139, 115, 85, 0.3);
	border: none;
	
	&:active {
		opacity: 0.8;
		transform: scale(0.98);
	}
}
</style>
