<template>
	<view class="content">
		<view v-if="showBody">
			<view class="item">
				<image :src="productVo.priceStockList[0].imgList[0].url"></image>
				<view class="title" style="padding-top: 35rpx;">
					<text>规格: <text
							v-if="productVo.priceStockList[0].standardName">{{productVo.priceStockList[0].standardName}}张</text></text>
					<view style="margin-top: 30rpx;">
						<text class="noprice">¥{{productVo.priceStockList[0].originalPrice || ""}}</text>
						<text class="price">¥{{productVo.priceStockList[0].sellingPrice || ""}}</text>
					</view>
				</view>
			</view>
			<view class="" style="display: flex;">
				<u-section title="模板选择" :right="false" color="#303133"></u-section>
				<text style="font-size: 24rpx;color: #ccc;margin-left: 30rpx;">Template Selection</text>
			</view>
			<image src="../../../static/img/vlog/icon/fengexian.png" style="width: 100%;height: 5rpx;"></image>
			<view style="display: flex;justify-content: space-around;margin-bottom: 20upx;width: 75%;margin: 20upx auto;">
				<button type="default" class="btnn" :class="current===0?'active':'noactive'"
					@click="current=0">封面</button>
				<button type="default" class="btnn" :class="current===1?'active':'noactive'"
					@click="current=1">内页</button>
			</view>
			<view v-if="current===0">
				<view class="cover">
					<view class="coverItem1" v-for="(item,index) in imgList2" :key="index">
						<image class="img" :src="item.url" @click="changeCover(item.url)"></image>
						<image v-if="cover===item.url" src="../../../static/img/vlog/icon/check.png" class="icon"></image>
					</view>
				</view>
			</view>
			<view v-else>
				<view class="cover">
					<view class="coverItem" v-for="(item,index) in imgList3" :key="index">
						<image class="img" :src="item.url" @click="changeinsidePages(item.url)"></image>
						<image v-if="insidePages===item.url" src="../../../static/img/vlog/icon/check.png" class="icon"></image>
					</view>
				</view>
			</view>
			<view style="display: flex;margin-top: 30rpx;">
				<u-section title="详细参数" :right="false" color="#303133"></u-section>
				<text style="font-size: 24rpx;color: #ccc;margin-left: 30rpx;">Parameters</text>
			</view>
			<image src="../../../static/img/vlog/icon/fengexian.png" mode="" style="width: 100%;height: 5rpx;"></image>
			<image :src="item.url" mode="widthFix" v-for="(item,index) in imgList1" :key="index" style="width: 100%;border-radius: 10rpx;"></image>
			<view class="bottom" @click="beginMaking">上传照片制作</view>
		</view>
		<view v-else>

		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				showBody: false,
				productVo: {}, //产品详情
				imgList1: [], //详情列表
				imgList2: [], //封面列表
				imgList3: [], //内页列表
				current: 0, //封面内页切换
				cover: "", //封面
				insidePages: "", //内页

			}
		},
		onLoad(option) { //代替 vue 里面的 created
			uni.setNavigationBarTitle({
				title: option.name
			})
			this.getDetails(option.id)
		},
		onReady() { //代替 vue 里面的 mounted
		},
		methods: {
			getDetails(id) { //获取商品详情
				this.$request("scenic/user/product/findChoseProductInfo", {
					productId: id,
					openid: uni.getStorageSync("openid")
				}).then(res => {
					if (res.code === "00") {
						this.showBody = true
						this.productVo = res.data.productVo
						uni.setStorageSync('productVo', this.productVo) //保存选择的商品信息
						res.data.productVo.imgList.forEach(item => {
							if (item.location === 5) {
								this.imgList1.push(item)
							}
							if (item.location === 6) {
								this.imgList2.push(item)
							}
							if (item.location === 8) {
								this.imgList3.push(item)
							}
						})
					} else {
						uni.showModal({
							title: '提示',
							content: res.message,
							showCancel: false,
						})
					}
				})
			},
			changeCover(url) { //选择封面
				this.cover = url
			},
			changeinsidePages(url) { //选择内页
				this.insidePages = url
			},
			beginMaking() {
				if (this.cover === "") {
					return uni.showModal({
						showCancel: false,
						title: '提示',
						content: '请选择封面',
					});
				}
				if (this.insidePages === "") {
					return uni.showModal({
						showCancel: false,
						title: '提示',
						content: '请选择内页',
					});
				}
				let coverInside = {
					cover: {
						imgName: '封面',
						imgUrl: this.cover
					},
					inside: {
						imgName: '内页',
						imgUrl: this.insidePages
					}
				}
				uni.setStorageSync('coverInside', coverInside)
				let yeshu = this.productVo.priceStockList[0].standardName
				this.$u.route({
					url: 'pages/vlog/uploadPictures/uploadPictures?yeshu=' + yeshu
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-bottom: 100rpx;
		text-align: center;

		.item {
			display: flex;
			justify-content: space-between;
			padding: 15rpx 56rpx 52rpx 15rpx;

			image {
				width: 412rpx;
				height: 288rpx;
				border-radius: 10rpx;
				box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
			}

			.title {
				color: #999999;
				font-size: 28upx;
				width: 48%;
				height: 220rpx;
				padding-top: 10rpx;
				margin-top: 60rpx;
			}
		}

		.noprice {
			font-size: 24rpx;
			text-decoration: line-through;
			color: #ccc;
			font-weight: bold;
		}

		.price {
			font-size: 32rpx;
			color: #DE6F26;
			margin-left: 10rpx;
			font-weight: bold;
		}

		.cover {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			padding-bottom: 40upx;

			.coverItem {
				width: 328upx;
				height: 231upx;
				position: relative;
				margin-top: 20rpx;
				box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);

				.img {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}

				.icon {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					top: 10rpx;
					right: 10rpx;
				}
			}
			.coverItem1 {
				width: 556upx;
				height: 396upx;
				margin: 0 auto;
				position: relative;
				margin-top: 20rpx;
				box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
			
				.img {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			
				.icon {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					top: 10rpx;
					right: 10rpx;
				}
			}
		}

		.bottom {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 98rpx;
			background-color: #FFE600;
			right: 0;
			line-height: 98rpx;
			font-size: 36rpx;
			font-weight: bold;
			border-top-left-radius: 10rpx;
			border-top-right-radius: 10rpx;
		}
	}

	.btnn {
		background-color: #ECF4FF;
		width: 180upx;
		height: 64rpx;
		line-height: 64rpx;
		font-size: 28rpx;
	}

	.active {
		background-color: #2979FF;
		color: #fff;
	}

	.noactive {
		color: #2979FF;
	}
</style>
