<script lang="ts" setup>
import { useEventListener } from "../ts/useEventListener";
import { inject, shallowRef } from "vue";
import { LoggerKey } from "../ts/class/Logger";

const logger = inject(LoggerKey);

const props = defineProps<{
    curPopupTitle: { title: string, },
}>();

// 虚拟dom容器
const container = shallowRef();

useEventListener(container, 'click', (ev) => {
    ev.preventDefault();
    if (ev.target === container.value) {
        props.curPopupTitle.title = null;
    }
});
</script>

<template>
    <div v-show="curPopupTitle.title" ref="container" class="popup-container">
        <div class="border-round">
            <div class="title-black top-round">
                <p>{{ curPopupTitle.title || '芜湖助手' }}</p>
            </div>
            <div class="bottom-round cont-gray scroll-area scrollbar-transparent">
                <slot></slot>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
export default {
  name: "PopupWindow"
}
</script>

<style scoped>
.popup-container {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #00000080;
    z-index: 110001;
}
</style>
