<template>
    <view>
        <!-- 弹窗 -->
        <uni-popup ref="popup" type="center" border-radius="10px" background-color="rgba(0,0,0,0)">
            <view class="topBtnBox">
                <slot></slot>
            </view>
            <view class="topBtnBoxbottom" @click="close()">
                <uni-icons type="clear" color="#AAA" size='40'></uni-icons>
            </view>
        </uni-popup>

        <!-- 底部弹窗 -->
        <uni-popup class="popup-bottom" ref="popupBottom" type="bottom" border-radius="10px"
            background-color="rgba(0,0,0,0)">
            <view class="popup-bottom-box">
                <slot>
                </slot>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import {
    ref
} from 'vue';
export default {
    name: "popup",
    data() {
        return {

        };
    },


    methods: {

        /**
         * @param {Object} e
         * bottom top lef right
         * 打开弹窗
         */
        open(e) {
            switch (e) {
                case "bottom":
                    this.$refs.popupBottom.open(e)
                    break;
                default:
                    this.$refs.popup.open(e)
            }

        },

        /**
         * 关闭弹窗
         */
        close() {
            this.$refs.popup.close()
        }
    }
}
</script>

<style lang="less">
.popup-box {
    padding: 32rpx;
    background-color: #ffffff;
    border-radius: 32rpx;
}

.topBtnBox {
    background-color: #fff;
    width: 80vw;
    padding: 32rpx;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}

.topBtnBoxbottom {
    display: flex;
    justify-content: center;
    margin-top: 36rpx;
}

.popup-bottom {
    .popup-bottom-box {
        width: 100%;
        border-radius: 32rpx 32rpx 0 0;
        background-color: #EDEDED;
        height: 100rpx;
    }
}
</style>