<template>
  <el-drawer v-model="drawer"
             direction="btt"
             @closed="emits('update:modelValue',false)"
             append-to-body
             destroy-on-close
             size="90%"
             :with-header="false">
    <div style="height: 5%;position: relative">
      <el-button class="close_but"
                 type="danger"
                 icon="Close"
                 @click="emits('update:modelValue',false)">关闭
      </el-button>
      <slot name="header"/>
    </div>
    <div style="width: 100%;height: 95%">
      <slot name="default"/>
    </div>
  </el-drawer>
</template>

<script setup name='EmrDrawer' lang="tsx">
import {defineProps, ref, watch} from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean
  },
  title: {
    type: String
  }
})

const emits = defineEmits(['update:modelValue'])
const drawer = ref(false)

watch(() => props.modelValue, () => {
  drawer.value = props.modelValue
}, {immediate: true})

</script>

<style scoped lang="scss">
.close_but {
  position: absolute;
  top: 2px;
  right: 0;
}
</style>
