<!-- 页面描述 -->
<template>
    <uni-popup ref="jyPopup" :type="type">
        <view class="jy-popup-content f1 bfff pr" v-if="type == 'center'">
            <slot name="title">
                <view class="title fw600">
                    <text>{{ title }}</text>
                </view>
            </slot>
            <uni-icons @click="close" class="close-btn c999" type="closeempty" size="20"></uni-icons>
            <view class="p25">
                <slot />
                <button v-if="showSave" class="save-btn" @click="savePost">保存</button>
            </view>
        </view>
        <view class="jy-popup-bottom f1 bfff pr" v-if="type == 'bottom'"
            :style="{ 'padding-bottom': `${bottomSafeAreaHeight(true) + 20}px` }">
            <!-- 头部标题 + 关闭 空格-->
            <slot name="title">
                <view class="title fw600">
                    <text>{{ title }}</text>
                </view>
            </slot>
            <uni-icons @click="close" class="close c999" type="closeempty" size="20"></uni-icons>
            <view :style="{ 'height': `${screenHeight(true) * 0.7}px` }">
                <slot />
            </view>
            <button v-if="showSave" class="save-btn" @click="emit('savePost')">{{ saveTitle }}</button>
        </view>
    </uni-popup>
</template>
<script setup>
import { ref, defineEmits, defineExpose } from 'vue'

import { bottomSafeAreaHeight, screenHeight } from '@/components/public/Mixins.js'
const jyPopup = ref(null)
const emit = defineEmits(['savePost'])
defineProps({
    title: {
        type: String,
        default: ''
    },
    showSave: {
        type: Boolean,
        default: false
    },
    saveTitle: {
        type: String,
        default: '保存'
    },
    type: {
        type: String,
        default: 'content'
    }
})
const close = () => {
    jyPopup.value.close()
}
const open = () => {
    jyPopup.value.open()
}
defineExpose({
    close, open
})
</script>
<style scoped lang="scss">
.jy-popup-content {
    width: 100%;
    border-radius: 30rpx;

    .close-btn {
        position: absolute;
        top: 0;
        right: 0;
        height: 52rpx;
        line-height: 52rpx;
        width: 52rpx;
        background: #D8D8D8;
        font-size: 30rpx;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: translate(50%, -50%);
    }
}

.save-btn {
    background: linear-gradient(270deg, #FF9B27 20%, #FDC123 103%);
    font-size: 32rpx;
    color: #FFFFFF;
    margin: 0 20rpx;
}

.title {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80rpx;
    // 底部边框显示
    color: #3D3D3D;
    font-size: 32rpx;
    border-bottom: 1px solid #E5E5E5;
}

.jy-popup-bottom {
    width: 100%;
    border-radius: 30rpx 30rpx 0 0;

    .close {
        position: absolute;
        right: 20rpx;
        top: 20rpx;
        display: inline-block;
        width: 50rpx;
        height: 80rpx;
    }
}
</style>