<template>
  <uni-popup ref="popup" type="top" mask-background-color="rgba(0,0,0,.5)" :safe-area="false">
    <view class="card-wrapper">
      <image class="icon-close" src="/static/iconImg/icon-x.svg" mode="scaleToFill" @tap="close" />
      <view class="title">请输入支付密码</view>
      <view class="sub-title">退款</view>
      <view class="refund-money">￥{{ vdata.refundAmount }}</view>
      <JPasswordInput v-if="vdata.isShowPwdInput" margin="0 50rpx" :focus="true" ref="pwdInput" @inputChange="inputChange" />
    </view>
  </uni-popup>
</template>

<script setup>
import { onMounted, reactive, ref, nextTick } from 'vue'
const vdata = reactive({
  refundAmount: 0,
  isShowPwdInput: false,
})
const proms = {}
const popup = ref(null)
const pwdInput = ref(null)
const open = (money, callBack) => {
  vdata.refundAmount = money
  vdata.callBack = callBack
  popup.value.open()
  
   vdata.isShowPwdInput = false
  nextTick(() => {
	   vdata.isShowPwdInput = true
  })
  
 
}
const close = () => {
  popup.value.close()
  vdata.isShowPwdInput = false
}
// 输入框 e 输入的数字
const inputChange = (e) => {
  if (e.length >= 6) return vdata.callBack(e)
}
const clearInput = () => pwdInput.value.clearInput()
defineExpose({ open, clearInput, close })
</script>

<style lang="scss" scoped>
.card-wrapper {
  margin: 0 50rpx;
  padding-bottom: 50rpx;
  margin-top: 162rpx;
  background-color: $J-bg-ff;
  border-radius: $J-b-r32;
  .icon-close {
    padding: 30rpx;
    width: 60rpx;
    height: 60rpx;
  }
  .title {
    text-align: center;
    font-size: 30rpx;
    font-weight: 500;
  }
  .sub-title {
    margin-top: 40rpx;
    margin-bottom: 20rpx;
    text-align: center;
    font-size: 30rpx;
    color: #808080;
  }
  .refund-money {
    margin-bottom: 70rpx;
    text-align: center;
    font-size: 50rpx;
    font-weight: 500;
  }
}
</style>
