<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)"
							v-if="orderData != null && orderData.goodsExtend.pay_wechat == 1">
							<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)"
							v-if="orderData != null && orderData.goodsExtend.pay_currency2 == 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>
			<PayDialog ref="payDialog" />
		</view>
	</page-container>
</template>

<script>
import { getAdvert } from '@/common/server/config.js';
import { getGoodsList } from '@/common/server/goods.js';
import { calcMallOrderMoney, createMallOrder, createOrder } from '@/common/server/order.js';

export default {
	components: {
		EmptyState: () => import('@/components/empty-state/empty-state.vue')
	},
	onShareAppMessage() {
		let imageUrl = this.$config.getShareImageUrl();
		return {
			imageUrl: imageUrl,
			title: "友达上线,来就送！",
			path: '/pages/shouye/index?pid=' + uni.getStorageSync('userinfo').ID
		}
	},
	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
			});
		}
		this.$platform.getOrderNo(this).then(order_num => {
			if (order_num != null && order_num != "") {
				this.$c.msg("购买成功！");
			}
		})
	},
	methods: {
		async load() {
			// API: getAdvert?type_id=3
			const res = await getAdvert(3);
			if (res) {
				this.advert = res;
			}
		},
		getStatusBarHeight() {
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
			console.log('statusBarHeight', this.statusBarHeight);
		},

		async getData() {
			let isWXPay = this.$config.GetVersion();
			// API: goods
			const res = await getGoodsList({
				type: '10',
				page: 1,
				use_money_is: this.useMoney ? 1 : 2,
				use_integral_is: this.isWXPay ? 1 : 2,
			});
			
			if (res.status == 1 && res.data && res.data.data) {
				if (isWXPay) {
					if (this.datas.length > 0) {
						this.datas = this.datas.slice(0, this.datas.length);
					}
					for (let index = 0; index < res.data.data.length; index++) {
						const element = res.data.data[index];
						if (element.title.indexOf('京东卡') == -1) {
							this.datas.push(element);
						}
					}
				} else {
					this.datas = res.data.data;
				}
			}
		},


		async order_money(data) {
			console.log(234);
			this.goodsId = data.id;
			// API: mall_ordermoney
			const res = await calcMallOrderMoney({
				prize_num: 1,
				goods_id: data.id,
				num: 1,
			});
			
			if (res.status == 1) {
				this.orderData = res.data;
				this.zhifu = 0;
				if (this.orderData.goodsExtend.pay_wechat == 1) {
					this.zhifu = 0;
				} else if (this.orderData.goodsExtend.pay_currency2 == 1) {
					this.zhifu = 1;
				}
				this.$refs.pop.open();
			}
		},

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

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

			}

		},

		async confirmSubmit(type) {

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

			console.log("type", type);

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

			let res;
			if (type == 1) {
				// API: orderbuy
				res = await createOrder(data);
			} else {
				// API: mall_ordermoney
				res = await calcMallOrderMoney(data);
			}

			if (res.status == 1) {
				if (type == 0) {
					console.log("res.data", res.data);
					this.orderData = res.data;
				}

				if (type == 1) {
					this.close('pop');
					if (res.data.status == 1) {
						const status = await this.$platform.pay({
							data: res.data.res
						}, this);
						if (status == 'success') {
							this.getData();
						}
					} else {
						this.$c.toast({
							title: res.msg,
							duration: 500,
							success: () => {
								this.getData();
							}
						});
					}
				}
			}
		},


		async 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);

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

			// API: mall_orderbuy
			const res = await createMallOrder(data);

			if (res.status == 1) {
				if (type == 0) {
					console.log("res.data", res.data);
					this.orderData = res.data;
				}

				if (type == 1) {
					this.close('pop');
					if (res.data.status == 1) {
						const status = await this.$platform.pay({
							data: res.data.res
						}, this);
						if (status == 'success') {
							this.getData();
						}
					} else {
						this.$c.toast({
							title: res.msg,
							duration: 500,
							success: () => {
								this.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>