<template>
  <el-dialog
    :custom-class="props.canResize ? props.canResize : ''"
    custom
    align-center
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    v-bind="attrs"
  >
    <template v-if="props.header !== false" #header>
      <slot name="header"></slot>
    </template>
    <slot />
    <template v-if="props.footer !== false" #footer>
      <template v-if="!!props.canResize">
        <div
          v-if="props.canResize == 'can-resize2' || props.canResize == 'can-resize22'"
          v-dialogResizeImg="props.canResize"
          class="foot-box"
        >
          <slot name="footer"></slot>
        </div>
        <div v-else-if="props.canResize == 'can-resize3'" v-dialogResizeStandard="props.canResize" class="foot-box">
          <slot name="footer"></slot>
        </div>
        <div v-else v-dialogResize="props.canResize" class="foot-box">
          <slot name="footer"></slot>
        </div>
      </template>
      <template v-else>
        <slot name="footer"></slot>
      </template>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="EpDialog">
import { withDefaults, ref, useAttrs } from 'vue'
import { ElDialog } from 'element-plus'
const props = withDefaults(
  defineProps<{
    header?: boolean
    footer?: boolean
    canResize?: string
  }>(),
  { header: true, footer: true, canResize: '' }
)
const attrs = useAttrs()
</script>

<style scoped lang="scss"></style>
