<template>
	<view class="cotainer">
		<image class="bg" :src="require('@/static/qus-bg.jpg')" mode=""></image>

		<view class="navBarBox">
			<!-- <image class="navBarBox-top" :src="require('@/static/home-top.png')" mode=""></image> -->
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{paddingTop: navBarTop+'px'}"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar">

			</view>
		</view>
		<view class="detail">
			<view class="detail-info">
				<view class="detail-info-title">{{info.title}}</view>
			</view>
			<view class="detail-content">
				<view class="detail-image" v-if="info.image">
					<image :src="info.image.url" mode="widthFix"></image>
				</view>
				<view class="detail-content-content">
					<rich-text v-if='showContent' :nodes="info.content?info.content:' '"></rich-text>
				</view>
			</view>
		</view>




		<tabbar :currentPage="4"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar/tabbar.vue'
	import {
		shareInfo
	} from "@/common/util.js"
	export default {
		components: {
			tabbar,
		},
		data() {
			return {
				navBarTop: 0,
				currentIndex: 0,
				info: {},
				showContent: false,
			}
		},
		onShareAppMessage() {
			return shareInfo
		},
		onShareTimeline() {
			return shareInfo
		},
		onReady() {

		},
		onLoad(option) {
			const MenuButton = uni.getMenuButtonBoundingClientRect()
			this.navBarTop = MenuButton.top //左侧文字与右侧胶囊对齐
			this.getDetail(option.id)
		},
		methods: {
			async getDetail(id) {
				const res = await this.$u.api.baseFormShow({
					id: id,
					table_name: 'map_point_image_articles',
					'with_relations[0]': 'image'
				})
				this.info = res
				this.showContent = true
			},
		}
	}
</script>

<style lang="scss">
	.cotainer {
		background: #f3efea;
		width: 100vw;
		padding-bottom: 135rpx;
		height: 100vh;
		width: 100vw;
		overflow: scroll;

		.bg {
			height: 100vh;
			width: 100vw;
			position: absolute;
			top: 0;
			left: 0;
		}

		.navBarBox {
			// height: 299rpx;
			padding-bottom: 30rpx;
			width: 100%;
			position: relative;
			// border-bottom: 10rpx solid #dbd0ba;

			&-top {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0
			}

			.navBar {
				display: flex;
				position: relative;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;

			}
		}

		.detail {
			margin: 30rpx;
			margin-top: 40rpx;
			position: relative;

			&-info {
				// background-color: #fff;
				padding: 45rpx 25rpx;
				border-radius: 10rpx;
				position: relative;
				font-size: 36rpx;
				line-height: 1.5;
				padding-top: 0;

				&-title {
					color: #000;
					font-size: 32rpx;
					font-weight: bold;
					// margin-bottom: 30rpx;
					text-align: center;
				}
			}

			&-image {
				margin-bottom: 0;

				&>image {
					width: 100%;
				}
			}

			&-content {
				background-color: #fff;
				padding: 45rpx 25rpx;
				padding-bottom: 50rpx;
				border-radius: 10rpx;
				// margin-top: 30rpx;
				position: relative;

				&-bottom {
					width: 226rpx;
					height: 46rpx;
					position: absolute;
					bottom: 0;
					right: 0;
				}

				&-content {
					// margin-top: 40rpx;
					line-height: 2;
				}
			}
		}


	}
</style>