<template>
	<view class="content">
		<scroll-view :scroll-top="scrollTop" :style="{ height: scrollViewHeight-safeAreaBottom + 'px'}" class="scroll-view" scroll-y="true" @scroll="scroll" :scroll-into-view="introductionId">
			<!--轮播图-->
			<view class="carousel">
				<swiper class="swiper" @change="swiperChange">
					<swiper-item v-for="(item, index) in goods.image" :key="index">
						<view @click="showPreviewImages = true">
							<image :src="item" class="good-image" mode="aspectFill"></image>
							<!-- <video v-if="goodsData.picVideo" style="width: 18.8rem;height: 18.8rem;" autoplay="true" loop="false" muted="true" mode="widthFix" :src="goodsData.picVideo"></video> -->
						</view>
					</swiper-item>
				</swiper>
				<view class="indictor" v-if="indictorLength > 0"><text class="indictor-txt">{{ currentPosition}} / {{ indictorLength }}</text></view>
			</view>
		
			<!--商品标题，价格-->
			<view class="good-info">
				<view class="goods-info-left">
					<view class="good-price-share">
						<view class="good-price">
							<text class="sail-price">{{goods.skuDetail.sellingPrice}}<text class="icon">积分</text></text>
						</view>
					</view>
					<view class="good-title">
						{{goods.skuDetail.skuName}}
					</view>
				</view>
			</view>
		
			<!--商品属性-->
			<view class="good-attr">
				<view class="good-attr-rule" @click="showSkuDialog" >
					<text class="attr-name">已&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;选</text>
					<text>:</text>
					<text class="attrs">{{goods.skuDetail.denomination}}</text>
					<image class="right-row" src="../../static/arrow-right.png"></image>
				</view>
				<view class="good-attr-rule" style="border: none;">
					<text class="attr-name">购买限制</text>
					<text>:</text>
					<text class="attrs">{{goods.skuDetail.validityType}}</text>
				</view>
			</view>
		
			<!--商品介绍-->
			<view class="good-introduction-top">
				<image class="good-introduction-line" src="../../static/goods-left.png" mode=""></image>
				<text class="good-introduction-txt">商品介绍</text>
				<image class="good-introduction-line" src="../../static/goods-right.png" mode=""></image>
			</view>
			<view class="good-introduction" id="good-introduction">
				<rich-text :nodes="formatRichText(goods.skuDetail&&goods.skuDetail.info||'')" class="rich-text"></rich-text>
			</view>
		</scroll-view>
		<!--商品详情底部功能-->
		<view class="good-detail-bottom">
			<view class="function-area" @click="goHome">
				<image class="function-icon" src="../../static/goods-home.png"></image>
				<text class="function-txt">首页</text>
			</view>
			<view class="function-area"  @click="clickCustomer()">
				<image class="function-icon" src="../../static/goods-customer.png"></image>
				<text class="function-txt">客服</text>
			</view>
			<view class="exchange" @click="showSkuDialog"><text class="exchange-txt">立即兑换</text></view>
		</view>
		<goodsSelect :goods="goods" closeName="showSku" v-show="showSku" @certain="goSubmit"></goodsSelect>
		<previewImages v-if="showPreviewImages" :picList="goods.image" :current="currentPosition" indicatorDots="true"></previewImages>
		<setPwdAlert closeName="showPwdAlert" v-show="showPwdAlert"></setPwdAlert>
	</view>
</template>

<script>
	// import goodsSelect from '../../components/goodsSelect/goodsSelect'
	export default {
		data() {
			return {
				skuNo: '',
				spuNo: '',
				goods: {},
				indictorLength: 0,
				scrollViewHeight: '',
				safeAreaBottom: this.SafeAreaBottom,
				showPreviewImages: false,
				currentPosition: 1,
				showSku: false,
				showPwdAlert: false,
				showGoodDetail: false,
				imgList: [], // 图片列表
				isLogin: this.$store.state.isLogin,
			};
		},
		// components: { goodsSelect },
		onLoad(options) {
			console.log(options);
			this.scrollViewHeight = this.LRScreenHeight - this.CustomBarHeight - this.StatusBarHeight - uni.upx2px(120) - uni.upx2px(64);
			this.spuNo = options.spuNo
			this.skuNo = options.skuNo
			this.getDetail()
		},
		methods: {
			getDetail() {
				let params = {'skuNo': this.skuNo, 'spuNo': this.spuNo}
				this.$net.get('/goods/sku/detail', params).then(res => {
					if (res.code === 200) {
						this.goods = res.data
						this.indictorLength = this.goods.image.length;
						uni.setNavigationBarTitle({
							title:this.goods.skuDetail.name
						})
					} else {
						this.toast(res.message)
					}
				})
			},
			showSkuDialog() {
				if (this.$store.state.userInfo.settingCheckCode === 0) {
					this.showPwdAlert = true
					return
				}
				this.showSku = true
			},
			swiperChange(e) {
				this.currentPosition = e.detail.current + 1
			},
			dissmissPreviewImages() {
				this.showPreviewImages = false
			},
			buyNow(selectShop) {
				if (!this.$store.state.isLogin) {
					this.$router.push('Login')
					return
				}
				// selectShop.goodsId = this.goodsData.spuResp.id;
				// selectShop.goodsName = this.goodsData.spuResp.name
				// selectShop.address = this.userAddress
				// this.refreshGoodsData(selectShop)
				// this.$router.push('onlineOrderSub')
			},
			goHome() {
				uni.switchTab({
					url:'../../pages/home/home'
				})
			},
			formatAttrStr(attrs) {
				let str = '';
				for(let i = 0; i < attrs.length; i++) {
					str = str + attrs[i] + (i === attrs.length - 1 ? '' : '，')
				}
				return str;
			},
			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:block;"');
			    newContent = newContent.replace(/\<p style="/gi, '<p style="text-align:left;padding-left:20px;padding-right:20px;');
				newContent = newContent.replace(/\<p/gi, '<p style="text-align:left;padding-left:20px;padding-right:20px;"');
				return newContent;
			},
			clickCustomer () {
				this.$router.push('WebView')
			},
			goSubmit (e) {
				if (!this.$store.state.isLogin) {
					this.$router.push('Login')
					return
				}
				console.log(e);
				let goods = {
					'num': e.goodsNum,
					'skuNo': e.goods.skuNo,
					'spuNo': this.spuNo,
					'img': e.goods.coverImg,
					'title': e.goods.skuName,
					'sellingPrice': e.goods.sellingPrice,
				}
				this.$store.commit('refreshSubmitGoods', goods)
				this.$router.push('SubmitOrder')
			}
		}
	}
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	background-color: #F5F5F5;
	.stick-tab {
		width: 100%;
		height: 80upx;
		display: flex;
		position: absolute;
		top: 0upx;
		z-index: 99999;
		background-color: #FFFFFF;
		justify-content: space-around;
		.stick-good {
			.stick-good-txt {
				font-size: 34upx;
				color: #333333;
				line-height: 74upx;
			}
			.stick-good-line {
				width: 64upx;
				height: 6upx;
				background: #ff0520;
				border-radius: 4upx;
				border: none;
			}
			.stick-good-txt-select {
				color: #ff0520;
				font-weight: 500;
			}
		}
	}
	.good-top {
		top: 0upx;
		position: sticky;
		background-color: #ffffff;
		z-index: 999;
		.nav-bar {
			background-color: #ffffff;
			width: 100%;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #efefef;
			.back-icon {
				width: 18upx;
				height: 34upx;
				margin-left: 34upx;
			}
		}
	}
	.scroll-view {
		width: 100%;
		.carousel {
			width: 100%;
			height: 750upx;
			position: relative;
			.swiper {
				width: 100%;
				height: 750upx;
				.good-video {
					width: 100%;
					height: 750upx;
					z-index: 9999;
				}
				.good-image {
					width: 100%;
					height: 750upx;
				}
			}
			.indictor {
				height: 40upx;
				background: #000000;
				opacity: 0.31;
				border: 2upx solid #FFFFFF;
				position: absolute;
				bottom: 24upx;
				right: 24upx;
				border-radius: 24upx;
				display: flex;
				.indictor-txt {
					font-size: 24upx;
					padding: 0upx 20upx;
					line-height: 40upx;
					height: 40upx;
					color: #FFFFFF;
					line-height: 40upx;
					text-align: center;
					margin: 0 auto;
					font-weight: 400;
				}
			}
		}
		.good-info {
			padding: 24upx 0upx 32upx 24upx;
			background-color: #FFFFFF;
			margin: 24upx 20rpx;
			border-radius: 16rpx;
			display: flex;
			.goods-info-left {
				width: 606rpx;
				// padding-top: 8rpx;
				.good-price-share {
					display: flex;
					justify-content: space-between;
					flex-direction: row;
					width: 100%;
					.good-price {
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						// flex: 1;
						.price-icon {
							width: 40upx;
							height: 40upx;
							margin-right: 8upx;
						}
						.sail-price {
							font-weight: 500;
							color: #FF0520;
							line-height: 62upx;
							font-size: 44upx;
							.icon {
								font-size: 28rpx;
								margin-left: 8rpx;
							}
						}
						.origin-price {
							font-size: 20upx;
							font-weight: 400;
							padding-top: 12upx;
							color: #848689;
							margin-left: 16upx;
							line-height: 28upx;
							text-decoration:line-through;
						}
					}
				}
				.good-title {
					font-size: 30upx;
					font-weight: bolder;
					line-height: 42upx;
					margin-top: 10upx;
					max-lines: 3;
					line-clamp: 3;
					color: #252525;
					text-overflow: ellipsis;
					position: relative;
					.img {
						width: 46rpx;
						height: 40rpx;
						content: ' ';
						display: inline-block;
					}
					.img-show {
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						top: 8rpx;
						left: 0;
					}
				}
			}
			.share {
				margin-left: 16rpx;
				// width: 80upx ;
				// height: 128upx ;
				border: none;
				background-color: transparent;
				padding-left: 0;
				padding-right: 0;
				text-align: left;
				line-height: 0;
				.share-img {
					width: 100upx ;
					height: 160upx ;
				}
			}
			button::after {
			  border: none;
			  text-align: center;
			}
		}
		.good-attr {
			margin: 0 20rpx;
			padding: 0upx 24upx;
			display: flex;
			flex-direction: column;
			border-radius: 16rpx;
			// width: 100%;
			background-color: #FFFFFF;
			.good-attr-rule {
				display: flex;
				padding-bottom: 5upx;
				border-bottom: 2upx solid #F5F5F5;
				padding: 24upx 0upx;
				align-items: center;
				.attr-name {
					font-size: 28upx;
					color: #333333;
					line-height: 40upx;
					white-space: nowrap;
					width: 120rpx;
					// text-align-last: justify;
					// -webkit-text-align-last: justify;
					text-align: justify;
					text-align-last: center;
					-moz-text-align-last: center;
				}
				.attr-name::after {
					content: ' ';
					width: 100%;
					height: 0;
					display: inline-block;
					visibility: hidden;
				}
				.attr-name-icon {
					font-size: 28upx;
					color: #848689;
					line-height: 40upx;
				}
				.attrs {
					line-height: 40upx;
					color: #666666;
					font-size: 28upx;
					margin-left: 40rpx;
				}
				.right-row {
					width: 12upx;
					height: 20upx;
					position: absolute;
					right: 48upx;
				}
			}
			.address {
				display: flex;
				padding-bottom: 5upx;
				border-bottom: 2upx solid #F5F5F5;
				padding: 24upx 0upx;
				width: 100%;
				.attr-name {
					font-size: 28upx;
					color: #848689;
					line-height: 40upx;
					margin-right: 48upx;
					white-space: nowrap;
				}
				.no-address {
					font-size: 28rpx;
					color: #FF0520;
				}
				.address-time {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					overflow: hidden;
					.good-address {
						display: flex;
						justify-content: space-between;
						overflow: hidden;
						.good-address-txt {
							font-size: 28upx;
							color: #252525;
							line-height: 40upx;
							white-space: nowrap;
							text-overflow: ellipsis;
							margin-right: 80upx;
							overflow: hidden;
						}
						.right-row {
							width: 24upx;
							height: 24upx;
							position: absolute;
							right: 24upx;
						}
					}
					.send-good-time {
						font-size: 28upx;
						color: #848689;
						line-height: 40upx;
						margin-top: 10upx;
					}
				}
			}
			.freight {
				padding-bottom: 5upx;
				border-bottom: 2upx solid #F5F5F5;
				padding: 24upx 0upx;
				.attr-name {
					font-size: 28upx;
					color: #848689;
					line-height: 40upx;
					margin-right: 48upx;
					white-space: nowrap;
				}
				.free-freight {
					line-height: 40upx;
					color: #252525;
					font-size: 28upx;
				}
			}
		}
		.good-introduction-top {
			display: flex;
			width: 100%;
			margin-top: 48rpx;
			height: 42rpx;
			justify-content: center;
			align-items: center;
			.good-introduction-line {
				width: 160upx;
				height: 2upx;
				display: block;
			}
			.good-introduction-txt {
				font-size: 30upx;
				color: #333333;
				line-height: 44rpx;
				margin-left: 40upx;
				margin-right: 40upx;
				white-space: nowrap;
			}
		}
		.good-introduction {
			background-color: #FFFFFF;
			width: 100%;
			align-items: center;
			text-align: center;
			display: flex;
			flex-direction: column;
			margin-top: 24upx;
			.rich-text {
				width: 100%;
			}
		}
	}
	.address-no-buy {
		width: 100%;
		height: 64rpx;
		background-color: #FFEBED;
		font-size: 24rpx;
		color: #FF0520;
		text-align: center;
		line-height: 66rpx;
	}
	.good-detail-bottom {
		width: 100%;
		height: 120upx;
		display: flex;
		background: #FFFFFF;
		justify-content: space-around;
		align-items: center;
		border-top: 2upx solid #F8F8F8;
		.function-area {
			display: flex;
			flex-direction: column;
			.function-icon {
				width: 48upx;
				height: 48upx;
			}
			.function-txt {
				font-size: 20upx;
				color: #686868;
				width: 48upx;
				line-height: 28upx;
				margin-top: 2upx;
				text-align: center;
			}
		}
		.exchange {
			width: 526upx;
			height: 80upx;
			background: #FF0520;
			border-radius: 40upx;
			text-align: center;
			.exchange-txt {
				font: 32upx;
				color: #FFFFFF;
				text-align: center;
				line-height: 80upx;
			}
		}
	}
}
</style>
