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

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

      confirmLoading: false,
    };
  },

  methods: {
    /**
     * 必要的方法
     * 从外部调用打开本窗口,并填充外部传入的数据
     */
    onOpen(record) {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs['form-body'].onFillData(record);
      });
    },

    /**
     * 必要的方法
     * 点击保存时的操作
     */
    onOk() {
      this.$refs['form-body'].onValidate((valid) => {
        if (valid) {
          this.confirmLoading = true;
          this.$api
            .sysRoleEdit(this.$refs['form-body'].form)
            .then(({ success }) => {
              this.confirmLoading = false;
              if (success) {
                this.$message.success('编辑成功');
                this.onCancel();
                this.$emit('ok');
              }
            })
            .finally(() => {
              this.confirmLoading = false;
            });
        }
      });
    },

    /**
     * 必要的方法
     * 关闭窗口时的操作
     */
    onCancel() {
      this.$refs['form-body'].onResetFields();
      this.visible = false;
    },
  },
};
</script>