<template>
	<view>
		<view class="pl-20 pr-20 agreement-wrap">
			<view v-if="docContentLines.length > 0" class="doc-card">
				<view class="doc-title">{{ docTitle }}</view>
				<view class="doc-body">
					<view v-for="(line, index) in docContentLines" :key="index" class="doc-line">
						{{ line || ' ' }}
					</view>
				</view>
			</view>
			<rich-text v-else :nodes="types==1?age.privacy:types==2?age.user:age.about"></rich-text>
		</view>
	</view>
</template>

<script>
	import {
		promotionDocumentMap
	} from './documents.js'

	export default {
		data() {
			return {
				age:{},
				types:'',
				docTitle: '',
				docContentLines: []
			}
		},
		onLoad(e) {
			const pageTitle = this.decodePageTitle(e.name)
			uni.setNavigationBarTitle({
				title: pageTitle
			})
			if (e.docKey) {
				this.loadLocalDocument(e.docKey, pageTitle)
				return
			}
			this.types = e.type
			this.richText()
		},
		methods: {
			decodePageTitle(title) {
				if (!title) {
					return ''
				}
				try {
					return decodeURIComponent(title)
				} catch (error) {
					return title
				}
			},
			loadLocalDocument(docKey, title) {
				const currentDoc = promotionDocumentMap[docKey]
				if (!currentDoc) {
					this.docTitle = title || '文档详情'
					this.docContentLines = ['暂无内容']
					return
				}
				this.docTitle = currentDoc.title
				this.docContentLines = currentDoc.content.split('\n')
			},
			richText(){
				this.$tools.axios("POST","index/richText").then(res => {
					this.age = res.data
				})
			}
		}
	}
</script>

<style>
	.agreement-wrap {
		padding-bottom: 40rpx;
	}

	.doc-card {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 28rpx 24rpx 36rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
	}

	.doc-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #222222;
		line-height: 1.5;
		margin-bottom: 20rpx;
		word-break: break-all;
	}

	.doc-body {
		display: flex;
		flex-direction: column;
	}

	.doc-line {
		font-size: 28rpx;
		line-height: 1.8;
		color: #333333;
		white-space: pre-wrap;
		word-break: break-word;
		margin-bottom: 12rpx;
	}
</style>
