<template>
	<view class="content">
		<view class="item">
			<image :src="productVo.priceStockList[0].imgList[0].url"></image>
			<view class="title" style="padding-top: 35rpx;">
				<text>规格:{{productVo.priceStockList[0].standardName || ""}}</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" mode="" style="width: 100%;height: 15rpx;"></image>
		<view style="display: flex;justify-content: space-around;margin-top: 20rpx;">
			<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="coverItem" v-for="(item,index) in imgList2" :key="index">
					<image class="img" :src="item.url" mode="" @click="changeCover(item.url)"></image>
					<u-icon v-if="cover===item.url" class="icon" name="checkmark-circle-fill" color="#2979FF" size="50">
					</u-icon>
				</view>
			</view>
		</view>
		<view class="" v-else>
			<view class="cover">
				<view class="coverItem" v-for="(item,index) in imgList3" :key="index">
					<image class="img" :src="item.url" mode="" @click="changeinsidePages(item.url)"></image>
					<u-icon v-if="insidePages===item.url" class="icon" name="checkmark-circle-fill" color="#2979FF"
						size="50"></u-icon>
				</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: 15rpx;"></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>
</template>
<script>
	export default {
		data() {
			return {
				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.productVo = res.data.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({
				// 		title: '提示',
				// 		content: '请选择封面',
				// 	});
				// }
				// if (this.insidePages === "") {
				// 	return uni.showModal({
				// 		title: '提示',
				// 		content: '请选择内页',
				// 	});
				// }
				this.$u.route({
					url: 'pages/vlog/uploadPictures/uploadPictures',
					params: {
						cover: this.cover,
						insidePages: this.insidePages
					}
				})
			}
		}
	}
</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: 30rpx 20rpx 20rpx 20rpx;

			image {
				width: 48%;
				height: 220rpx;
				border-radius: 10rpx;
			}

			.title {
				width: 48%;
				height: 220rpx;
				padding-top: 10rpx;
				margin-top: 20rpx;
			}
		}

		.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-between;

			.coverItem {
				width: 48.5%;
				height: 220rpx;
				position: relative;
				padding-top: 20rpx;

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

				.icon {
					position: absolute;
					top: 25rpx;
					right: 5rpx;
				}
			}
		}

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

	.btnn {
		background-color: #ECF4FF;
		width: 25%;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 26rpx;
	}

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

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