<template>
	<view v-if="logOutvisible" class="is-pay-dlgs">
		<view class="log-out">
			<view class="log-out-tip">请您在新打开的支付页面内完成支付操作，为确保支付顺利，请保持页面开启直至支付完成。</view>
			<view class="log-out-footer">
				<view class="cancel" @click="closeLogOut">未支付</view>
				<view class="shu"></view>
				<view class="log-out-submit" @click="submitLogOut">已完成支付</view>
			</view>
		</view>
		<view class="is-pay-dlgs" v-if="smallVisible">
			<view class="log-out-small">
				<view class="log-out-tip">
					盲盒即将揭晓
					<view class="red">真的要放弃这个机会吗？</view>
				</view>
				<view class="log-out-footer">
					<view class="cancel" @click="closeSmallLogOut">先去逛逛</view>
					<view class="shu"></view>
					<view class="log-out-submit" @click="submitSmallLogOut">继续支付</view>
				</view>
			</view>
		</view>
	</view>
	
	<!-- <popup-view v-model="logOutvisible" mode="center" border-radius="15" zIndex="1">
		<view class="log-out">
			<view class="log-out-tip">是否已完成支付？</view>
			<view class="log-out-footer">
				<view class="cancel" @click="closeLogOut">取消</view>
				<view class="shu"></view>
				<view class="log-out-submit" @click="submitLogOut">确定</view>
			</view>
		</view>
	</popup-view> -->
</template>

<script>
	export default{
		data(){
			return{
				logOutvisible:true,
				smallVisible:false
			}
		},
		methods:{
			closeLogOut(){
				this.smallVisible = true
			},
			closeSmallLogOut(){
				this.smallVisible = false
				this.$emit('isCancel')
			},
			submitLogOut(){
				this.$emit('isOk')
			},
			submitSmallLogOut(){
				this.smallVisible = false
				this.$emit('againPay')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.is-pay-dlgs{
		position: fixed;width: 100%;height: 100vh;z-index: 999;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.6);
	}
	.log-out{
		position: absolute;
		top: 0;
		left: 0;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 590rpx;
		height: 300rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		.log-out-tip{
			height: 200rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: rgba(0,0,0,0.85);
			// line-height: 200rpx;
			text-align: center;
			padding: 50rpx 60rpx;
		}
		.log-out-footer{
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top: 2rpx solid rgba(0,0,0,0.06);
			height: 100rpx;
			.cancel{
				width: 294rpx;
				height: 100rpx;
				line-height: 100rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				text-align: center;
				border-right: 1px solid rgba(0,0,0,0.06);
			}
			.log-out-submit{
				width: 294rpx;
				height: 100rpx;
				line-height: 100rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #E55353;
				text-align: center;
			}
		}
	}
	.log-out-small{
		position: absolute;
		top: 0;
		left: 0;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 490rpx;
		height: 250rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		.log-out-tip{
			height: 150rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: rgba(0,0,0,0.85);
			// line-height: 100rpx;
			padding-top: 40rpx;
			text-align: center;
			.red{
				color: #E55353;
				font-size: 36rpx;
				font-weight: bold;
			}
		}
		.log-out-footer{
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top: 2rpx solid rgba(0,0,0,0.06);
			height: 100rpx;
			.cancel{
				width: 294rpx;
				height: 100rpx;
				line-height: 100rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				text-align: center;
				border-right: 1px solid rgba(0,0,0,0.06);
			}
			.log-out-submit{
				width: 294rpx;
				height: 100rpx;
				line-height: 100rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #E55353;
				text-align: center;
			}
		}
	}
</style>