<template>
  <a-drawer
    :title="title"
    :width="width"
    placement="right"
    :closable="false"
    @close="close"
    v-model:open="visible">
    <enquiry-public-black-email-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"
                                     normal></enquiry-public-black-email-form>
    <div class="drawer-footer">
      <a-button @click="handleCancel" style="margin-bottom: 0;">关闭</a-button>
      <a-button v-if="!disableSubmit" @click="handleOk" type="primary" style="margin-bottom: 0;">
        提交
      </a-button>
    </div>
  </a-drawer>
</template>

<script lang="ts" name="EnquiryPublicBlackEmailModal" setup>
import EnquiryPublicBlackEmailForm from './EnquiryPublicBlackEmailForm.vue';
import {nextTick, ref} from "vue";

const title = ref("操作");
const width = ref(800);
const visible = ref(false);
const disableSubmit = ref(false);
const realForm = ref();


const emit = defineEmits(["ok", "close"])

async function add() {
  visible.value = true
  await nextTick();

  realForm.value.add();
}

async function edit(record) {
  visible.value = true
  await nextTick();
  realForm.value.edit(record);
}

async function close() {
  emit('close');
  await nextTick();
  visible.value = false;
}

function handleOk() {
  realForm.value.submitForm()
}

function submitCallback() {
  emit('ok');
  visible.value = false;
}

function handleCancel() {
   close()
}

defineExpose({
  title,
  disableSubmit,
  add,
  edit
});

</script>

<style lang="less" scoped>
/** Button按钮间距 */
.ant-btn {
  margin-left: 30px;
  margin-bottom: 30px;
  float: right;
}

.drawer-footer {
  position: absolute;
  bottom: -8px;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>
