<template>
	<view class="content" v-html="record.content"></view>
</template>

<script>
	import * as ArticleApi from '@/api/cms/article'
	export default {
		data() {
			return {
				articleId: 0,
				record: {}
			}
		},
		onLoad(e) {
			const {
				articleId,
				id
			} = e
			if (id) {
				this.articleId = id
			}
			if (articleId) {
				this.articleId = articleId
			}
			this.getArticle()
		},
		methods: {
			getArticle() {
				ArticleApi.getArticle(this.articleId).then(data => {
					data.content = this.formatRichText(data.content)
					this.record = data
					uni.setNavigationBarTitle({
						title: data.title
					})
				})
			},
			formatRichText(html) {
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
				return newContent;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx;
		line-height: 1.8rem;
	}
</style>