<template>
	<page-container
	:show="showModal" 
	:round="true"
	:z-index="100"
	position="bottom" 
	customStyle="border-radius:15px 15px 0 0;"
	@beforeleave="beforeClose"
	@afterleave="closePopu">
		<view class="popu-content" v-if="payInfo">
			<view class="popu-close" @click="cancelPay">
				<uni-icons size="26" type="closeempty"></uni-icons>
			</view>
			<view class="pupu-box-pay-item">
				<view class="popu-content-amount flex align_center justify_center">
					<view>￥{{payInfo.totalAmount}}</view>
				</view>
				<view class="flex align_center justify_between" v-if="payInfo.totalSpecialGiveAmount>0">
					<text>总优惠</text>
					<view class="popu-content-price">￥{{payInfo.totalSpecialGiveAmount}}</view>
				</view>
				<view class="flex align_center justify_between" v-if="payInfo.totalTicketGiveAmount>0">
					<text>代金券</text>
					<view class="popu-content-price">￥{{payInfo.totalTicketGiveAmount}}</view>
				</view>
				<view style="height: 5px;"></view>
				<view class="popu-content-title flex align_center justify_between">
					<text>付款方式</text>
					<view></view>
				</view>
				<view class="popu-content-pay flex align_center justify_between">
					<view class="flex align_center"><uni-icons size="20" type="weixin" color="#4CAF50"></uni-icons> <text style="margin-left: 5px;">微信支付</text></view>
					<view><uni-icons size="22" type="checkbox-filled" color="red"></uni-icons></view>
				</view>
			</view>
			<view class="popu-content-btn">
				<view class="popu-content-btn-item okbtn" @click="confirmPay">确定付款</view>
			</view>
		</view>
	</page-container>
</template>

<script>
	export default {
		props: {
			showPopu: {
				type: Boolean,
				default: false
			},
			payInfo: {
				type: Object,
				default: ()=>{
					return null
				}
			},
			cancelPayMessage: {
				type: String,
				default: '您的订单在30分钟内未支付将被取消，请尽快完成支付。'
			},
			closeCurPage:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				submitOk: false,
				showModal: this.showPopu
			}
		},
		watch: {
			showPopu(val){
				this.showModal = val
				if(val){
					this.submitOk = false
				}
			},
			showModal(val){
				if(!val){
					this.$emit('close', val)
				}
			}
		},
		methods: {
			beforeClose(){
				if(this.showModal){
					this.cancelPay()
				}
			},
			// 关闭确定订单弹窗后
			closePopu(){
				if(!this.showModal){
					if(this.closeCurPage){
						uni.navigateBack()
					}
					// 确认付款,去订单详情页
					if(this.submitOk){
						this.$emit('payComplete',this.payInfo, true)
					}else{
						this.$emit('payComplete',this.payInfo, false)
					}
				}
				this.showModal = false
			},
			// 确认取消付款弹框
			cancelPay(){
				const _this = this
				uni.showModal({
					title: '确定取消支付吗？',
					content: _this.cancelPayMessage,
					confirmText: '继续支付',
					cancelText: '取消支付',
					success(ret) {
						// 确定取消，跳转到订单详情页
						if(ret.cancel){
							if(_this.showModal){
								_this.showModal = false
								_this.submitOk = false
							}else{
								if(_this.closeCurPage){
									uni.navigateBack()
								}
								_this.$emit('payComplete',_this.payInfo, false)
							}
						}
						// 继续支付
						if(ret.confirm){
							// 继续支付
							if(!_this.showModal){
								_this.showModal = true
								_this.submitOk = false
							}
						}
					}
				})
			},
			// 确认付款
			confirmPay(){
				this.showModal = false
				this.submitOk = true
			},
		}
	}
</script>

<style lang="less">
	.popu-content{
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 10px 15px;
			.popu-close{
				padding: 10px;
				position: absolute;
				right: 0;
				top: 0;
				z-index: 1000;
			}
			.pupu-box-item,.pupu-box-pay-item{
				width: 100%;
				> view{
					padding: 10px 0;
				}
			}
			.pupu-box-pay-item{
				> view{
					padding: 6px 0;
				}
				.popu-content-amount{
					font-size: 24px;
					color: red;
					padding-top: 30px;
				}
				.popu-content-title{
					font-weight: bold;
				}
			}
			.popu-content-btn{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin: 20px 0 10px;
				.popu-content-btn-item{
					width: 30%;
					height: 34px;
					font-size: 14px;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 100px;
				}
				.cancelBtn{
					background-color: #f8f8f8;
					color: #666;
				}
				.okbtn{
					background-color: #f70000;
					color: #FFFFFF;
					width: 65%;
					.payAmount{
						margin-left: 5px;
					}
				}
			}
	}
</style>