<template>
	<uv-navbar :fixed="false" @leftClick="$onClickLeft" bgColor="#09b4f1">
		<template v-slot:left>
			<uv-icon name="arrow-left" size="19" color="#ffffff"></uv-icon>
		</template>
		<template v-slot:center>
			<text style="color:#ffffff">产品详情</text>
		</template>
	</uv-navbar>
	<view class="page" v-if="state.productInfo">
		<image class="top-bg" :src="state.productInfo.image" mode="aspectFill"></image>
		<view class="product-info">
			<view class="product-name">{{state.productInfo.store_name}}</view>
			<!-- 产品图片 -->
			<scroll-view scroll-x="true">
				<view class="shop-image-view">
					<view v-for="(item, index) in state.productInfo.slider_image" :key="index" class="shop-image-list">
						<image class="shop-image" mode="aspectFill" :src="item"></image>
					</view>
				</view>
			</scroll-view>
			<!-- 产品简介 -->
			<view class="product-profile">
				<view class="title">产品分类</view>
				<view class="info">
					{{state.productInfo.cate_id}}
				</view>
				<view class="title">产品简介</view>
				<view class="info">
					{{state.productInfo.store_info || '暂无'}}
				</view>
				<view class="title">产品详情</view>
				<uv-read-more show-height="200rpx" closeText="展开更多" openText="收起更多" :toggle="true" color="#666" textIndent="0">
					<view style="margin-top: 20rpx;">
						<rich-text :nodes="state.productInfo.description"></rich-text>
					</view>
				</uv-read-more>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	import {
		getStoreProductInfo
	} from '@/api/business'
	import {
		onLoad
	} from '@dcloudio/uni-app'


	const state = reactive({
		id: '',
		productInfo: ''
	})

	const getDetail = (id) => {
		getStoreProductInfo({
			id: id
		}).then(res => {
			state.productInfo = res.productInfo
			state.productInfo.description = formatRichText(state.productInfo.description);
			state.productInfo.image = 'https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg'
		})
	}

	/*
	 * 处理富文本里的图片宽度自适应
	 * 1.去掉img标签里的style、width、height属性
	 * 2.img标签添加style属性：max-width:100%;height:auto
	 * 3.修改所有style里的width属性为max-width:100%
	 * 4.去掉<br/>标签
	 * @param html
	 * @returns {void|string|*}
	 */
	const 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:14rpx auto;"');
		return newContent;
	}

	onLoad((opt) => {
		if (opt.id) {
			state.id = opt.id
			getDetail(opt.id)
		}
	})
</script>

<style lang="scss" scoped>
	.page {
		.top-bg {
			width: 750rpx;
			height: 400rpx;
			flex-shrink: 0;
		}

		.product-info {
			position: relative;
			background-color: #fff;
			margin: -80rpx 24rpx 24rpx 24rpx;
			padding: 30rpx;
			border-radius: 20rpx;

			.shop-image-view {
				padding: 24rpx 0 4rpx 0;
				display: flex;
				align-items: center;
				box-sizing: border-box;

				.shop-image-list {
					margin-right: 14rpx;
					width: 160rpx;
					height: 160rpx;
				}

				.shop-image {
					flex-shrink: 0;
					width: 160rpx;
					height: 160rpx;
					border-radius: 8rpx;
				}
			}

			.product-name {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				-o-text-overflow: ellipsis;
				font-size: 36rpx;
				font-weight: bold;
			}
		}

		.product-profile {
			.title {
				margin-top: 20rpx;
				color: #333;
				font-size: 30rpx;
				font-weight: bold;
			}

			.info {
				margin-top: 14rpx;
				font-size: 28rpx;
				color: #555;
				line-height: 36rpx;
			}
		}
	}
</style>