<template>
    <view
        :style="{
            visibility: !visibilityOnlyMask ? visibility : {},
            zIndex
        }"
        class="popup"
    >
        <!-- mask -->
        <view
            :style="{
                visibility,
                opacity
            }"
            class="mask"
            @touchmove.prevent
            @tap="handleMaskTap"
        >
        </view>
        <view
            :style="{
                transform: 'translateY(' + translateY + ') scaleZ(1)'
            }"
            class="content"
        >
            <slot/>
        </view>
    </view>
</template>
<script>
export default {
    config: {
        component: true
    },
    props: {
        /**
         * 是否显示
         */
        show: {
            type: Boolean,
            default: false
        },
        /**
         * css z-index
         */
        zIndex: {
            type: String,
            default: '921'
        },
        /**
         * 是否不要内边距
         */
        rowTile: {
            type: Boolean,
            default: false
        },
        /**
         * visibility 是否只生效于 mask 上（在内容区 slot 上如果有输入框等容易在不同机型上出问题的控件，需要保持 content 一直显示）
         */
        visibilityOnlyMask: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            // 透明度
            opacity: 0,
            // 最外层隐藏或显示
            visibility: 'hidden',
            translateY: '100%'
        };
    },
    methods: {
        handleMaskTap() {
            /**
             * 蒙层点击
             *
             * @event masktap
             */
            this.$emit('masktap');
            /**
             * 关闭事件
             *
             * @event close
             */
            this.$emit('close');
        }
    },
    watch: {
        show(newVal, oldVal) {
            if (newVal) {
                this.visibility = 'visible';
                this.opacity = 1;
                this.translateY = 0;
            }
            else {
                this.opacity = 0;
                this.translateY = '300%';
                setTimeout(() => {
                    this.visibility = 'hidden';
                }, 300);
            }
        }
    }
};
</script>
<style lang="less" scoped>
.popup {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display:flex;
    align-items:center;
}
.mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 920;
    background-color: rgba(0, 0, 0, 1);
    transition: opacity .16s cubic-bezier(0, 0, .3, 1);
}
.content {
    position: fixed;
    max-height: 100%;
    left: 0;
    right: 0;
    z-index: 921;
    background-color: #fff;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    transition: all .3s cubic-bezier(0.42, 0, 0.52, 1);
}
</style>