<template>
	<!-- 商城 -->
	<view class="shop">
		<!-- 封面 -->
		<view class="shopCarousel">
			<img v-if="getShop.advertiseList" :src="getShop.advertiseList[3].pic" alt="">
		</view>
		<!-- 描述 -->
		<view class="describe">
			<view class="describeBox">
				<!-- 余额 -->
				<view class="balance">
					<span>幸运石余额</span>
					<image class="lucky" :src="require('@/static/Bitmap.png')" mode=""></image>
					<span>{{integration||0}}</span>
				</view>
				<!-- 商品倒计时 -->
				<view class="countDown">
					<p>
						<span>商品更新倒计时</span>
						3天15:03:52
					</p>
				</view>
			</view>
		</view>
		<!-- 滚动条 -->
		<u-notice-bar bg-color="#FFFDEE" color="#97702D" type="warning" :list="listScroll"></u-notice-bar>
		<!-- 商品 -->
		<view class="goodsListbox">
			<view class="goodsList">
				<view class="good" v-for="el in getShop.hotProductList" :key="el.id" @click="commodityDetails(el.id)">
					<view class="goodImg">
						<!-- <img :src="el.pic" alt=""> -->
						<u-lazy-load class="lazyImg" :image="el.pic"></u-lazy-load>
					</view>
					<span class="goodDescribe">
						{{el.name}}
					</span>
					<view class="goodPriceOrNum">
						<span class="price"><span class="small">￥</span>{{el.price}}</span>
						<view class="number">
							<image class="numberImg" :src="require('@/static/Bitmap.png')" mode=""></image>
							<span class="numberPrice">{{el.price*510}}</span>
						</view>

					</view>
				</view>

			</view>
			<u-divider margin-bottom="35" bg-color="#F7F7F7" fontSize="35" border-color="gray">盲盒陆续上新</u-divider>
		</view>
		<!-- 下拉物品 -->
		<view class="Details">
			<u-popup v-model="show" mode="bottom" :mask="true" width="750rpx" close-icon-color="#FFFFFF"
				:closeable="true" close-icon-size="60" close-icon="close-circle">
				<!-- 详细物品内容 -->
				<view class="DetailsContent">
					<!-- 确认兑换 -->
					<view class="confirm">
						<span>确认兑换</span>
					</view>
					<!-- 物品信息 -->
					<view class="message">
						<!-- 商品图片 -->
						<view class="messagePicture">
							<img :src="NumIdGoods.pic" alt="">
						</view>
						<!-- 商品标题 -->
						<view class="messageTitle">
							<!-- 文字信息 -->
							<view class="messageTitleFont">
								<p class="headerFont">{{NumIdGoods.name}}</p>
								<span>兑换商品不支持7天无理由退换</span>
							</view>
							<!-- 价钱 -->
							<view class="price">
								<image class="DetailsLucky" :src="require('@/static/Bitmap.png')" mode=""></image>
								<span class="priceFont">{{NumIdGoods.price*510}}</span>
							</view>
						</view>
					</view>
					<!-- 购买须知 -->
					<view class="stipulate">
						<view class="stipulateYes">
							<span>我已阅读并同意</span>
							<p class="">
								《幸运星球买家须知》
							</p>
						</view>
						<u-icon @click="consent" name="checkmark-circle-fill" :color="consentBtn?'red':'#DBDBDB'"
							size="50"></u-icon>
					</view>
					<!-- 支付 -->
					<view class="payment" v-if="NumIdGoods.price*510<=(integration||0)">
						<view class="paymentBtn" @click="exchangeBtn(NumIdGoods.id,NumIdGoods.price*510)">
							去支付{{NumIdGoods.price*510}}幸运石
						</view>
					</view>
					<!-- 余额不足 -->
					<view class="lacking" v-if="NumIdGoods.price*510>(integration||0)">
						<view class="lackingBtn">
							当前幸运石不足
						</view>
					</view>
				</view>

			</u-popup>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	//辅助函数
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				// 滚动条
				listScroll: [
					'滚动信息条',
					'产品送达时间请参考个人中心物流时间'
				],
				// 下拉物品
				show: false,
				// 购买须知按钮状态
				consentBtn: false,
			};
		},
		methods: {
			// 商品详情显示 获取商城对应物品数据
			commodityDetails(numId) {
				this.show = !this.show
				this.$store.dispatch("gainGoods", numId)
			},
			// 购买须知同意
			consent() {
				this.consentBtn = !this.consentBtn
			},
			// 点击兑换
			async exchangeBtn(isId, num) {
				if (this.consentBtn) {
					try {
						// 兑换物品
						await this.$store.dispatch("gainExchange", {
							integration: num,
							productId: isId,
							isToken: uni.getStorageSync("isToken")
						})
						this.$store.dispatch("gainInfo", uni.getStorageSync("isToken"))
						this.$refs.uToast.show({
							title: '兑换成功',
							type: 'success',
						})
					} catch (e) {
						this.$refs.uToast.show({
							title: e.msg,
							type: 'error',
						})
					}
				} else {
					this.$refs.uToast.show({
						title: '请勾选购买须知',
						type: 'error',
					})
				}



			}
		},
		created() {
			// 获取商城数据
			this.$store.dispatch("gainShopGoods")

		},
		onShow() {
			// 更新个人信息
			this.$store.dispatch("gainInfo", uni.getStorageSync("isToken"))
		},
		computed: {
			// 商城数据
			getShop() {
				return this.$store.state.shop.shopGoods
			},
			//商城对应物品数据
			...mapGetters(["NumIdGoods"]),
			// 幸运石
			integration() {
				return this.$store.state.code.integration
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F7F7F7;
	}

	* {
		margin: 0;
		padding: 0;
	}

	//封面
	.shopCarousel {
		width: 750rpx;
		height: 400rpx;
		img {
			width: 750rpx;
			height: 400rpx;
		}
	}

	// 描述
	.describe {
		width: 750rpx;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: white;

		.describeBox {
			width: 690rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.balance {
				display: flex;
				align-items: center;

				span {
					font-size: 15px;
				}

				.lucky {
					width: 20rpx;
					height: 40rpx;
					margin: 0 14rpx;
				}
			}

			.countDown {
				p {
					font-size: 13px;

					span {
						font-size: 12px;
						color: darkgray;
						margin-right: 15rpx;
					}
				}

			}
		}
	}

	// 商品列表
	.goodsListbox {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F7F7F7;
		padding-top: 20rpx;

		.goodsList {
			width: 688rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-bottom: 20rpx;

			.good {
				width: 336rpx;
				overflow: hidden;
				border-radius: 15rpx;
				background-color: white;
				margin-bottom: 15rpx;
				display: flex;
				align-items: center;
				flex-direction: column;

				.goodImg {
					width: 300rpx;
					height: 300rpx;
					margin-bottom: 30rpx;

					// img{
					// 	width: 100%;
					// 	height: 330rpx;
					// }
					.lazyImg {
						max-height: 300rpx !important;
						background-color: white !important;
					}
				}

				.goodDescribe {
					width: 320rpx;
					margin: auto;
					overflow: hidden;
					/* 设置元素为弹性伸缩盒 */
					display: -webkit-box;
					/* 设置弹性盒纵向排列 */
					-webkit-box-orient: vertical;
					/* 你要显示多少行 而且设置这个属性后，不需要单独设置ellipsis就可以显示为省略号*/
					-webkit-line-clamp: 2;
					font-size: 13px;

				}

				.goodPriceOrNum {
					width: 320rpx;
					margin: auto;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 20rpx 0;

					.price {
						font-weight: 700;
						color: #EF4F3F;
						font-size: 20px;

						.small {
							font-weight: 200;
							font-size: 13px;
						}
					}

					.number {
						display: flex;
						align-items: center;
						margin-top: 5px;

						.numberPrice {
							color: darkgray;
							font-size: 13px;

						}

						.numberImg {
							width: 20rpx;
							height: 40rpx;
							margin-right: 12rpx;
						}
					}

				}
			}

			// 到底了
			.divider {
				margin-top: 500rpx;
			}
		}

	}

	// 下拉商品内容
	// 下拉商品
	.Details {

		// 关闭按钮
		::v-deep .u-drawer-content {
			// background-color: red!important;

			.u-close {
				top: -85rpx !important;
				right: 35rpx !important;
			}

		}

		// 上边框颜色
		::v-deep .u-drawer-content-visible {
			// overflow: hidden;

			.u-drawer__scroll-view {
				border-top: 25rpx solid #CA81F7 !important;
				// border-image: linear-gradient(#CA81F7, #79ECFF, #FFE7BE) 250 50 20 20 !important;

			}
		}

		// 详细物品内容
		.DetailsContent {
			width: 750rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			// 确认兑换
			.confirm {
				width: 690rpx;
				height: 90rpx;
				line-height: 100rpx;
				text-align: left;
				font-size: 19px;
				margin-top: 10rpx;
			}

			// 商品信息
			.message {
				width: 690rpx;
				height: 380rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				//商品图片
				.messagePicture {
					width: 300rpx;
					height: 300rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #F4F4F4;

					img {
						width: 100%;
						height: 280rpx;
					}
				}

				// 商品标题
				.messageTitle {
					width: 360rpx;
					height: 300rpx;

					// 文字详细
					.messageTitleFont {
						width: 360rpx;

						.headerFont {
							font-size: 15px;
							overflow: hidden;
							/* 设置元素为弹性伸缩盒 */
							display: -webkit-box;
							/* 设置弹性盒纵向排列 */
							-webkit-box-orient: vertical;
							/* 你要显示多少行 而且设置这个属性后，不需要单独设置ellipsis就可以显示为省略号*/
							-webkit-line-clamp: 2;
							margin-bottom: 12rpx;
						}

						span {
							font-size: 11px;
							color: darkgray
						}
					}

					// 价钱
					.price {
						width: 360rpx;
						height: 60rpx;
						margin-top: 100rpx;
						display: flex;
						align-items: center;

						.DetailsLucky {
							width: 30rpx;
							height: 60rpx;
							margin-right: 20rpx;
						}

						.priceFont {
							font-size: 23px;
							font-weight: 700;
						}
					}
				}

			}




			// 购买须知
			.stipulate {
				width: 690rpx;
				height: 100rpx;
				background-color: white;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-right: 30rpx;

				.stipulateYes {
					display: flex;
					font-size: 13px;

					span {
						color: darkgray;
					}
				}

			}

			// 支付
			.payment {
				width: 750rpx;
				height: 160rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.paymentBtn {
					width: 690rpx;
					height: 100rpx;
					background-image: linear-gradient(to bottom right, #FFCB93, #F72934);
					border-radius: 10px;
					font-size: 17px;
					color: white;
					line-height: 100rpx;
					text-align: center;
				}
			}

			// 余额不足
			.lacking {
				width: 750rpx;
				height: 160rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.lackingBtn {
					width: 690rpx;
					height: 100rpx;
					background-color: gray;
					border-radius: 10px;
					font-size: 17px;
					color: white;
					line-height: 100rpx;
					text-align: center;
				}
			}
		}
	}
</style>