<template>
    <view
        v-if="showMask"
        class="mask"
        @touchmove.prevent.stop
        @tap="closeMask"
    >
        <view v-if="mask.type && mask.type === 'jinqi'">
            <view class="jinqi-tip"/>
            <view class="highlight">
                <view class="med-icon c-font-normal med-icon-jinqi"/>
                <text class="c-font-normal c-gap-left-small">赠送锦旗</text>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 蒙层组件
 * @author zhangchun05
 * @categories 业务组件，通过mask.type区分
 * @tags [component]
 */

export default {
    options: {
        addGlobalClass: true
    },
    config: {
        component: true
    },
    props: {
        /**
         * 蒙层数据
         */
        mask: {
            type: Object,
            default() {
                return {};
            }
        },
        /**
         * 是否展示
         */
        show: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        show(val) {
            this.showMask = val;
        }
    },
    data() {
        return {
            showMask: this.show,
        };
    },
    methods: {
        closeMask() {
            this.showMask = false;
            this.$emit('close');
        }
    }
};
</script>
<style lang="less" scoped>
.mask {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 930;
}
.jinqi-tip {
    position: absolute;
    bottom: 0.56rem;
    right: 0.37rem;
    width: 77vw;
    height: 32vw;
    background-image: url('https://med-fe.cdn.bcebos.com/wz/jinqi-tip.png');
    background-size: 100% 100%;
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
}
.highlight {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 0.05rem;
    right: 0.12rem;
    width: 26vw;
    height: 0.34rem;
    border: 1px dashed #525252;
    border-radius: 0.06rem;
    background: #fff;
    z-index: 931;
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
}
</style>
