<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;">
				<view style="color: #303133;font-weight: bold;font-size: 32rpx;">
					模板选择
				</view>
				<text style="font-size: 24rpx;color: #ccc;margin-left: 30rpx;">Template Selection</text>
			</view>
			<image src="../static/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/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/vlog/icon/check.png" class="icon"></image>
					</view>
				</view>
			</view>
			<view style="display: flex;margin-top: 30rpx;">
				<view style="color: #303133;font-weight: bold;font-size: 32rpx;">
					详细参数
				</view>
				<text style="font-size: 24rpx;color: #ccc;margin-left: 30rpx;">Parameters</text>
			</view>
			<image src="../static/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>
