<template>
    <view
        v-if="visible"
        class="tianditu-popop"
        :style="{ height: winHeight + 'px', width: winWidth + 'px', top: winTop + 'px' }"
    >
        <view v-if="header" class="popup-header" @click="close">
            <slot name="header"></slot>
        </view>
        <view :style="{ minHeight: contentHeight + 'vh' }" class="popup-content fadeInUp animated">
            <slot></slot>
        </view>
    </view>
</template>

<script>
export default {
    name: 'custom-popup',
    data() {
        return {
            winWidth: 0,
            winHeight: 0,
            winTop: 0,
            contentHeight: 30,
        };
    },
    props: {
        visible: {
            type: Boolean,
            require: true,
            default: false,
        },
        hide: {
            type: Number,
            default: 0,
        },
        header: {
            type: Boolean,
            default: true,
        },
        contentH: {
            type: Number,
            default: 30,
        },
    },
    created() {
        var that = this;
        if (this.contentH) {
            this.contentHeight = this.contentH;
        }
        uni.getSystemInfo({
            success: function (res) {
                if (that.hide === 0) {
                    that.winWidth = res.screenWidth;
                    that.winHeight = res.screenHeight;
                    that.winTop = 0;
                } else {
                    that.winWidth = res.windowWidth;
                    that.winHeight = res.windowHeight;
                    that.winTop = res.windowTop;
                }
            },
        });
    },
    methods: {
        close(e) {
            this.$emit('onClose');
        },
    },
};
</script>

<style scoped>
.tianditu-popop {
    position: fixed;
    left: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
}

.popup-header {
    flex: 1;
}

.popup-content {
    background-color: #ffffff;
    min-height: 300px;
    width: 100%;
    /*     position: absolute;
        bottom: 0;
        left: 0; */
}

/*base code*/
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        -ms-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
</style>
