<script setup>
    const props = defineProps({
        appendToBody: {
            type: Boolean,
            default: false,
        },
        lockScroll: {
            type: Boolean,
            default: true,
        },
        width: {
            type: [String, Number],
            default: '50%',
        },
        modelValue: {
            type: Boolean,
            default: false,
        },
        title: {
            type: String,
            default: '',
        },
        showClose: {
            type: Boolean,
            default: true,
        },
        showFullscreen: {
            type: Boolean,
            default: false,
        },
        draggable: {
            type: Boolean,
            default: true,
        },
        loading: {
            type: Boolean,
            default: false,
        },
    })
    const emit = defineEmits(['update:modelValue'])

    const dialogVisible = useVModel(props, 'modelValue', emit)
    const isFullscreen = ref(false)

    const closeDialog = () => {
        dialogVisible.value = false
    }
    const setFullscreen = () => {
        isFullscreen.value = !isFullscreen.value
    }
</script>

<template>
    <div class="vab-dialog">
        <el-dialog
            v-model="dialogVisible"
            v-bind="$attrs"
            :append-to-body="appendToBody"
            :draggable="draggable"
            :fullscreen="isFullscreen"
            :lock-scroll="lockScroll"
            :show-close="false"
            :width="width"
        >
            <template #header>
                <slot name="header">
                    <span class="el-dialog__title">{{ title }}</span>
                </slot>
                <div class="vab-dialog__headerbtn">
                    <button
                        v-if="showFullscreen"
                        aria-label="fullscreen"
                        type="button"
                        @click="setFullscreen"
                    >
                        <vab-icon
                            v-if="isFullscreen"
                            icon="fullscreen-exit-line"
                        />
                        <vab-icon v-else icon="fullscreen-line" />
                    </button>
                    <button
                        v-if="showClose"
                        aria-label="close"
                        type="button"
                        @click="closeDialog"
                    >
                        <vab-icon icon="close-circle-line" />
                    </button>
                </div>
            </template>
            <div v-loading="loading">
                <slot></slot>
            </div>
            <template #footer>
                <slot name="footer"></slot>
            </template>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
    .vab-dialog {
        &__headerbtn {
            position: absolute;
            top: var(--el-dialog-padding-primary);
            right: var(--el-dialog-padding-primary);
        }

        button {
            padding: 0;
            margin-left: 15px;
            font-size: var(--el-message-close-size, 16px);
            color: var(--el-color-info);
            cursor: pointer;
            outline: none;
            background: transparent;
            border: none;
            transition: $base-transition;

            &:hover i {
                color: var(--el-color-primary);
            }
        }

        :deep(.el-dialog) {
            &.is-fullscreen {
                top: 0 !important;
                left: 0 !important;
                display: flex;
                flex-direction: column;

                .el-dialog__body {
                    flex: 1;
                    overflow: auto;
                }

                .el-dialog__footer {
                    padding-bottom: 10px;
                    border-top: 1px solid var(--el-border-color-base);
                }
            }
        }
    }
</style>
