<template>
    <!-- 全局弹出层 -->
    <up-popup
        :show="modelValue"
        :mode="mode"
        :closeable="closeable"
        :closeIconPos="closeIconPos"
        :closeOnClickOverlay="closeOnClickOverlay"
        :customStyle="getCustomStyle"
        @close="close"
        @open="open"
    >
        <view class="popup">
            <slot name="title" v-if="title">
                <view class="title">{{ title }}</view>
            </slot>
            <slot name="top"></slot>
            <scroll-view scroll-y class="content" :scroll-top="scrollTop" @scroll="scroll">
                <slot></slot>
            </scroll-view>
        </view>
    </up-popup>
</template>

<script setup>
import { computed, nextTick, ref, watch } from 'vue'

const es = defineEmits(['update:modelValue', 'close', 'open'])
const ps = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    width: {
        type: [String, Number],
        default: ''
    },
    height: {
        type: [String, Number],
        default: ''
    },
    title: {
        type: String,
        default: ''
    },
    background: {
        type: String,
        default: '#fff'
    },
    // top / right / bottom / center
    mode: {
        type: String,
        default: 'bottom'
    },
    closeable: {
        type: Boolean,
        default: false
    },
    // top-left / bottom-left / bottom-right
    closeIconPos: {
        type: String,
        default: 'top-right'
    },
    closeOnClickOverlay: {
        type: Boolean,
        default: true
    },
    round: {
        type: [String, Number],
        default: 0
    },
    distance: {
        type: Number,
        default: 0
    },
    customStyle: {
        type: Object,
        default: () => {
            return {}
        }
    }
})
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
const getCustomStyle = computed(() => {
    const style = {
        ...ps.customStyle,
        width: ps.width ? ps.width + 'rpx' : 'auto',
        height: ps.height ? ps.height + 'rpx' : 'auto',
        background: ps.background
    }
    if (ps.mode == 'bottom') {
        style.borderTopLeftRadius = ps.round + 'rpx'
        style.borderTopRightRadius = ps.round + 'rpx'
        style.marginTop = safeAreaInsets?.top + 'px'
    }
    if (ps.mode == 'right') {
        style.borderTopLeftRadius = ps.round + 'rpx'
        style.marginTop = safeAreaInsets?.top + 'px'
    }
    if (ps.mode == 'left') {
        style.borderTopRightRadius = ps.round + 'rpx'
        style.marginTop = safeAreaInsets?.top + 'px'
    }
    return style
})
//控制滚动区域
const scrollTop = ref(0)
const oldScrollTop = ref(0)
const scroll = (e) => {
    oldScrollTop.value = e.detail.scrollTop
}
watch(
    () => ps.modelValue,
    (value) => {
        if (value) {
            scrollTop.value = 0
            nextTick(() => {
                scrollTop.value = ps.distance > 0 ? ps.distance : oldScrollTop.value
            })
        }
    }
)
const close = () => {
    es('update:modelValue', false)
    es('close')
}
const open = () => {
    es('open')
}
</script>
<style lang="scss">
.popup {
    height: 100%;
    display: flex;
    flex-direction: column;
    .title {
        color: $mocp-text-5;
        font-size: 40rpx;
        padding: 18rpx 32rpx;
    }
    .content {
        flex: auto;
        overflow-y: auto;
    }
}
</style>
