<template>
	<view class="doc-page">
		<view class="doc-card">
			<view class="doc-title">{{ title }}</view>
			<view class="doc-body">
				<view v-for="(line, index) in contentLines" :key="index" class="doc-line">
					{{ line || ' ' }}
				</view>
			</view>
		</view>
	</view>
</template>

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

	export default {
		data() {
			return {
				title: '',
				contentLines: []
			}
		},
		onLoad(options) {
			const key = options.key || ''
			const currentDoc = promotionDocumentMap[key] || promotionDocumentMap.memberAgreement
			this.title = currentDoc.title
			this.contentLines = currentDoc.content.split('\n')
			uni.setNavigationBarTitle({
				title: currentDoc.title
			})
		}
	}
</script>

<style>
	page {
		background: #f5f6fa;
	}

	.doc-page {
		padding: 24rpx;
	}

	.doc-card {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 32rpx 28rpx 40rpx;
		box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.06);
	}

	.doc-title {
		font-size: 34rpx;
		font-weight: 700;
		color: #222222;
		line-height: 1.4;
		margin-bottom: 24rpx;
		word-break: break-all;
	}

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

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