<template>
	<view class="container">
		<view class="title">{{title}}</view>
		<view class="date">{{$t('index.publish-time')}}{{createDate}}</view>
		<view class="content">
			<rich-text :nodes="content"></rich-text>
		</view>
	</view>
</template>

<script>
	import {
		getNewsDetail
	} from '@/config/api.js'
	export default {
		name: 'detail',
		data() {
			return {
				title: '',
				createDate: '',
				content: ''
			}
		},
		methods: {
			getDetail(id) {
				getNewsDetail({
					id
				}).then(({
					content
				}) => {
					this.title = content.news.title
					this.createDate = content.news.createDate
					this.content = content.news.content.replace(/<img(.*?)src="(.*?)"(.*?)>/g,
						'<img$1src="$2"$3>')
				})
			}
		},
		onLoad(option) {
			this.getDetail(option.id)
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		box-sizing: border-box;
		min-height: 100vh;
		background-color: #fff;
		padding: 40rpx 30rpx;

		.title {
			font-size: 34rpx;
			font-weight: 500;
			color: #B60001;
			text-align: center;
		}

		.date {
			font-size: 12px;
			color: #99A0AF;
			margin-top: 18rpx;
			text-align: center;
		}

		.content {
			margin-top: 40rpx;
		}
	}
</style>