<template>
	<page-container title="商城好物">
		<banner :type-id="10" :height="326"></banner>
		<view style="padding-bottom: 300rpx; background-color: white;">
			<view class="" style="display: flex; flex-direction: column;">
				<view class="grid-container"
					:style="datas.length === 0 ? 'display:flex;justify-content:center;align-items:center;' : ''">
					<empty-state v-if="datas.length === 0" message="暂无商品数据"></empty-state>
					<view v-else v-for="(item, index) in datas" :key="index" class="grid-item"
						@click="order_money(item)">

						<view class=""
							style="background-color: #D8D8D8;  height: 324rpx; border-radius: 16rpx  16rpx  0rpx  0rpx;">
							<image :src="item.imgurl"
								style=" width: 326.39rpx; height: 324rpx; position: absolute; left: 2rpx; border-radius: 16rpx"
								mode="">
							</image>
						</view>
						<view class="goods-name hang1" style=" width: 290rpx;">
							<text style="color: #333333; font-size: 27rpx;">{{ item.title }}</text>
						</view>
						<view class="price-box">
							<view class="price">
								<text>￥<text style="font-size: 24rpx;">{{ item.price }}</text></text>
							</view>
						</view>
						<view class="num-box">
							<view class="num ml10"> {{ item.sale_stock }}/{{ item.stock }} </view>
							<view class="box icon">
								<image :src="$img1('index/box.png')" lazy-load></image>
							</view>
						</view>
					</view>

				</view>

			</view>
			<uni-popup ref="pop" type="bottom">
				<view v-if="orderData" class="buy-pop relative">
					<view class="buy-pop-hd">
						<view style="width: 24rpx;">
						</view>
						<text class="">确认订单</text>
						<view class="close icon" @click="close('pop')">
							<image :src="$img('/static/img/close2.png')" lazy-load></image>
						</view>
					</view>
					<view class="buy-card">
						<view class="buy-info">
							<view class="pic">
								<image :src="orderData.goods.imgurl_detail" style="width: 190rpx; height: 190rpx;"
									lazy-load>
								</image>
							</view>
							<view class="info-r">
								<view class="hang1" style="width: 100%;	color: #333333; font-size: 24rpx;">
									{{ orderData.goods.title }}
								</view>
								<view class="type">类型:明信片</view>

								<view class="price-num">
									<view class="price" style="font-size: 16rpx;">
										¥<text style="font-size: 28rpx;">{{ orderData.goods.price }}</text>
									</view>
									<view class="num">×{{ orderData.goods.prize_num }}</view>
								</view>
							</view>
						</view>

					</view>
					<view class="br20 mt20" style="background: #FFFFFF;">
						<view class="pay-type" @click="changePay(0)">
							<view class="" style="width: 100%;	color: #333333;">
								微信支付
							</view>
							<view class="icon">
								<image v-if="zhifu == 0" :src="$img1('common/check_act.png')" lazy-load></image>

								<image v-else :src="$img1('common/check.png')" lazy-load></image>
							</view>
						</view>
						<!-- <view class="pay-type" @click="changePay(1)">

						<view class="" style="width: 100%;	color: #333333;">
							{{ $config.getAppSetting('currency2_name') }}
							{{ orderData.goods.price * 100 }} (剩余:{{ orderData.use_integral }})
						</view>

						<view class="icon">
							<image v-if="zhifu == 1" :src="$img1('common/check_act.png')" lazy-load></image>
							<image v-else :src="$img1('common/check.png')" lazy-load></image>
						</view>
					</view> -->

					</view>

					<view class="rule">
						<scroll-view class="rule-inner" scroll-y>
							<view v-html="sendRuleData"></view>
						</scroll-view>
					</view>
					<view class="agree" @click="isAgree = !isAgree">
						<view class="icon">
							<image v-if="isAgree" :src="$img1('common/check_act.png')" lazy-load></image>

							<image v-else :src="$img1('common/check.png')" lazy-load></image>
						</view>

						我已满18岁,阅读并同意

						<text @click.stop="$c.to({ url: '/pages/guize/guize?type=4' })">
							《用户协议》
						</text>

						<text @click.stop="$c.to({ url: '/pages/guize/guize?type=5' })">
							《隐私政策》
						</text>
					</view>



					<view class="pay-btn" v-if="zhifu == 0" @click="$c.noDouble(confirmSubmit(1))">
						<text>
							{{
								` ¥${orderData.price}`
							}}
						</text>
					</view>
					<view class="pay-btn" v-if="zhifu == 1" @click="$c.noDouble(pay(1))">
						<text>{{ orderData.price * 100 }}{{ $config.getAppSetting('currency2_name') }}</text>
					</view>
				</view>
			</uni-popup>
		</view>
	</page-container>




</template>

<script>
export default {
	components: {
		EmptyState: () => import('@/components/empty-state/empty-state.vue')
	},
	data() {
		return {
			statusBarHeight: 0,
			datas: [],
			advert: [],
			sendRuleData: '',
			goodsId: "",
			orderData: null,
			isAgree: true,
			isWXPay: true,
			useMoney: false,
			integral: true,
			zhifu: 0,
		}
	},
	onLoad() {
		// 获取系统信息
		uni.getSystemInfo({
			success: (res) => {
				// 状态栏的高度
				this.statusBarHeight = res.statusBarHeight + 20;
			}
		});

		this.getData();
		this.load();
		this.$c.getRule(10).then(res => {
			if (res.status == 1) {
				this.sendRuleData = res.data
			}
		});
	},
	onShow() {

		const curPages = getCurrentPages()[0]; // 获取当前页面实例
		if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {
			this.$mp.page.getTabBar().setData({
				selected: 2
			});
		}
	},
	methods: {
		load() {
			let that = this
			that.req({
				url: 'getAdvert?type_id=3',
				success(res) {
					if (res.status == 1) {
						that.advert = res.data
					}
				}
			})

		},
		getStatusBarHeight() {
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
			console.log('statusBarHeight', this.statusBarHeight);
		},

		getData() {
			let that = this
			let isWXPay = this.$config.GetVersion()

			that.req({
				url: 'goods',
				data: {
					type: '10',
					page: 1,
					use_money_is: this.useMoney ? 1 : 2,
					use_integral_is: this.isWXPay ? 1 : 2,
				},
				success(res) {
					if (isWXPay) {
						// that.datas = [];
						if (that.datas.length > 0) {
							that.datas = that.datas.slice(0, that.datas.length);
						}
						for (let index = 0; index < res.data.data.length; index++) {
							const element = res.data.data[index];
							if (element.title.indexOf('京东卡') == -1) {
								that.datas.push(element);
							}
						}
						return;
					} else {
						that.datas = res.data.data
					}
				}
			});
		},


		order_money(data) {
			console.log(234);
			this.goodsId = data.id;
			var that = this;
			this.req({
				url: 'mall_ordermoney',
				data: {
					prize_num: 1,
					goods_id: data.id,
					goods_num: 1,
				},
				success(res) {
					if (res.status == 1) {

						that.orderData = res.data
						that.zhifu = 0;
						that.$refs.pop.open()
					}
				}
			})
		},

		close(e) {
			this.$refs[e].close()
		},

		changePay(e) {
			if (this.zhifu != e) {
				this.zhifu = e;
			}
			if (this.zhifu == 1) {

			}

		},

		confirmSubmit(type) {

			if (!this.useMoney && !this.isWXPay) {
				uni.showToast({
					title: '请选择支付方式',
					icon: 'none',
				});
				return;
			}

			console.log("type", type);

			var that = this;

			let url = 'mall_ordermoney'

			let data = {
				goods_id: this.goodsId,
				prize_num: 1,
				goods_num: 1,
				use_money_is: 2,
				use_integral_is: 2,
				coupon_id: "",
				use_money2_is: this.useMoney ? 1 : 2
			}

			if (type == 1) {
				url = 'orderbuy'
			}


			this.req({
				url,
				data,
				success: async res => {
					if (res.status == 1) {
						if (type == 0) {
							console.log("res.data", res.data);
							this.orderData = res.data;
						}

						if (type == 1) {
							that.close('pop')
							if (res.data.status == 1) {

								const status = await that.$c.wxMpPay({
									data: res.data.res
								})
								if (status == 'success') {
									// that.getPrize(res.data.order_num)
									that.getData();
								}




							} else {
								that.$c.toast({
									title: res.msg,
									duration: 500,
									success: () => {
										// that.getPrize(res.data.order_num)
										that.getData();
									}
								})
							}
						}
					}
				}
			})

		},


		pay(type) {

			var pri = this.orderData.goods.price * 100;
			if (this.orderData.use_integral < pri) {
				uni.showToast({
					title: this.$config.getAppSetting("currency2_name") + '不足',
					icon: 'none',
				});
				return;
			}

			console.log("type", type);

			var that = this;

			let url = 'mall_orderbuy'

			let data = {
				goods_id: this.goodsId,
				prize_num: 1,
			}

			this.req({
				url,
				data,
				success: async res => {
					if (res.status == 1) {
						if (type == 0) {
							console.log("res.data", res.data);
							this.orderData = res.data;
						}

						if (type == 1) {
							that.close('pop')
							if (res.data.status == 1) {

								const status = await that.$c.wxMpPay({
									data: res.data.res
								})
								if (status == 'success') {
									// that.getPrize(res.data.order_num)
									that.getData();
								}




							} else {
								that.$c.toast({
									title: res.msg,
									duration: 500,
									success: () => {
										// that.getPrize(res.data.order_num)
										that.getData();
									}
								})
							}
						}
					}
				}
			})

		},


	},
}
</script>

<style lang="scss">
.title {
	width: 100%;
	top: 108rpx;
	position: absolute;
	display: flex;
	align-items: center;
	font-size: 34rpx;
	justify-content: center;
	color: black;
	z-index: 100;
}

.grid-container {
	display: grid;
	margin: 33rpx;
	padding-bottom: 200rpx;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	min-height: 55vh;
}

.grid-item {
	height: 487rpx;
	position: relative;
	background-color: #F8F8F8;
	border-radius: 0rpx 0rpx 16rpx 16rpx;
}

.goods-name {
	position: absolute;
	left: 25rpx;
	font-size: 20rpx;
	bottom: 90rpx;
}

.price-box {
	display: flex;
	position: absolute;
	left: 18rpx;
	bottom: 24rpx;
	justify-content: space-between;
	align-items: center;

	.price {
		font-weight: 500;
		font-size: 16rpx;
		color: #333333;
	}
}

.num-box {
	display: flex;
	align-items: center;
	position: absolute;
	bottom: 24rpx;
	right: 20rpx;

	.num {
		font-size: 18rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #6C6C6C;
	}

	.box {
		width: 20rpx;
		height: 18rpx;
		margin-left: 6rpx;
	}

	.icon {}
}

.buy-pop {
	padding: 0 30rpx;
	box-sizing: border-box;
	background: #F7F7F7;
	padding-bottom: 200rpx;
	z-index: 999;
	border-radius: 16rpx 16rpx 0rpx 0rpx;

	&::after {
		content: '';
		position: absolute;
		top: -62rpx;
		left: 0;
		width: 750rpx;
		height: 62rpx;
	}

	.buy-pop-hd {
		padding: 40rpx 0;
		padding-left: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		>text {
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
		}

		.close {
			width: 24rpx;
			height: 24rpx;
		}
	}

	.buy-card {
		border-radius: 20rpx;
		padding: 30rpx 30rpx 30rpx 30rpx;
		background: #FFFFFF;

		.buy-info {
			display: flex;

			.pic {
				width: 190rpx;
				height: 190rpx;
				border-radius: 10rpx;
			}

			.info-r {
				width: calc(100% - 190rpx);
				box-sizing: border-box;
				display: flex;
				flex-flow: column nowrap;
				justify-content: space-between;
				padding: 10rpx 10rpx 10rpx 30rpx;

				.title {
					font-size: 32rpx;
					font-weight: 400;
					color: #333333;
				}


				.type {
					font-size: 20rpx;
					font-weight: 400;
					color: #999999;
				}

				.price-num {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 16rpx;

					.price {
						ffont-weight: 500;
						font-size: 35rpx;
						color: #333333;
						font-size: 28rpx;
					}

					.num {
						font-size: 20rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
					}
				}
			}
		}

		.line {
			height: 1px;
			background: #222222;
			margin: 30rpx 0 10rpx;
		}

		.yhfs {
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}

		.card-row {
			padding: 16rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				>image {
					width: 32rpx;
					height: 32rpx;
				}

				>text {
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}

			.row-r {
				display: flex;
				align-items: center;

				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;

				.icon {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.card-row {
			.title {}

			.row-r {
				.icon {}
			}
		}
	}

	.pay-title {
		margin-top: 30rpx;
		font-size: 38rpx;
		font-weight: 400;
		color: #ffffff;
	}

	.pay-type {
		padding: 30rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		flex-direction: row;

		.icon {
			width: 32rpx;
			height: 32rpx;
		}

		.title {
			flex: 1;
			padding: 0 20rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #ffffff;
		}
	}

	.agree {
		display: flex;
		margin-top: 30rpx;

		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		line-height: 32rpx;

		.icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
	}

	.rule {
		padding: 20rpx;
		background: #F9F8E1;
		border-radius: 20rpx;
		box-sizing: border-box;
		margin: 20rpx 0 0;

		.rule-inner {
			max-height: 160rpx;
			font-size: 20rpx;
			font-weight: 400;
			color: #999999;
		}
	}

	.pay-btn {
		margin: 30rpx auto 0;
		width: 686rpx;
		height: 84rpx;
		background: url($imgurl+'common/payBtn.png') no-repeat 0 0 / 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		color: #CDEF27;

		>text:nth-child(1) {
			font-size: 28rpx;
		}

		>text:nth-child(2) {
			font-size: 36rpx;
		}
	}
}
</style>