<template>
    <hy-transition
        :show="show"
        :custom-class="`hy-overlay ${customClass}`"
        :duration="duration"
        :custom-style="overlayStyle"
        @click="clickHandler"
    >
        <slot />
    </hy-transition>
</template>

<script lang="ts">
export default {
    name: 'hy-overlay',
    options: {
        addGlobalClass: true,
        virtualHost: true,
        styleIsolation: 'shared'
    }
}
</script>

<script setup lang="ts">
import { computed } from 'vue'
import type { CSSProperties } from 'vue'
import type { IOverlayEmits } from './typing'
import overlayProps from './props'
// 组件
import HyTransition from '../hy-transition/hy-transition.vue'

/**
 * 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
 * @displayName hy-overlay
 */
defineOptions({})

const props = defineProps(overlayProps)
const emit = defineEmits<IOverlayEmits>()

const overlayStyle = computed<CSSProperties>(() => {
    const style: CSSProperties = {
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        zIndex: props.zIndex,
        bottom: 0,
        pointerEvents: !props.LockScroll ? 'none' : 'auto',
        'background-color': `rgba(0, 0, 0, ${props.opacity})`
    }
    return Object.assign(style, props.customStyle)
})
const clickHandler = () => {
    emit('click')
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
