<template>
  <div class="basic-dialog">
    <el-dialog
      v-model="dialogVisible"
      width="640px"
      align-center
      :close-on-click-modal="false"
      v-bind="$attrs"
      class="basic-dialog--custom"
    >
      <div class="basic-dialog-container">
        <main class="basic-dialog-main">
          <slot name="form"></slot>
        </main>
        <div class="basic-dialog-footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  const dialogVisible = ref(false);
  const emit = defineEmits(['refresh']);
  const openDialog = () => {
    emit('refresh');
    dialogVisible.value = true;
  };
  const closeDialog = () => {
    dialogVisible.value = false;
  };
  defineExpose({
    openDialog,
    closeDialog,
  });
</script>

<style lang="scss" scoped>
  .basic-dialog-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: space-between;
    height: 100%;
  }
  .basic-dialog-main {
    flex: 1;
    overflow-y: auto;
  }
  .basic-dialog-footer {
    flex-shrink: 0;
    text-align: right;
  }
</style>
