<template>
	<view class="details">
		<!-- <view class="title">
			<view class="line"></view>
			<view class="con">详情</view>
			<view class="line"></view>
		</view> -->
		<u-transition show>
			<u-parse :content="detail"></u-parse>
		</u-transition>
		<!-- #ifdef MP-ALIPAY -->
		<view class="line-box"></view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		props: ["goods"],

		data() {
			return {
				detail: ""
			}
		},

		mounted() {
			this.detail = this.getDetail()
		},

		methods: {
			getDetail() {
				return this.formatRichText(this.goods.detail || "");
			},
			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="display:block;max-width:100%;height:auto"'
				);
				return newContent;
			}
		}
	}
</script>

<style scoped lang="scss">
	.details {
		.title {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 90rpx;
			background: #f6f6f6;
		}

		.con {
			position: relative;
			padding: 0 30rpx;
			font-size: 28rpx;
		}

		.line {
			width: 48rpx;
			height: 2rpx;
			background: #cecece;
		}

		.line-box {
			height: 40rpx;
		}
	}
</style>