<template>
    <transition>
        <!--    绑定style中top和left-->
        <div class="moveBox" id="box" :style="position" v-if="show"
             @mousemove="mousemove"
             @mousedown="mousedown"
             @mouseup="mouseup"
             @mouseleave="mousemove"
             @mouseout="mouseout"
        >
            <div class="moveHead">{{title}}</div>
            <!--      关闭按钮-->
            <div class="close" @click="toggleShow">×</div>
            <div class="content">
                <!--插槽-->
                <slot></slot>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    name: "moveBox",
    props:{
        title:{
            type:String,
            default:'这是标题'
        },
    },
    data() {
        return {
            show:true,
            x: 600,//left:x
            y: 200,//top:y
            leftOffset: 0,//鼠标距离移动窗口左侧偏移量
            topOffset: 0,//鼠标距离移动窗口顶部偏移量
            isMove: false,//是否移动标识
        };
    },
    computed: {
        //top与left加上px
        position() {
            return `top:${this.y}px;left:${this.x}px;`;
        },
    },
    methods: {
        //控制打开关闭
        toggleShow() {
            this.show = !this.show;
            this.$emit('isClose',this.show)
        },
        mousedown(event) {
            let box = document.getElementById('box')
            //鼠标按下事件
            this.leftOffset = event.clientX - box.offsetLeft
            this.topOffset = event.clientY - box.offsetTop
            this.isMove = true;
        },
        //鼠标移动
        mousemove(event) {
            if (!this.isMove) {
                return;
            }
            this.x = event.clientX - this.leftOffset;
            this.y = event.clientY - this.topOffset;
        },
        //鼠标抬起
        mouseup() {
            this.isMove = false;
        },
        mouseout(){
            this.isMove = false;
        },
    },
};
</script>

<style lang="less" scoped>
.moveBox {
    z-index: 100;
    width: 768px;
    position: fixed;
    box-shadow: 0 0 5px 3px rgba(17, 56, 112, 0.72);
    .moveHead {
        line-height: 30px;
        font-size: 18px;
        height: 30px;
        background-color: rgba(17, 56, 112, 0.5);
        cursor: move;
    }
    .close {
        position: absolute;
        right: 0;
        top: 0;
        line-height: 30px;
        font-size: 24px;
        cursor: pointer;
        display: block;
        width: 30px;
        height: 30px;
        text-align: center;
    }
}
.v-enter,
.v-leave-to {
    opacity: 0;
    transform: scale(0.5);
}
.content {
}
.v-enter-active,
.v-leave-active {
    transition: all 0.5s ease;
}
</style>
