<template>
	<uni-popup ref="popup" type="bottom">
		<view class="buy-pop relative">
			<view class="buy-pop-hd">
				<view class="" style="width: 60rpx"></view>
				<text class="" style="font-size: 28rpx">确认订单</text>
				<view class="close icon" @click="$emit('close')">
					<image :src="$img('/static/img/close2.png')" style="width: 24rpx; height: 24rpx" lazy-load></image>
				</view>
			</view>

			<view class="buy-card">
				<view class="buy-info">
					<view class="pic flex">
						<image class="img100" :src="orderData.goods.imgurl_detail"></image>
					</view>

					<view class="info-r">
						<view class="title hang1">
							{{ orderData.goods.title }}
						</view>

						<view class="type">类型:明信片</view>

						<template v-if="orderData.goods.is_shou_zhe == 1 && orderData.goods.shou_zhe_price * 1 > 0">
							<view class="price-num">
								<view class="price">
									<template v-if="pageData.goods.type != 5">¥</template>
									<text>{{ orderData.goods.shou_zhe_price }}</text>
									<template v-if="pageData.goods.type == 5">积分</template>
									(首抽5折)
								</view>

								<view class="num">×{{ 1 }}</view>
							</view>

							<view v-if="orderData.goods.prize_num > 1" class="price-num">
								<view class="price">
									<template v-if="pageData.goods.type != 5">¥</template>
									<text>{{ orderData.goods.price }}</text>
									<template v-if="pageData.goods.type == 5">积分</template>
								</view>

								<view class="num">
									×{{ orderData.goods.prize_num * 1 - 1 }}
								</view>
							</view>
						</template>

						<view v-else class="price-num">
							<view class="price">
								<template v-if="pageData.goods.type != 5">¥</template>
								<text>{{ orderData.goods.price }}</text>
								<template v-if="pageData.goods.type == 5">{{ currencyName2 }}</template>
							</view>

							<view class="num">×{{ orderData.goods.prize_num }}</view>
						</view>
					</view>
				</view>
			</view>


			<template>
				<view v-if="pay_coupon" class="card-row" @click="toCoupon">
					<view class="title">优惠券</view>

					<view class="row-r">
						{{ couponData && orderData.coupon_price > 0 ? `-${couponData.price}` : "未选择" }}

						<view class="icon">
							<image :src="$img1('common/right1.png')" lazy-load></image>
						</view>
					</view>
				</view>
				<view class="pay-type" v-if="pay_balance" @click="changePayMethod('useMoney')">
					<view class="title flex align-center">
						使用{{ balanceName }}{{ deduction_name }}¥{{ orderData.use_money }}
						<text style="color: #676767; font-size: 16rpx; margin-left: 10rpx;">
							(剩余:{{ orderData.money }})</text>
					</view>

					<view class="icon">
						<image v-if="useMoney" :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" v-if="pay_currency" @click="changePayMethod('useIntegral')">
					<view class="title flex align-center">
						使用{{ currencyName }}{{ deduction_name }}¥{{ orderData.use_integral_money }}
						<text style="color: #676767; font-size: 16rpx; margin-left: 10rpx;">(剩余:{{ orderData.integral
						}})</text>
					</view>

					<view class="icon">
						<image v-if="useIntegral" :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" v-if="pay_currency2" @click="changePayMethod('useMoney2')">
					<view class="title flex align-center">
						使用{{ currencyName2 }}{{ deduction_name }}¥{{ (orderData.use_score / 100).toFixed(2) }} <text
							style="color: #676767; font-size: 16rpx; margin-left: 10rpx;">
							(剩余:{{ orderData.score }})</text>
					</view>
					<view class="icon">
						<image v-if="useMoney2" :src="$img1('common/check_act.png')" lazy-load></image>
						<image v-else :src="$img1('common/check.png')" lazy-load></image>
					</view>

				</view>

			</template>

			<view class="rule">
				<scroll-view class="rule-inner" scroll-y>
					<rich-text :nodes="sendRuleData"></rich-text>
				</scroll-view>
			</view>

			<view class="agree" @click="$emit('toggle-agree')">
				<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" @click="$emit('confirm')">
				<text>确认支付</text>
				<text>{{
					pageData.goods.type == 5 ? ` ${(orderData.use_score / 100).toFixed(2)}积分` : ` ¥${orderData.price}`
				}}</text>
			</view>
		</view>
	</uni-popup>
</template>

<script>
export default {
	name: "OrderConfirmPopup",
	props: {
		// 订单数据
		orderData: {
			type: Object,
			required: true
		},
		// 页面数据
		pageData: {
			type: Object,
			required: true
		},
		// 是否使用余额
		useMoney: {
			type: Boolean,
			default: true
		},
		//是否使用余额2
		useMoney2: {
			type: Boolean,
			default: true
		},
		// 是否使用积分
		useIntegral: {
			type: Boolean,
			default: true
		},
		// 优惠券数据
		couponData: {
			type: [Object, String],
			default: () => null
		},
		// 是否同意协议
		isAgree: {
			type: Boolean,
			default: true
		},
		// 规则数据
		sendRuleData: {
			type: String,
			default: ''
		},
		// 购买数量
		buyNum: {
			type: Number,
			default: 1
		}
	},
	watch: {
		// // 监听props变化，更新内部数据
		// couponData(val) {
		// 	console.log('couponData',val);

		// },

	},
	data() {
		//pageData.goods.type
		return {
			currencyName: '',
			currencyName2: '',
			balanceName: '',
			pay_balance: 1,
			pay_coupon: 1,
			pay_currency: 1,
			pay_currency2: 1,
			pay_wechat: 1,
			is_deduction: 1,
			deduction_name: ''
		}
	},
	created() {
		console.log('创建了');

		// 获取货币名称和余额名称
		this.currencyName = this.$config.getAppSetting('currency1_name') || 'UU币';
		this.currencyName2 = this.$config.getAppSetting('currency2_name') || '达达券';
		this.balanceName = this.$config.getAppSetting('balance_name') || '钻石';
		let goodType = this.$config.getGoodTypeFind(this.pageData.goods.type);
		this.setPayType(goodType);

	},
	methods: {
		toCoupon() {
			if (this.pageData != null && this.pageData.limitInfo != null) {
				let limitInfo = this.pageData.limitInfo;
				if (this.pageData.limitInfo.coupon_limit > 0 && limitInfo.user_coupon_remaining <= 0) {
					this.$c.msg("今日使用优惠卷已达到上限")
					return;
				}
			}
			this.$emit('to-coupon')

		},
		setPayType(good_extend) {
			if (good_extend != null) {
				//是否显示余额支付
				this.pay_balance = good_extend.pay_balance;
				//是否显示优惠卷
				this.pay_coupon = good_extend.pay_coupon;
				//是否显示货币支付
				this.pay_currency = good_extend.pay_currency;
				//是否显示货币2支付
				this.pay_currency2 = good_extend.pay_currency2;
				//是否显示微信支付
				this.pay_wechat = good_extend.pay_wechat;
				//抵扣还是支付
				this.is_deduction = good_extend.is_deduction;
				if (this.is_deduction == 1) {
					this.deduction_name = '抵扣';
				} else {
					this.deduction_name = '支付';
				}
			}
		},
		/**
		 * 打开弹窗
		 */
		open() {
			if (this.orderData != null && this.orderData.goods_extend != null) {
				this.setPayType(this.orderData.goods_extend);
			}

			this.$refs.popup.open();
		},

		/**
		 * 关闭弹窗
		 */
		close() {
			this.$refs.popup.close();
		},

		/**
		 * 切换支付方式
		 * @param {String} method 支付方式
		 */
		changePayMethod(method) {
			console.log('aaa');

			if (this.is_deduction == 0) {
				// 如果是支付模式，检查可用的支付方式数量
				let availablePayMethods = 0;
				if (this.pay_balance) availablePayMethods++;
				if (this.pay_currency) availablePayMethods++;
				if (this.pay_currency2) availablePayMethods++;
				if (this.pay_wechat) availablePayMethods++;
				// 如果只有一种支付方式可用，则不允许切换
				if (availablePayMethods <= 1) {
					return;
				}
			}
			this.$emit('change-pay', method);
		},


	}
}
</script>

<style lang="scss">
.buy-pop {
	padding: 0 30rpx;
	box-sizing: border-box;
	background: #f7f7f7;
	padding-bottom: 30rpx;
	border-radius: 16rpx 16rpx 0rpx 0rpx;

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

	.buy-pop-hd {
		padding: 20rpx 0;
		padding-left: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 40rpx;
		font-weight: 600;
		color: #333333;

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

	.card-row {
		padding: 16rpx 0;
		display: flex;
		height: 82rpx;
		justify-content: space-between;
		align-items: center;
		margin-top: 24rpx;
		border-radius: 16rpx;
		background-color: #fff;

		.title {
			font-size: 20rpx;
			font-weight: 400;
			margin-left: 24rpx;
			color: #333333;
		}

		.row-r {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;

			.icon {
				width: 10rpx;
				height: 17rpx;
				color: #999999;
				margin-left: 10rpx;
				margin-right: 24rpx;
			}
		}
	}

	.buy-card {
		border-radius: 20rpx;
		padding: 30rpx 30rpx 10rpx;
		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 0 10rpx 30rpx;

				.title {
					font-size: 24rpx;
					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;

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

						text {
							font-size: 28rpx;
						}
					}

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

	.pay-type {
		padding: 30rpx 24rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		background: #ffffff;

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

		.title {
			flex: 1;
			font-size: 24rpx;
			font-weight: 500;
			color: #333333;
		}
	}

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

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

	.agree {
		display: flex;
		margin-top: 30rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		line-height: 32rpx;

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

	.pay-btn {
		margin: 30rpx auto 0;
		width: 686rpx;
		height: 84rpx;
		background: url($imgurl + "common/payBtn.png") no-repeat 0 0 / 100% 100%;
		display: flex;
		margin-bottom: 90rpx;
		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>