<template>
	<view class="">
		<view class="header">
			<!-- 顶部导航栏 -->
			<z-nav-bar title="商品详情" bgColor="red"></z-nav-bar>
		</view>
		<view class="swiperBox">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
				style="width: 100%;height: 100%;">
				<swiper-item v-for="(item,index) in swiperlist" :key="index" style="width: 100%;height: 100%;">
					<image :src="item" mode="scaleToFill" style="width: 100%;height: 100%;"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="commodityContent">
			<view class="commodityPrice">
				<span>￥</span><em>{{productInfo.price}}</em>
				<span class="oldPrice " v-if="productInfo.activityPrice">原价￥{{productInfo.activityPrice}}</span>
			</view>
			<view class="commodityyName">
				{{productInfo.productName}}
				<span v-if="productInfo.productStock==0" style="color: #aaa;font-size:26rpx;">（无货）</span>
				<view><text class="SoldNumber">已售<span>{{productInfo.sumSales}}</span>件</text></view>
			</view>
			<view class="contentButton">
				<u-tabs :scrollable="false" :list="contentButtonList" @click="contentButtonClick"></u-tabs>
			</view>
			<!-- 详情 + 评价1 -->
			<view class="bookInfo">
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="6"><span>书名：{{productInfo.productName}}</span></u-col>
					<u-col span="6" v-if="productInfo.author"><span>作者：{{productInfo.author}}</span></u-col>
				
				
					<u-col span="6" v-if="productInfo.publisher"><span>出版社：{{productInfo.publisher}}</span></u-col>
					<u-col span="6" v-if="productInfo.pubDate"><span>出版时间：{{ productInfo.pubDate | formatDate }}</span></u-col>				
				
					<u-col span="6" v-if="productInfo.format"><span>开本：{{productInfo.format}}</span></u-col>
					<u-col span="6" v-if="productInfo.pageNum"><span>页数：{{productInfo.pageNum}}</span></u-col>
				
				
					<u-col span="6" v-if="productInfo.quality"><span>内文用纸材质：{{productInfo.quality}}</span></u-col>
				
				</u-row>
			</view>
			<!-- <view class="commodityIntroduce" v-html="productInfo.productDetails"> -->
			<view class="commodityIntroduce">	
				<view v-if="productInfo.productDetails" >
				<rich-text v-if="productInfo.productDetails" class="xiangqing" :nodes="productInfo.productDetails|formatRichText"></rich-text>
			</view>
			</view>
			<view style="height: 120rpx;"></view>
		</view>
		<uni-goods-nav class="goods_nav" :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
			@buttonClick="buttonClick" />		
	</view>
</template>

<script>
	import $http from '@/config/requestConfig.js';
	import {
		mapState
	} from 'vuex';
	import loginVue from '../user/login.vue';
	export default {
		data() {
			return {
				options: [{
					icon: 'cart',
					text: '购物车'					
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],
				contentButtonList: [{
						name: '商品详情'
					}					
				],
				// 轮播图数据
				swiperlist: [],
				// 商品详情数据
				productInfo: {},
				productAmount: 1, // 商品数量
				cartList: [], // 购物车列表
			}
		},
		onLoad(e) {
			// 获取商品详情
			uni.showLoading({
				title: '加载中'
			});			
			this.$http
				.post('/book/shopproduct/info/' + e.id)
				.then(res => {					
					this.productInfo = res.shopProduct
					if (this.productInfo.productImageList == null || this.productInfo.productImageList == '') {
						this.swiperlist.push('../../static/icon/home_ban_1.jpg')
					} else {
						let imgList = this.productInfo.productImageList.split(",")
						// if(this.productInfo.productDetails != null){
						// 	let info = this.formatRichText(this.productInfo.productDetails)
						// }
						// this.productInfo.productDetails = info						
						for (var i = 0; i < imgList.length; i++) {
							this.swiperlist.push(imgList[i])
						}
					}
					uni.hideLoading();
				})
		},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			// 点击购物车
			onClick(e) {
				console.log(e.content.text)
				uni.switchTab({
					url: '../peanut/shopping'
				});				
			},
			// 点击按钮组间
			buttonClick(e) {
				console.log(e)	
				if(e.index == 0){
				// 点击的是加入购物车
					this.addCart()
				}else{
				// 点击的是立即购买
				this.goPurse()
				}
			},
			// 加入购物车
			addCart() {
				if (this.productInfo.productStock == 0) {
					uni.showToast({
						title: '商品库存不足',
						icon: "none",
						duration: 1000,
					});
				} else {
					this.$http
						.post(`book/ordercart/getCartList?userId=${this.userInfo.id}`)
						.then(res => {
							this.cartList = res.cartList
							this.isAdd()
						})
				}

			},
			isAdd() {
				// 统计商品信息
				let data = {
					"userId": this.userInfo.id,
					"productId": this.productInfo.productId,
					"productAmount": this.productAmount,
					"price": this.productInfo.price
				}
				// 判断列表是否为空
				if (this.cartList.length > 0) {
					let flag = ''
					let shagnpin = {}
					// 循环购物车列表
					flag = this.cartList.some((item, index) => {
						if (item.productId == data.productId) {
							shagnpin = item
							shagnpin.productAmount = item.productAmount + 1
							return true
						}
					})
					if (flag) {
						// 已在购物车中添加
						$http.request({
							url: "book/ordercart/update",
							method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
							data: shagnpin,
							header: { //默认 无 说明：请求头
								'Content-Type': 'application/json'
							},
						}).then(res => {
							if (res.code == 0) {
								uni.showToast({
									title: '加入购物车成功',
									duration: 1000,
								});
							}
						})
					} else {
						// 加入购物车
						$http.request({
							url: "book/ordercart/save",
							method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
							data,
							header: { //默认 无 说明：请求头
								'Content-Type': 'application/json'
							},
						}).then(res => {
							if (res.code == 0) {
								uni.showToast({
									title: '加入购物车成功',
									duration: 1000,
								});
							}
						})
					}

				} else {
					// 购物车列表为空时直接加入购物车
					$http.request({
						url: "book/ordercart/save",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data,
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					}).then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: '加入购物车成功',
								duration: 1000,
							});
						}
					})
				}
			},

			// 购买下单
			goPurse() {
				if (this.productInfo.productStock == 0) {
					uni.showToast({
						title: '商品库存不足',
						icon: "none",
						duration: 1000,
					});
				} else {
					uni.navigateTo({
						url: '../bookShop/settlement?type=2&list=' + this.productInfo.productId
					});
				}

			},
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:10rpx auto;"');
					    return newContent;
					},
			// 去购物车
			goCard() {
				uni.switchTab({
					url: '../peanut/shopping'
				});
			},		

		},
		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) { //控制小程序中图片大小
					    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;
					},
					// 时间格式化
					formatDate(date){
					                console.log(date)
					                let newDate = new Date(date);
					                let year = newDate.getFullYear();
					                let month = newDate.getMonth().toString().padStart(2,0);
					                let day = newDate.getDay().toString().padStart(2,0);
					                return year + '-' + month + '-' + day;
					            }					
				}	
	}
</script>
<style lang="scss" scoped>
	.xiangqing {
		overflow: hidden;
		img{display: block; max-width: 100%;}
	}
	.goods_nav {
		z-index: 1;
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.SoldNumber {
		font-size: 24rpx;
		color: #999;
		margin-top: 16rpx;
	}

	.bookInfo {
		padding: 20px 10px;
		line-height: 30rpx;
		background-color: #fff;
		font-size: 26rpx;
		color: #555;
		border-radius: 20rpx 20rpx 0 0
	}

	.header {
		position: fixed;
		top: 0%;
		left: 0%;
		z-index: 999;
	}

	.contentButton {
		margin: 10px 0;
	}

	.swiperBox {
		width: 100%;
		height: 375px;
		margin-top: 150rpx;
	}

	.commodityContent {

		margin: 30rpx 20rpx 10rpx 20rpx;
		height: auto;

		.commodityPrice {
			background-image: linear-gradient(0deg, #f7fffc 0%, #def0ea 100%);
			border-top: 1px solid #fff;
			// background-color: #f7faf9;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			color: #ffa200;
			padding: 20rpx 20rpx 40rpx 20rpx;

			em {
				font-size: 74rpx;
				font-style: normal;
			}

			.oldPrice {
				margin-left: 10rpx;
				font-size: 32rpx;
				color: #999;
			}
		}

		.commodityyName {
			margin-top: -20rpx;
			padding: 30rpx 20rpx 40rpx 20rpx;
			font-size: 40rpx;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			background-color: #fff;
		}

		.commodityIntroduce {
			font-size: 30rpx;
			background-color: #fff;
			padding: 0 20rpx 30rpx 20rpx;
		}
	}

	.footer {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0%;

		.shopcard {
			margin: 0 0 0 30rpx;
			text-align: center;
			font-size: 20rpx;
			color: #eba00b;
		}

		.operate {
			display: flex;

			view {
				font-size: 32rpx;
				font-weight: 700;
				color: #fff;
				padding: 32rpx 40rpx;
				letter-spacing: 0.8px;
			}

			.addShopCar {
				background-color: #eba00b;
			}

			.goBuy {

				background-color: #cf3906;
			}
		}
	}
</style>
