<script setup lang="ts">
import { ref } from 'vue'
const visible = ref(false)
const drawerRef = ref(null)

type Fn = () => void
interface drawerProps {
  title?: string
  size?: string
	closeModal?: boolean
  handleClose?: (params: Fn) => void
  openDrawer?: (params: Fn) => void
	openValidation?: (params: Fn) => void
  direction?: string
}

withDefaults(defineProps<drawerProps>(), {
  title: '',
	closeModal: true,
  size: '30%',
  direction: 'rtl' // rtl / ltr / ttb / btt
})

const openDrawer = () => (visible.value = true)
const closeDrawer = () => (visible.value = false)
defineExpose({ closeDrawer, openDrawer })
</script>

<template>
  <div>
    <el-drawer
      ref="drawerRef"
      v-model="visible"
      lock-scroll
      :title="title"
      :before-close="handleClose"
      :direction="direction"
      :size="size"
      :destroy-on-close="true"
	  :close-on-click-modal="closeModal"
	>
      <template #header="{ close, titleId, titleClass }">
        <div class="header">
          <slot name="header" :params="{ close, titleId, titleClass }"></slot>
          <el-divider border-style="dashed" />
        </div>
      </template>
      <div class="drawer__content">
        <slot></slot>
      </div>
      <template #footer>
        <slot name="footer"></slot>
      </template>
    </el-drawer>
  </div>
</template>

<style scoped>
.drawer__content {
  height: 100%;
}
.header {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
:deep(.el-drawer__header) {
  display: flex;
  align-items: start;
  margin-bottom: 0;
}
:deep(.el-drawer__footer) {
  z-index: 1;
  /* box-shadow: 0px -2px 5px #ccc; */
}
</style>
