<template>
  <div>
    <a-modal
      v-model:visible="visible"
      title="充值信息"
      :confirm-loading="confirmLoading"
      :closable="false"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form ref="rechargeInfo" :rules="rules" :model="data.rechargeInfo">
        <a-form-item label="充值金额" name="transAmount">
          <a-input-number v-model:value="data.rechargeInfo.transAmount" :min="0.01" :precision="2" style="width:100%" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script setup lang="tsx" >
import { req, $fundTransPage } from '@/api/manage'
import { ref, reactive, getCurrentInstance, defineProps, defineExpose, computed } from 'vue'

// 定义函数
const props = defineProps({
  callbackFunc: { type: Function, default: () => () => ({}) }
})

// 导入全局函数
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

// refundInfo组件
const rechargeInfo = ref()


let visible= ref(false)
let confirmLoading= false

let data : any = reactive({
  recordId: '', // 应用ID
  refundErrorModal: null,  // 退款错误信息的modal对象
  detailData: {} as any,
  rechargeInfo: {
      // title: '', // 标题
      // remark: '', // 备注
      transAmount: '' // 充值金额
  } as any,
})

const rules = {
  transAmount: [{ required: true, message: '请输入金额', type:'number' }]
}

function show (recordId) {

  data.rechargeInfo = {}
  data.recordId = recordId
  visible.value = true
}

function handleOk (e) {
  rechargeInfo.value.validate().then( (valid) => {
    confirmLoading = true
    // 去支付宝充值
    $fundTransPage(data.recordId, data.rechargeInfo.transAmount).then(res =>{
      const winOpen =  window.open('', '_blank')
      winOpen?.document.write(res)
      winOpen?.focus()

      visible.value = false
    }).catch(() => {
      confirmLoading = false // 取消按钮转圈
    })
  })
}

function handleCancel (e) {
    visible.value = false
}

defineExpose({ show })

</script>

<style scoped lang="less">

</style>
