<template>
  <uni-popup ref="popup" type="bottom" mask-background-color="rgba(0,0,0,0.5)" :safe-area="false">
    <view class="pay-wrapper">
      <view class="pay-header-wrapper">
        <view class="pay-img">
          <image src="/static/iconImg/icon-success.svg" mode="scaleToFill" />
          <view class="pay-tips">支付成功</view>
        </view>
        <view class="pay-number">￥{{ cal.cert2Dollar(vdata.orderInfo.amount) }}</view>
      </view>
      <view class="time-out flex-center">
        <text>{{ vdata.subTime }}S</text> 后自动返回
      </view>
			<view class="list-footer">
				<view class="button-wrapper" style="border: none; background-color: transparent; backdrop-filter: none;">
					<Button @tap="close">确认</Button>
				</view>
			</view>
    </view>
  </uni-popup>
</template>

<script setup>
import { nextTick, onMounted, reactive, ref } from 'vue'
import timer from '@/commons/utils/timer.js'
import cal from '@/commons/utils/cal.js'

const emit = defineEmits(['close'])

const vdata = reactive({

  orderInfo: { }, // 订单信息
	
  subTime: 5,
  
  isClosed: false, // 是否已经明确关闭，  避免点击按钮与定时同时触发。 
  
})
const popup = ref(null)

// 打开弹窗 val 收款金额
const open = (orderInfo) => {
	
  // 订单信息	
  vdata.orderInfo = orderInfo
  
  // 剩余时间重置
  vdata.subTime = 5
  
  vdata.isClosed = false  
  
  popup.value.open()
  
  // nextTick 用作， 显示页面后再倒计时， 否则直接显示了 4s . 
  nextTick(() => {
	  
	  //   执行递归函数 1秒 一次
	  timer.startTimeoutTask(1, 5, (subTime) => {
	  	 
	  	// 第一个判断是task任务结束， 第二个判断是 手动关闭的判断。   
	    if (subTime <= 0 || vdata.subTime <= 0) {
	  		close()
	  		return false;
	  	}
	  	
	  	vdata.subTime = subTime
	  	return true;
	  })
  })
}

const close = () => {
 	
  if(vdata.isClosed){
    return false;
 }
  emit('close') //回调函数 close 
	 
  vdata.isClosed = true
	
  popup.value.close()
  vdata.subTime = 0 ; // 避免进入下一次task 
}

defineExpose({ open, close })
</script>

<style lang="scss" scoped>
.pay-wrapper {
  padding: 0.1rpx;
  height: 100vh;
  .pay-header-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-top: 108rpx;
    width: 670rpx;
    height: 500rpx;
    border-radius: $J-b-r32;
    background-image: url('/static/bgImg/quik-bg-img.svg');
    .pay-img {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      image {
        width: 100rpx;
        height: 100rpx;
      }
      .pay-tips {
        margin-top: 10rpx;
        margin-bottom: 50rpx;
        color: #1abb51;
        font-size: 36rpx;
        font-weight: 500;
      }
    }
    .pay-number {
      font-size: 50rpx;
      font-weight: 500;
    }
  }
  .time-out {
    margin-top: 30rpx;
    color: rgba(255, 255, 255, 0.7);
    font-size: 30rpx;
    text {
      margin-right: 15rpx;
      color: #fff;
    }
  }
}
</style>
