<template>
  <a-modal
    :confirmLoading="confirmLoading"
    :visible="visible"
    @cancel="onCancel"
    @ok="onOk"
    class="yo-modal-form"
    title="新增XX"
  >
    <FormBody ref="form-body" />
  </a-modal>
</template>
<script>
import FormBody from './form';

export default {
  components: {
    FormBody,
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
    };
  },

  computed: {
    formBody() {
      return this.$refs['form-body'];
    },
  },

  methods: {
    /**
     * 必要的方法
     * 从外部调用打开本窗口
     */
    async onOpen() {
      this.visible = true;
      this.$nextTick(() => {
        this.formBody.onInit();
      });
    },

    /**
     * 必要的方法
     * 点击保存时的操作
     */
    onOk() {
      this.formBody.onGetData().then((data) => {
        this.confirmLoading = true;
        this.$api
          /** !!此处必须修改调用的接口方法 */
          .testAddApi(data)
          .then(({ success }) => {
            if (success) {
              this.$message.success('新增成功');
              this.onCancel();
              this.$emit('ok');
            }
          })
          .finally(() => {
            this.confirmLoading = false;
          });
      });
    },

    /**
     * 必要的方法
     * 关闭窗口时的操作
     */
    onCancel() {
      this.formBody.onResetFields();
      this.visible = false;
    },
  },
};
</script>