<template>
    <view 
        v-if="isShow"
        class="modal-container"
    >
        <view 
            class="modal-container__mask"
            :style="{
                background,
                zIndex,
            }"
            @touchmove.prevent.stop
            @tap="onModalCloas({type: 'mask'})"
        >
            <view class="modal-container__cont">
                <slot></slot>
            </view>
        </view>
    </view>
</template>
<script>
/**
 * @file 弹窗容器
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    props: {
        /**
         * 背景颜色
         */
        background: {
            type: String,
            default: 'rgba(0, 0, 0, 0.7)'
        },
        /**
         * 层级
         */
        zIndex: {
            type: [String, Number],
            default: '100'
        },
        /**
         * 是否显示
         */
        isShow: {
            type: Boolean,
            default: false
        },
    },
    watch: {
        isShow(n, o) {
            if (n) {
                // 设置胶囊透明度
                this.setMenuOpacity(0.1);
            } else {
                // 取消胶囊透明度
                this.setMenuOpacity(1);
            }
        }
    },
    pageLifetimes: {
        show() {
            if (!this.isShow) {
                // 设置胶囊透明度
                this.setMenuOpacity(1);
            } else {
                // 取消胶囊透明度
                this.setMenuOpacity(0.1);
            }
        },
        hide() {
            // 设置胶囊透明度
            this.setMenuOpacity(1);
        }
    },
    methods: {
        // 设置胶囊透明度
        setMenuOpacity(alpha) {
            if (process.env.MARS_ENV === 'swan') {
                typeof this.$api.setMenuOpacity === 'function' && this.$api.setMenuOpacity({alpha});
            }
        },
        // 蒙层点击
        onModalCloas(params) {
            /** 蒙层点击 */
            this.$emit('onModalCloas', params);
        }
    }
};
</script>
<style lang="less" scoped>
.modal-container {
    width: 100vw;
    height: 100vh;
    &__mask {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        transition: opacity 0.16s cubic-bezier(0, 0, 0.3, 1);
    }
    &__cont {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>
