<template>
    <!-- 带有遮罩层的模态窗   -->
    <div class="tooltips" :class="{hasmask:mask}" :style="`pointer-events:${mask?'':'none'};z-index:${zIndex};`+widthAndHeight">
        <transition name="fadeinout">
            <div class="tooltips-mask"
                 v-show="triggerTransform"
                 :style="maskWidthAndHeight+`background:rgba(2,7,13,${maskAlpha});backdrop-filter: blur(${blur}px);`"></div>
        </transition>
        <div class="tooltips-content" :style="tooltipsPosition">
            <transition v-on:after-leave="triggerClose" :name="transitionName">
                <div class="transition-holder" v-show="triggerTransform">
                    <div class="tooltips-background" :style="background">
                        <div class="tooltips-close"
                             v-if="closeImg !== null"
                             :class="{'popicon icon_guanbi': !closeImg}"
                             :style="{background: `url(${closeImg}) center no-repeat`,backgroundSize: '100% 100%',...closeImgParams}"
                             @click="close"></div>
                        <slot></slot>
                    </div>
                    <CornerImg v-if="outline"
                               :mode="outline.mode"
                               :color="outline.color"
                               :size="outline.size"
                               :margin="outline.margin"
                               :show-border="outline.showBorder"
                               :border="outline.border"
                    ></CornerImg>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
    import "../../iconfont/iconfont.css";
    import CornerImg from '../Cornerimg'
    import { mixinsOptions, isType } from "../../utils/util";

    export default {
        name: "Masks",
        components:{
            CornerImg
        },
        props: {
            configs:{
                type: Object,
                required: true
            },
        },
        data: function () {
            return {
                mask: true,
                maskAlpha: 0.8,
                height: null,
                width: null,
                blur: false,
                background:`background: rgba(12, 49, 70, 0.5);box-shadow: 0px -1px 5px 2px rgba(2, 13, 20, 0.69);`,
                position: null,
                outline:{
                    mode:'1234',
                    color:'#25d4ff',
                    size:'15',
                    margin:'-24',
                    showBorder: true,
                    border:'1px solid #25d4ff'
                },
                trackMouse:false,
                transitionName: 'fadeinout',
                mouseInfo:{
                    left: null,
                    top: null
                },
                zIndex:null,
                closeImg: undefined,
                closeImgParams: {},
                triggerTransform: false,
                onclose: () => {},
                onopen:() => {}
            }
        },
        watch: {
            '$route.path':function () {
                this.close()
            }
        },
        computed:{
            widthAndHeight:function () {
                return `height:${this.height};width:${this.width};`
            },
            maskWidthAndHeight:function () {
                return `height:${this.maskHeight};width:${this.width};`
            },
            tooltipsPosition:function () {
                if(this.trackMouse){
                    return `left:${this.mouseInfo.left}px;top:${this.mouseInfo.top}px;`
                }else if(this.position){
                    return `left:${this.position.left}px;top:${this.position.top}px;`
                }else{
                    return `top: 50%;left: 50%;transform: translate(-50%,-50%);`
                }
            }
        },
        created: function () {
            try {
                this.bus.$on('closePopup',this.close)
            } catch (e) {

            }
            this.setDefaultConfig()
        },
        mounted: function(){
            this.$nextTick(() => {
                this.triggerTransform = true;
                try {
                    this.onopen();
                }catch (e) {
                    console.log(e);
                }
            })
        },
        methods: {
            setDefaultConfig(){
                this.height = document.body.clientHeight+'px';
                this.maskHeight = document.body.scrollHeight + 'px'
                this.width = document.body.clientWidth+'px';
                this.zIndex = this.configs.defaultConfig.zIndex;
                mixinsOptions(this,this.configs);
                this.handlerTrackMouse()
            },
            handlerTrackMouse(){
                // 是否显示在鼠标附近
                if(this.trackMouse&&window.event){
                    // 是否有其他参数
                    if(isType('Object',this.trackMouse)){
                        this.mouseInfo.left = window.event?.clientX + (Number(this.trackMouse?.left)||0);
                        this.mouseInfo.top = window.event?.clientY + (Number(this.trackMouse?.top)||0);
                    }else{
                        // 没有其他参数，给mouseinfo赋值
                        this.mouseInfo.left = window.event?.clientX;
                        this.mouseInfo.top = window.event?.clientY;
                    }
                }
            },
            triggerClose(el,done){
                this.$emit('destory',this.$root,this.monopoly);
                this.$destroy();
                try {
                    this.$el.parentNode.removeChild(this.$el);
                }catch (e) {
                    console.log(e);
                }
            },
            close: function (...args) {/*关闭弹窗传参11*/
                try {
                    this.onclose(...args)
                }catch (e) {
                    console.log(e);
                }
                this.triggerTransform = false;
            }
        },
    }
</script>

<style lang="scss" scoped>
    .tooltips{
        position: absolute;
        top: 0;
        left: 0;
        .tooltips-mask{
            position: absolute;
            background: rgba(2, 7, 13, 0.8);
            display: none;
            transition: all .4s;
            transform: translateY(0)!important;
        }
        .tooltips-content{
            position: absolute;
        }
        .tooltips-background{
            position: relative;
            pointer-events: auto;
        }
        .tooltips-close{
            position: absolute;
            cursor: pointer;
            font-size: 26px;
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #d6eaff;
            font-weight: bolder;
            text-shadow: 0 1px 3px #fff;
            right: 10px;
            top: 10px;
            z-index: 10;
        }
        .hidden{
            display: none;
        }
    }
    .tooltips.hasmask .tooltips-mask{
        display: block;
    }
    .fadeinout-enter,.fadeinout-leave-to{
        opacity: 0;
        transform: translateY(-10%);
    }
    .fadeinout-enter-to,.fadeinout-leave{
        opacity: 1;
        transform: translateY(0%);
    }
    .fadeinout-enter-active,.fadeinout-leave-active{
        transition: all .4s;
    }
</style>

