<template>

	<loading-state ref="pageView" @request="request">
		<view>
			<image :src="data.picUrl" style="width: 100vw;height: 80vw;"></image>
			<!-- <view
				style="margin-top: 9px;margin-left: 9px;margin-right: 9px;border-top-left-radius: 13px;border-top-right-radius: 13px;display: flex;flex-direction: column;align-items: center;background-color: #FFFFFF;padding-top: 11px;">
				<image src="../../static/goods_price_bg.png"
					style="width: 90vw;height: 16vw;border-radius: 10px;position: absolute;"></image>
				<view
					style="display: flex;flex-direction: row;justify-content: space-between;width: 80vw;position: relative;height: 16vw;align-items: center;color: white;">
					<view>
						<text style="font-size: 14px;font-weight: 600;">￥</text>
						<text style="font-size: 24px;margin-left: 7px;font-weight: 500;">{{data.price}}</text>
					</view>
					<view>价值</view>
				</view>

				<view
					style="left: 25px;font-size: 18px;width: 90vw;margin: 10px 0px;font-weight: 600;margin-left: 18px;">
					{{data.name}}
				</view>
			</view>

			<view style="display: flex;flex-direction: column;align-items: center;margin-left: 9px;margin-right: 9px;">
				<view
					style="border-bottom-left-radius: 13px;border-bottom-right-radius: 13px;background-color: #f9f9f9;width: 100%;display: flex;flex-direction: row;">
					<image src="../../static/guige.png"
						style="width: 21px;height: 21px;margin-left: 12px;margin-top: 9px;margin-bottom: 12px;"></image>
					<view
						style="height: 21px;line-height: 21px;margin-top: 9px;font-size: 13px;color: #666666;margin-left: 5px;">
						规格：
						{{data.remarks}}
					</view>
				</view>
			</view> -->

			<view style="display: flex;flex-direction: column;background: #fff;padding: 20px;margin-top: 10px;
			 border-top-left-radius: 20px;border-top-right-radius: 20px;height: 100%;">

				<text style="font-size: 18px;font-weight: 600;font-family: sans-serif;color: #333;">{{data.name}}</text>

				<view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 10px;">
					<text style="font-size: 13px;color: #666;">规&ensp;&ensp;&ensp;&ensp;格</text>
					<text style="font-size: 13px;color: #999;">{{data.remarks}}</text>
				</view>

				<view style="display: flex;flex-direction: row;align-items: center;margin-top: 20px;">

					<view style="width: 2px;height: 15px;background: #FF7A11;margin-right: 10px;"></view>
					<text style="font-size: 14px;font-weight: 600;font-family: sans-serif;color: #333;">商品详情</text>

				</view>

				<view style="margin-top: 10px;" v-show="!data.appContent==''">
					<rich-text :nodes="data.appContent | formatRichText" ></rich-text>
				</view>



			</view>

		</view>
	</loading-state>
</template>

<script>
	export default {
		data() {
			return {
				page: {
					sid: ''
				},
				data: {
					picUrl: '',
					name: '',
					price: '',
					remarks: '',
					appContent: ""
				}
			}
		},
		onLoad(options) {
			this.page.sid = options.sid
			this.request()
		},
	filters: {
			/**
			 * 处理富文本里的图片宽度自适应
			 * 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|*}
			 */
			formatRichText(html) {
				//控制小程序中图片大小
				if (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;
				} else {
					return '暂无商品详情';
				}
			},
		},
		methods: {
			request() {
				let _this = this
				_this.$api.goodsDetail(this.page.sid).then((resp) => {
					console.log(resp);
					_this.data = resp


					_this.$nextTick(() => {
						_this.$refs.pageView.setLoadState(2)
					})
				}).catch(e => {
					_this.$nextTick(() => {
						_this.$refs.pageView.setLoadState(1)
					})
				})
			}
		}
	}
</script>

<style>
	uni-page-body,
	page {
		background: #f3f4f6;
	}
</style>