<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">绉垎</template>
							</view>

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

			<payment-manager
				:order-data="orderData"
				:page-data="pageData"
				:use-money="useMoney"
				:use-integral="useIntegral"
				:coupon-data="couponData"
				@change-pay="changePayMethod"
				@to-coupon="$emit('to-coupon')"
				@price-changed="onPriceChanged"
			></payment-manager>
			
			<view v-if="pageData.goods.type == 6 && !getBtnXianShi()"> </view>

			<template v-else>
				<view class="pay-type" @click="changePayMethod('useIntegral')">
					<view class="title flex align-center">
						浣跨敤{{currencyName}}鎶垫墸楼{{ 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" @click="changePayMethod('useMoney')">
					<view class="title flex align-center">
						浣跨敤{{balanceName}}鎶垫墸楼{{ 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>
			</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>

				鎴戝凡婊?8宀?闃呰骞跺悓鎰?

				<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}绉垎` : ` 楼${finalPrice}`
				}}</text>
			</view>
		</view>
	</uni-popup>
</template>

<script>
import PaymentManager from '@/components/payment-manager/payment-manager.vue';

export default {
	name: "OrderConfirmPopup",
	components: {
		PaymentManager
	},
	props: {
		// 璁㈠崟鏁版嵁
		orderData: {
			type: Object,
			required: true
		},
		// 椤甸潰鏁版嵁
		pageData: {
			type: Object,
			required: true
		},
		// 鏄惁浣跨敤浣欓
		useMoney: {
			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
		}
	},
	data() {
		return {
			currencyName: '',
			balanceName: '',
			// 鏈€缁堟敮浠樹环鏍?
			finalPrice: 0
		}
	},
	created() {
		// 鑾峰彇璐у竵鍚嶇О鍜屼綑棰濆悕绉?
		this.currencyName = this.$config.getAppSetting('currency1_name') || '绉垎';
		this.balanceName = this.$config.getAppSetting('balance_name') || '浣欓';
	},
	mounted() {
		// 鍒濆鍖栦环鏍?
		this.finalPrice = this.orderData ? this.orderData.price : 0;
	},
	methods: {
		/**
		 * 鎵撳紑寮圭獥
		 */
		open() {
			this.$refs.popup.open();
		},
		
		/**
		 * 鍏抽棴寮圭獥
		 */
		close() {
			this.$refs.popup.close();
		},
		
		/**
		 * 鍒囨崲鏀粯鏂瑰紡
		 * @param {String} method 鏀粯鏂瑰紡
		 */
		changePayMethod(method) {
			this.$emit('change-pay', method);
		},
		
		/**
		 * 浠锋牸鍙樻洿鍥炶皟
		 * @param {Object} priceInfo 浠锋牸淇℃伅
		 */
		onPriceChanged(priceInfo) {
			if (priceInfo) {
				this.finalPrice = priceInfo.finalPrice;
			}
		},
		
		/**
		 * 妫€鏌ユ寜閽槸鍚︽樉绀?
		 */
		getBtnXianShi() {
			if (this.pageData == null || this.pageData["xuangou"] == null) {
				return true;
			}
			let xuangou = this.pageData["xuangou"];
			if (xuangou.quanju_xiangou == 0) {
				return true;
			}
			return false;
		}
	}
}
</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: 500;
		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-family: Source Han Sans CN;
			font-weight: 400;
			margin-left: 24rpx;
			color: #333333;
		}

		.row-r {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			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> 
