<template>
	<view class="container" v-if="isShow">
		<view class="contentBox">
			<view class="headerBox">
				<view class="title">{{NoticeTitle}}</view>
			</view>
			<view class="article">
				<bctos-rich-text :nodes="NoticeContent"></bctos-rich-text>
			</view>
			<view class="bottomBox" style="display: none;">
				<view class="author">{{NoticeBMName}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				id: '',
				NoticeTitle: "",
				NoticeDate: "",
				NoticeContent: '',
				NoticeBMName: '',
			}
		},
		onLoad(option) {
			this.id = decodeURIComponent(option.id);
			this.getData();
		},
		methods: {
			getData() {
				let that = this;
				that.$admin.reqDirect({
					method: 'GET',
					url: '/api/v1/Snapshot/bulletions/' + that.id
				}).then(res => {
					if (res) {
						that.NoticeTitle = res.title;
						that.NoticeDate = res.creationTime ? that.$util.formatTime(new Date(res.creationTime)) : '';
						that.NoticeContent = res.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, reSrc) {
							var strImg = '<img src="' + reSrc + '" style="width:100%;" />';
							return strImg;
						});
						that.NoticeBMName = '';
					}
					that.isShow = true;
				}, err => {
					that.$util.msg(err);
				})
			},
			onBackTo() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="less">
	.contentBox {
		height: calc(100% - 30rpx);
		padding: 0 20rpx 30rpx;
		overflow-y: auto;
	}

	.headerBox {
		border-bottom: 1px #d2d2d2 solid;
		padding: 40rpx 0 20rpx;
	}

	.title {
		font-size: 44rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.article {
		font-size: 36rpx;
		background-color: #FFFFFF;
		color: #000;
		padding: 30rpx 0;
		line-height: 2.5;
	}

	.bottomBox {
		padding-bottom: 20rpx;
	}

	.author {
		text-align: right;
	}
</style>