<template>
	<view class="view-page" :style="{backgroundImage: `url('${ThemeData ? ThemeData.app_bg : baseBgUrl }')`}">
		<headerHeight />
		<navBar :navTitle="'内容详情'">
		</navBar>
		<template v-if="detailData">
			<view class="" v-if="detailData.from === 2">
				<iframe id="myIframe" :src="detailData.url" style="width: 100%;border: none;height: 100dvh;"></iframe>
				<!-- <web-view :src="detailData.url"></web-view> -->
			</view>
			<view class="detailContent" v-else>
				<!-- from 1站内 2 外链 -->
			
				<view class="">
					<view class="detailTitle">
						{{detailData.title}}
					</view>
					<!-- 内容 -->
					<view class="detailData" v-html="detailData.content || ''">
					</view>
				</view>
			</view>
		</template>

	</view>
</template>

<script>
	import headerHeight from '@/component/headerHeight.vue';
	import navBar from '@/component/nav.vue';
	import http from '@/until/http.js';
	export default {
		components: {
			headerHeight,
			navBar
		},
		data() {
			return {
				detailData: null,
				ThemeData: null,
				BarHeight:0
			}
		},
		onLoad(options) {
			const {
				dataId
			} = options
			if (dataId) {
				this.getDetail(dataId)
			}
			if (uni.getStorageSync('Theme_Data')) {
				this.ThemeData = JSON.parse(uni.getStorageSync('Theme_Data'))
			}
			this.BarHeight = uni.getStorageSync('BarHeight')
		},
		methods: {
			// 获取公会信息
			async getDetail(Id) {
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				http.get('/api/Usermode/getUnderageModeContent', {
					id: Id,
					token: uni.getStorageSync('token') || ''
				}).then(response => {
					uni.hideLoading()
					const {
						data,
						code
					} = response
					this.detailData = code ? data : null
					console.log(this.detailData)
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.view-page {
		// padding: 32rpx;
		display: flex;
		flex-direction: column;
		background-image: url('@/static/image/help/bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		min-height: 100vh;

		.detailContent {
			padding: 0 32rpx;
			flex: 1;
			/* 关键：撑满剩余空间 */
			overflow: auto;

			/* 允许内容滚动 */
			.detailTitle {
				font-size: 32rpx;
				font-weight: 700;
				color: #333;
				line-height: 1.4;
				padding-bottom: 48rpx;
				text-align: center;
			}
			.detailData{
				padding: 0 32rpx;
			}
		}
	}
</style>