<template>
	<view class="container" v-if="isShow">
		<view class="contentBox">
			<view class="headerBox">
				<view class="title">{{NoticeTitle}}</view>
				<view class="timecenter">{{NoticeDate}}</view>
			</view>
			<view class="article" v-if="type==0">
				<bctos-rich-text :nodes="NoticeContent"></bctos-rich-text>
			</view>
			<view class="article" v-else>
				<video class="noticeInfoVedio" v-if="NoticeVideoSrc" :src="NoticeVideoSrc"></video>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				id: '',
				type: 0,
				NoticeTitle: "",
				NoticeDate: "",
				NoticeContent: '',
				NoticeVideoSrc: ''
			}
		},
		onLoad(option) {
			this.id = decodeURIComponent(option.id);
			this.type = option.type;
			this.getData();
		},
		methods: {
			getData() {
				let that = this;
				that.$admin.req({
					method: 'GET',
					url: '/api/v1/Snapshot/notification/' + 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.NoticeVideoSrc = res.videoPath ? (that.$admin.config.getfileurl + res.videoPath) : '';
					}
					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: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.time{
		font-size: 30rpx;
		color: #666666;
		text-align: right;
	}
	
	.timecenter {
		font-size: 30rpx;
		color: #666666;
		text-align: right;
	}

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

	.bottomBox {
		padding-bottom: 20rpx;
	}

	.author {
		text-align: right;
	}
	
	.noticeInfoVedio {
		width: 100%;
		height: 500rpx;
	}
</style>