<template>
  <el-drawer v-model="isDrawer" :size="width" :title="title" @close="handleReset">
    <MenuForm ref="menuFormRef" :permissionList="props.permissionList" @change="menuFormChange" />

    <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 MenuForm from './MenuForm.vue';

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

  const menuFormRef = ref();

  const props = defineProps({
    title: {
      type: String,
      default: '添加顶级菜单',
    },
    width: {
      type: Number,
      default: 580,
    },
    permissionList: {
      type: Array,
    },
  });

  const isDrawer = ref(false);
  const subLoading = ref(false);
  const placement = ref('right');

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

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

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

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

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

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