<template>
    <!-- 模态框通用样式 -->
    <n-card
        size="huge"
        role="dialog"
        aria-modal="true"
        :bordered="false"
        class="modal-container"
        :style="{ width: width, height: height }"
    >
        <n-flex justify="space-between" style="height: 40px">
            <n-gradient-text
                style="font-size: 20px; font-weight: 600; letter-spacing: 2px"
                gradient="linear-gradient(90deg, #CDF7FD 0%, #DAFAFE 20%, #CDF7FD 40%, #DAFAFE 60%, #CDF7FD 80%, #DAFAFE 100%)"
            >
                {{ modalTitle }}
            </n-gradient-text>

            <img
                class="close-icon"
                src="@/assets/home-imgs/close.png"
                @click="onHandleCloseModal"
            />
        </n-flex>

        <div class="modal-content">
            <slot></slot>
        </div>
    </n-card>
</template>

<script setup>
const props = defineProps({
    width: {
        type: String,
        default: '80%',
    },
    height: {
        type: String,
        default: '',
    },
    modalTitle: {
        type: String,
        default: '',
    },
})
const emits = defineEmits(['onHandleCloseModal'])

// 关闭模态框
const onHandleCloseModal = () => {
    emits('onHandleCloseModal')
}
</script>

<style lang="scss" scoped>
.modal-container {
    display: flex;
    flex-direction: column;
    background: url('@/assets/home-imgs/modal-bg.png') no-repeat center center;
    background-size: 100% 100%;
}

.close-icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.modal-content {
    flex: 1;
    height: calc(100% - 40px);
}
</style>
