<template>
  <ElDialog
    ref="elDialogRef"
    v-model="dialogVisible"
    :title="title"
    :fullscreen="isFullscreen"
    :close-on-click-modal="false"
    draggable
    top="10vh"
    v-bind="$attrs">
    <template #header="scope">
      <slot name="header" v-bind="scope">
        <div style="display: flex">
          <slot name="title">
            <span style="flex: 1">{{ title }}</span>
          </slot>
        </div>
      </slot>
    </template>

    <ElScrollbar :style="dialogStyle">
      <slot></slot>
    </ElScrollbar>
    <template #footer>
      <slot name="footer">
        <ElButton @Click="handleClose()">取 消</ElButton>
        <ElButton type="primary" @click="handleConfirm()">确 定</ElButton>
      </slot>
    </template>
  </ElDialog>
</template>

<script setup lang="ts" name="EcoDialog">
import { type DialogProps } from 'element-plus'
import { getPx } from '@/utils'

interface EcoDialogProps {
  title?: string // 顶部标题
  fullscreen?: boolean // 是否默认全屏，默认 false
  fullscreenIcon?: boolean // 是否渲染全屏图标，默认 true
  height?: string | number
}

const props = withDefaults(defineProps<EcoDialogProps>(), {
  title: '弹框',
  fullscreen: false,
  fullscreenIcon: true,
  height: 400
})

const emits = defineEmits<{
  close: [value: DialogProps | null]
  confirm: [value: DialogProps | null]
}>()

const dialogVisible = defineModel<boolean>({ required: true })

const slots = useSlots()

const isFullscreen = ref(false)
const elDialogRef = shallowRef<DialogProps | null>(null)

const toggleFull = () => {
  isFullscreen.value = !unref(isFullscreen)
}

const dialogHeight = ref(getPx(props.height))

watch(
  isFullscreen,
  async (val: boolean) => {
    await nextTick()
    if (val) {
      const windowHeight = document.documentElement.offsetHeight
      dialogHeight.value = `${windowHeight - 41 - 49 - 47 - (slots.footer ? 63 : 0)}px`
    } else {
      dialogHeight.value = getPx(props.height)
    }
  },
  {
    immediate: true
  }
)

const dialogStyle = computed(() => {
  return {
    height: unref(dialogHeight)
  }
})

const handleClose = () => {
  emits('close', unref(elDialogRef))
  dialogVisible.value = false
}

const handleConfirm = () => {
  emits('confirm', unref(elDialogRef))
  dialogVisible.value = false
}

defineExpose({ elDialogRef })
</script>

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