<template>
	<view class="warpbox">
		<view class="proli">
			<view class="label">产品名称</view>
			<view class="right">{{info.name ? info.name : ''}}</view>
		</view>
		<view class="proli">
			<view class="label">产品编号</view>
			<view class="right">{{info.num ? info.num : ''}}</view>
		</view>
		<view class="proli">
			<view class="label">产品单位</view>
			<view class="right">{{info.unit ? info.unit : ''}}</view>
		</view>
		<view class="proli">
			<view class="label">产品零售价</view>
			<view class="right">{{info.price ? info.price : ''}}</view>
		</view>
		<view class="proli">
			<view class="label">产品批发价</view>
			<view class="right">{{info.wholesale ? info.wholesale : ''}}</view>
		</view>
		<view class="proli">
			<view class="label">产品图片</view>
			<image :src="info.img" @click="toPreimg" class="proimg"></image>
		</view>
		<view class="proli_con">
			<view class="label">产品详情</view>
			<view class="product_Detail">
				<rich-text :nodes="detail"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	import { netProductDetail } from '@/api/kehu.js'
	
	export default{
		data() {
			return{
				id:'',
				info:{},
				detail:''
			}
		},
		onLoad(options) {
			this.id = options.id
			//商品详情
			this.getDetail()
		},
		methods:{
			getDetail() {
				netProductDetail({id:this.id}).then(res=>{
					this.info = res.data
					this.handleDetail(res.data)
				})
			},
			handleDetail(data) {
				let detail = data.description
				var jsonDa = JSON.stringify(detail).replace(/<img/gi, "<img class='richImg' style='height:auto!important;width:100%;'");
				var newResData = JSON.parse(jsonDa);
				console.log(newResData,'=====')
				this.detail = newResData
			},
			toPreimg() {
				let url = this.info.img
				uni.previewImage({
					urls: [ url ]
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warpbox{
		background:#fff;
	}
	.proli_con{
		padding:24rpx 30rpx;
		.label{
			font-size:24rpx;
			color:#333;
			margin-bottom:24rpx;
		}
		.product_Detail{
			width:100%;
			font-size:24rpx;
			rich-text .richImg{
			  max-width: 100%;
			  max-height: 100%;
			  vertical-align: middle;
			  height: auto!important;
			  width: auto!important;
			}
		}
	}
	.proli{
		padding:24rpx 30rpx;
		border-bottom:1rpx solid #f5f5f5;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.label{
			font-size:24rpx;
			color:#333;
		}
		.right{
			font-size:24rpx;
			color:#999;
		}
		.proimg{
			width:100rpx;
			height:100rpx;
		}
	}
	.pro_text{
		padding:24rpx 30rpx;
		border-bottom:1rpx solid #f5f5f5;
		.label{
			font-size:24rpx;
			color:#333;
		}
		.partlist{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top:30rpx;
			.partli{
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right:24rpx;
				.partimg{
					width:100rpx;
					height:100rpx;
				}
				.partname{
					font-size:24rpx;
					color:#333;
					margin-top:10rpx;
				}
			}
		}
	}
</style>