<template>
    <teleport to="body" :disabled="!appendBody">
        <transition name="fade">
            <div :class="ns.e('wrapper')" v-if="props.visible">
                <div :class="[classes, ns.is('fullscreen', fullscreen), ns.is('draggable', drag)]"
                     :style="style"
                     ref="dialogRef"
                >
                    <div :class="ns.e('header')" ref="headerRef">
                        <slot name="header">
                            <b :class="ns.e('title')">{{ title }}</b>
                            <div
                                :class="ns.e('headerfull')"
                                v-if="full"
                                @click="clickFull"
                                :style="{right: closable ? '40px':'0'}"
                            >
                                <mo-icon v-if="fullscreen">
                                    <component :is="CopyDocument"/>
                                </mo-icon>
                                <mo-icon v-else>
                                    <component :is="FullScreen"/>
                                </mo-icon>
                            </div>
                            <div
                                v-if="closable"
                                :class="ns.e('headerbtn')"
                                @click="handleClose"
                            >
                                <mo-icon :class="ns.e('close')">
                                    <component :is="Close"/>
                                </mo-icon>
                            </div>
                        </slot>
                    </div>
                    <div
                        :class="ns.e('body')"
                        :style="{height: $slots.footer ? 'calc(100% - 110px)':'calc(100% - 50px)'}"
                    >
                        <slot/>
                    </div>
                    <div :class="ns.e('footer')">
                        <slot name="footer"/>
                    </div>
                </div>
            </div>
        </transition>
    </teleport>
</template>

<script lang="ts">
export default {
    name: "MoDialog"
};
</script>
<script lang="ts" setup>
import {computed, ref, watch} from 'vue'
import {Close, FullScreen, CopyDocument} from '@element-plus/icons-vue'
import {useNamespace} from '@moui/hooks'
import {dialogProps} from './dialog.ts'
import MoIcon from "@moui/components/icon";
import {useDraggable} from "@moui/hooks/use-draggable";

const props = defineProps(dialogProps)
const ns = useNamespace('dialog')
const classes = computed(() => {
    const {type, hit, effect, closable, round, size} = props
    return [
        ns.b(),
        ns.is('closable', closable),
        ns.m(type),
        ns.m(size),
        ns.m(effect),
        ns.is('hit', hit),
        ns.is('round', round),
    ]
})
const style = computed(() => {
    const {width, height} = props
    return {
        width: width,
        height: height
    }
})
// 全屏
const fullscreen = ref(false)
// 关闭
const emit = defineEmits(['update:visible'])
// methods
const handleClose = () => {
    const {beforeClose} = props
    if (beforeClose) {
        beforeClose()
    } else {
        emit('update:visible', false)
    }
}
const clickFull = () => {
    fullscreen.value = !fullscreen.value
}
// 拖拽
const dialogRef = ref<HTMLElement>()
const headerRef = ref<HTMLElement>()

const drag = computed(() => props.drag && !fullscreen.value)
useDraggable(dialogRef, headerRef, drag)

watch(
    () => props.visible,
    () => {
        fullscreen.value = false
    }
)
</script>
