<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
  handleClose?: (params: Fn) => void
  openDrawer?: (params: Fn) => void
  direction?: string
}

withDefaults(defineProps<drawerProps>(), {
  title: '',
  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"
    >
      <template #header="{ close, titleId, titleClass }">
        <slot name="header" :params="{ close, titleId, titleClass }"></slot>
      </template>
      <div class="demo-drawer__content">
        <slot></slot>
      </div>
    </el-drawer>
  </div>
</template>

<style scoped></style>
