<template>
  <a-drawer
      v-model:visible="vdata.isShow"
      :title="'新增付款账户'"
      placement="right"
      :closable="true"
      width="40%"
      :mask-closable="false"
      @ok="handleOkFunc"
      @close="onClose"
  >
    <!-- <a-modal :confirmLoading="confirmLoading"> -->

    <a-form
        ref="infoFormModel"
        :model="vdata.saveObject"
        layout="vertical"
        :rules="rules"
        style="padding-bottom:50px"
    >
      <a-row justify="space-between" type="flex">
        <a-col :span="10">
          <a-form-item label="项目名称:" name="subjectName">
            <a-input v-model:value="vdata.saveObject['subjectName']" :disabled="!vdata.isAdd" />
          </a-form-item>
        </a-col>
        <a-col :span="10">

        </a-col>
        <a-col :span="10">
          <a-form-item label="企业支付宝名称:" name="accountName">
            <a-input v-model:value="vdata.saveObject['accountName']" :disabled="!vdata.isAdd" />
          </a-form-item>
        </a-col>

        <a-col :span="10">
          <a-form-item label="企业支付宝账号：" name="account">
            <a-input v-model:value="vdata.saveObject['account']" />
          </a-form-item>
        </a-col>
        <a-col :span="10">
          <a-form-item label="联系人姓名：" name="realname">
            <a-input v-model:value="vdata.saveObject['realname']" />
          </a-form-item>
        </a-col>
        <a-col :span="10">
          <a-form-item label="联系人手机号：" name="realname">
            <a-input v-model:value="vdata.saveObject['realname']" />
          </a-form-item>
        </a-col>
        <a-col :span="10">
          <a-form-item label="转账方式：" name="transIfCode" >
            <a-select v-model:value="vdata.saveObject['transIfCode']" style="margin-top:8px">
              <a-select-options value="aliaqf">
                无忧付
              </a-select-options>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <div class="drawer-btn-center">
        <a-button :style="{ marginRight: '8px' }" @click="onClose">
          <close-outlined />
          取消
        </a-button>
        <a-button type="primary" :loading="vdata.confirmLoading" @click="handleOkFunc">
          <check-outlined />
          保存
        </a-button>
      </div>
    </a-form>
  </a-drawer>
</template>

<script setup lang="ts">
import {
  req,
  API_URL_SYS_USER_LIST,
  API_URL_MCH_APPLYMENT_LIST,
  $getPasswordRules,
  API_URL_PAY_AQF_ADD
} from '@/api/manage'
import { reactive,ref } from 'vue'
import { Base64 } from 'js-base64'
import { message } from 'ant-design-vue'

const props = defineProps ({
  configMode: { type: String, default: '' },   // 模式
  callbackFunc: { type: Function, default: () => ({}) }
})

const fileList = ref([])
const previewVisible = ref()
const previewImage = ref()
const infoFormModel = ref()
const vdata = reactive ({
  saveObject:{transIfCode:"aliaqf"} as any,
  confirmLoading:false,
  loading: false, // 按钮上的loading
  isAdd: true, // 新增 or 修改页面标识
  isShow: false, // 是否显示弹层/抽屉
})
const rules = reactive({
  subjectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
  accountName: [{ required: true, message: '请输入企业支付宝名称', trigger: 'blur' }],
  account: [{ required: true, message: '请输入企业支付宝账号', trigger: 'blur' }],
})
defineExpose({show})
function show (recordId) { // 弹层打开事件
  if (infoFormModel.value !== undefined) {
    infoFormModel.value.resetFields()
  }
  vdata.saveObject  = {transIfCode:"aliaqf"}

  vdata.isAdd = !recordId
  vdata.confirmLoading = false // 关闭loading


  if (!vdata.isAdd) { // 修改信息 延迟展示弹层
    vdata.saveObject = recordId
    vdata.isShow = true
  } else {
    vdata.isShow = true // 立马展示弹层信息
  }
}
function handleOkFunc () { // 点击【确认】按钮事件
  infoFormModel.value.validate().then(valid=>{
    vdata.loading = true // 打开按钮上的 loading
    vdata.confirmLoading = true // 显示loading
    if (vdata.isAdd) {
      req.add(API_URL_PAY_AQF_ADD, vdata.saveObject).then(res => {
        message.success('新增成功')
        vdata.isShow = false
        vdata.loading = false
        props.callbackFunc() // 刷新列表
      }).catch((res) => {
        vdata.confirmLoading = false
      })
    } else {
      vdata.isShow = false
      vdata.loading = false
      vdata.confirmLoading = false
    }
  })
}
// 关闭抽屉
function onClose () {
  vdata.isShow = false
}

const handleCancel = () => {
  previewVisible.value = false;
};
</script>
