<template>
    <view class="half-screen">
        <!--屏幕背景变暗的背景  -->
        <view class="background_screen" @tap="hideModal" v-if="showModalStatus"></view>
        <!--弹出框  -->
        <scroll-view scroll-y :animation="animationData" class="attr_box boxClass" v-if="showModalStatus">
            <slot />
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            //弹窗显示控制
            showModalStatus: false,

            animationData: ''
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        title: {
            type: String,
            default: '标题'
        }
    },
    externalClasses: ['boxClass'],
    /**
     * 组件的方法列表
     */
    methods: {
        //点击显示底部弹出
        changeRange: function () {
            this.showModal();
        },

        onClose() {
            this.hideModal();
        },

        //底部弹出框
        showModal: function () {
            // 背景遮罩层
            var animation = uni.createAnimation({
                duration: 200,
                timingFunction: 'linear',
                delay: 0
            }); //this.animation = animation

            animation.translateY(300).step();
            this.setData({
                animationData: animation.export(),
                showModalStatus: true
            });
            setTimeout(
                function () {
                    animation.translateY(0).step();
                    this.setData({
                        animationData: animation.export()
                    });
                }.bind(this),
                200
            );
        },
        //点击背景面任意一处时，弹出框隐藏
        hideModal: function () {
            //弹出框消失动画
            var animation = uni.createAnimation({
                duration: 200,
                timingFunction: 'linear',
                delay: 0
            }); //this.animation = animation

            animation.translateY(300).step();
            this.setData({
                animationData: animation.export()
            });
            setTimeout(
                function () {
                    animation.translateY(0).step();
                    this.setData({
                        animationData: animation.export(),
                        showModalStatus: false
                    });
                }.bind(this),
                200
            );
        }
    }
};
</script>
<style>
/*使屏幕变暗  */
.background_screen {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.2;
    overflow: hidden;
    z-index: 1000;
    color: #fff;
}
/*对话框 */
.attr_box {
    width: 100%;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2000;
    background: #fff;
    border-radius: 32rpx 32rpx 0 0;
}
</style>
