<template>
	<view class="contentBox">
		<view class="title">{{info.title}}</view>
		<view class="time">{{info.added_on}}</view>
		<view class="content" v-html="info.contents"></view>
		<view class="orgTitle">{{teamname}}</view>
	</view>
</template>

<script>
	
	import {messageInfo} from "../../api/index.js"
	
	import { mapState } from "vuex"
	
	export default{
		data(){
			return{
				info:{
					title:"",
					contents:"",
					added_on:""
				}
			}
		},
		computed:{
			...mapState(['teamname']),
		},
		onLoad(option) {
			const {id}=option
			messageInfo({id}).then(res=>{
				const { data } = res;
				let content=data.contents
				const regex = new RegExp('<img', 'gi');
				content = content.replace(regex, `<img style="width: 100%;height:auto;margin:10px 0"`);
				res.data.contents=content
				this.info=data
			})
		}
	}
</script>

<style lang="scss">
	page{
		width: 100%;
		min-height: 100%;
		background: $uni-bg-color-normal;
	}
	.contentBox{
		font-size: 28rpx;
		color: #4D4D4D;
	}
	.title{
		text-align: center;
		margin-top: 36rpx;
		margin-bottom: 15rpx;
		font-size: 32rpx;	
	}
	.orgTitle{
		text-align: center;
		margin: 50rpx auto;
	}
	.time{
		text-align: center;
		margin-bottom: 20rpx;
	}
	.content{
		padding-left: 31rpx;
		padding-right: 26rpx;
	}
</style>
