<template>
  <el-drawer v-model="drawerVisible" :size="width" :title="title" @close="handleReset">
    <PermissionForm ref="formInstance" :permissionList="props.permissionList" @change="handleFormChange" />

    <template #footer>
      <el-space>
        <el-button type="primary" :loading="subLoading" @click="formSubmit">提交</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-space>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import PermissionForm from './PermissionForm.vue';

  const props = defineProps({
    title: {
      type: String,
      default: '添加权限',
    },
    width: {
      type: Number,
      default: 580,
    },
    permissionList: {
      type: Array,
    },
  })

  const emit = defineEmits(['change']);

  const formInstance = ref<InstanceType<typeof PermissionForm>>();
  const drawerVisible = ref(false);
  const subLoading = ref(false);

  function openDrawer() {
    drawerVisible.value = true;
  }

  function closeDrawer() {
    drawerVisible.value = false;
  }

  function formSubmit() {
    formInstance.value?.formSubmit();
  }

  function handleReset() {
    formInstance.value?.handleReset();
  }

  function handleFormChange() {
    closeDrawer();
    emit('change');
  }

  defineExpose({
    openDrawer,
    closeDrawer,
  });
</script>
