<template>
    <template v-if="show">
        <view class="hlw-popup-mask" @tap.self="onClose" />
        <view
            class="hlw-popup"
            :class="[`hlw-popup--${position}`, { 'hlw-popup--round': round }]"
            @tap.stop
        >
            <view v-if="title || closable" class="hlw-popup-header">
                <text class="hlw-popup-title">{{ title }}</text>
                <view v-if="closable" class="hlw-popup-close i-fa6-solid-xmark" @tap="onClose" />
            </view>
            <slot />
        </view>
    </template>
</template>

<script setup lang="ts">
/**
 * HlwPopup — 基础遮罩弹窗组件
 *
 * 轻量级弹窗容器，支持从页面上、下、中等不同方位弹出。支持自定义圆角、头部标题及关闭按钮。
 *
 * @props
 *   show     - 是否展示弹窗，默认 false
 *   position - 弹窗滑出方向：top / center / bottom，默认 bottom
 *   round    - 是否启用圆角效果，默认 true
 *   closable - 是否展示关闭按钮，默认 true
 *   title    - 弹窗顶部的标题文字
 *
 * @events
 *   update:show - 双向绑定显示状态时触发
 *   close       - 弹窗关闭时触发
 *
 * @example
 * ```vue
 * <HlwPopup v-model:show="visible" title="协议内容" position="bottom">
 *     <view>这里是协议正文内容...</view>
 * </HlwPopup>
 * ```
 */
interface Props {
    show?: boolean;
    position?: "bottom" | "center" | "top";
    round?: boolean;
    closable?: boolean;
    title?: string;
}

withDefaults(defineProps<Props>(), {
    show: false,
    position: "bottom",
    round: true,
    closable: true,
    title: "",
});

const emit = defineEmits<{ "update:show": [value: boolean]; close: [] }>();

function onClose() {
    emit("update:show", false);
    emit("close");
}
</script>

<style lang="scss" scoped>
.hlw-popup-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    animation: hlw-fade-in 0.25s;
}

.hlw-popup {
    position: fixed;
    z-index: 1001;
    background: #fff;

    &--bottom {
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 80vh;
        animation: hlw-popup-slide-up 0.25s ease;

        &.hlw-popup--round {
            border-radius: var(--radius-xl, 32rpx) var(--radius-xl, 32rpx) 0 0;
        }
    }

    &--top {
        left: 0;
        right: 0;
        top: 0;
        max-height: 80vh;
        animation: hlw-popup-slide-down 0.25s ease;

        &.hlw-popup--round {
            border-radius: 0 0 var(--radius-xl, 32rpx) var(--radius-xl, 32rpx);
        }
    }

    &--center {
        left: 50%;
        top: 50%;
        width: 80%;
        transform: translate(-50%, -50%);
        border-radius: var(--radius-xl, 32rpx);
        animation: hlw-popup-scale-in 0.22s ease;
    }
}

.hlw-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28rpx 32rpx;
    border-bottom: 1rpx solid var(--border-color-light, #f1f5f9);
}

.hlw-popup-title {
    font-size: var(--font-md, 34rpx);
    font-weight: 600;
    color: #1e293b;
}

.hlw-popup-close {
    font-size: var(--font-md, 34rpx);
    color: #94a3b8;
    line-height: 1;
    padding: 4rpx;
}

@keyframes hlw-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes hlw-popup-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes hlw-popup-slide-down {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

@keyframes hlw-popup-scale-in {
    from { transform: translate(-50%, -50%) scale(0.92); opacity: 0; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
</style>
