<template>
	<view>
		<com-page-container :title="title" showBack>
			<view class="agreement-container">
				<rich-text v-if="article != null" :nodes="safeHtml" class="agreement-content"></rich-text>
			</view>
		</com-page-container>
	</view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { getArticleDetail } from '@/common/server/interface/article'
import { getConfigData } from '@/common/server/config'
let title = ref('')
const article = ref(null)
let configData = null;

// 将不被 rich-text 支持的标签进行替换，并为缺失样式的图片补充样式
const safeHtml = computed(() => {
	const html = article.value?.contentBody || ''
	return html
		.replace(/<figure\b[^>]*>/gi, '<div>')
		.replace(/<\/figure>/gi, '</div>')
		// 为没有 style 的 img 补充样式，避免超出
		.replace(/<img(?![^>]*\bstyle=)([^>]*?)>/gi, '<img$1 style="max-width:100%;height:auto;display:block;">')
})
onLoad(async (option) => {
	console.log(option);
	if (configData == null) {
		configData = await getConfigData()
	}
	console.log("configData", configData.config);

	if (option.type != null) {
		if (option.type == 'userAgreement') {
			title.value = "用户协议";
			article.value = await getArticleDetail(configData.config.userAgreementId)
		} else if (option.type == 'privacyPolicy') {
			title.value = "隐私协议";
			article.value = await getArticleDetail(configData.config.privacyPolicyId)
		} else if (option.type == 'about') {
			title.value = "关于我们";
			article.value = await getArticleDetail(configData.config.aboutArticleId)
		}
	}
})
</script>

<style scoped>
.agreement-container {
	padding: 20rpx;
	background-color: #fff;
	min-height: 100vh;
}

.agreement-content {
	line-height: 1.8;
	font-size: 28rpx;
	color: #333;
	word-break: break-all;
}

/* 富文本内容样式优化 */
.agreement-content :deep(h1),
.agreement-content :deep(h2),
.agreement-content :deep(h3) {
	color: #2c3e50;
	font-weight: bold;
	margin: 30rpx 0 20rpx 0;
	line-height: 1.5;
}

.agreement-content :deep(h1) {
	font-size: 36rpx;
	border-bottom: 2rpx solid #e0e0e0;
	padding-bottom: 15rpx;
}

.agreement-content :deep(h2) {
	font-size: 32rpx;
	color: #34495e;
}

.agreement-content :deep(h3) {
	font-size: 30rpx;
	color: #34495e;
}

.agreement-content :deep(p) {
	margin: 15rpx 0;
	text-indent: 0;
	line-height: 1.8;
	color: #555;
}

.agreement-content :deep(ul),
.agreement-content :deep(ol) {
	margin: 15rpx 0;
	padding-left: 40rpx;
}

.agreement-content :deep(li) {
	margin: 8rpx 0;
	line-height: 1.6;
	color: #555;
}

.agreement-content :deep(strong),
.agreement-content :deep(b) {
	font-weight: bold;
	color: #2c3e50;
}

.agreement-content :deep(em),
.agreement-content :deep(i) {
	font-style: italic;
	color: #7f8c8d;
}

.agreement-content :deep(a) {
	color: #3498db;
	text-decoration: underline;
}

.agreement-content :deep(blockquote) {
	border-left: 6rpx solid #3498db;
	padding-left: 20rpx;
	margin: 20rpx 0;
	background-color: #f8f9fa;
	padding: 20rpx;
	border-radius: 8rpx;
}

.agreement-content :deep(code) {
	background-color: #f1f2f6;
	padding: 4rpx 8rpx;
	border-radius: 4rpx;
	font-family: 'Courier New', monospace;
	font-size: 24rpx;
}

.agreement-content :deep(pre) {
	background-color: #f8f9fa;
	padding: 20rpx;
	border-radius: 8rpx;
	overflow-x: auto;
	margin: 20rpx 0;
}

.agreement-content :deep(table) {
	width: 100%;
	border-collapse: collapse;
	margin: 20rpx 0;
}

.agreement-content :deep(th),
.agreement-content :deep(td) {
	border: 1rpx solid #ddd;
	padding: 12rpx;
	text-align: left;
}

.agreement-content :deep(th) {
	background-color: #f8f9fa;
	font-weight: bold;
}
</style>
