<template>
  <a-drawer
    :confirmLoading="confirmLoading"
    :visible="visible"
    :width="800"
    @close="onClose"
    @ok="onOk"
    class="yo-drawer-form"
    title="新增菜单"
  >
    <FormBody ref="form-body" />
    <div class="ant-drawer-footer">
      <a-button @click="onClose">取消</a-button>
      <a-button :loading="confirmLoading" @click="onOk" type="primary">确定</a-button>
    </div>
  </a-drawer>
</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
          .sysMenuAdd(data)
          .then(({ success }) => {
            if (success) {
              this.$message.success('新增成功');
              this.onClose();
              this.$emit('ok');
            }
          })
          .finally(() => {
            this.confirmLoading = false;
          });
      });
    },

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