<template>
    <div class="ui-drag-modal-box-hide" v-if="isBody">
        <Teleport to="#app">
            <div class="ui-drag-modal-box" :class="[isModalShow?'ui-drag-modal-show':'']" :id="'drag-modal-' + uuid"
                 :style="{left: dragModalLeft + 'px', top: dragModalTop + 'px', width: widthVal + 'px', height: heightVal + 'px'}">
                <div class="ui-drag-modal-dialog shadow-xl" :class="[bg,ui]" :style="{width: widthVal + 'px', height: heightVal + 'px'}" @mousedown="dragModalMouseDown">
                    <div class="ui-drag-modal-dialog-header" :class="titleBorder?'border-bottom':''">
                        <div class="ui-drag-modal-dialog-title text-lg" :class="titleUi">
                            <span v-if="title">{{title}}</span>
                        </div>
                        <div class="ui-drag-modal-dialog-close" v-if="closeIcon" @click="_closeClick()">
                            <HcIcon name="close"/>
                        </div>
                    </div>
                    <div class="ui-drag-modal-dialog-body" @mousedown.stop="dragModalBodyMouseDown">
                        <slot></slot>
                    </div>
                    <span class="ui-drag-modal-resize" @mousedown="dragModalResizeMouseDown"/>
                </div>
            </div>
        </Teleport>
    </div>
</template>

<script setup>
import { ref,nextTick,watch } from "vue"
import { getRandom } from "js-fast-way"
//参数
const props = defineProps({
    ui: {
        type: String,
        default: ''
    },
    bg: {
        type: String,
        default: ''
    },
    widths: {
        type: [Number,String],
        default: 340
    },
    title: {
        type: String,
        default: ''
    },
    titleUi: {
        type: [String,Object,Array],
        default: ''
    },
    titleBorder: {
        type: Boolean,
        default: false
    },
    closeIcon: {
        type: Boolean,
        default: false
    },
    isShow: {
        type: Boolean,
        default: false
    },
    lefts: {
        type: [Number,String],
        default: 0
    },
    tops: {
        type: [Number,String],
        default: 0
    },
})

//变量
const uuid = getRandom()
const isBody = ref(false)
const isModalShow = ref(props.isShow)
const dragModalLeft = ref(parseInt(props.lefts + ''))
const dragModalTop = ref(parseInt(props.tops + ''))
const widthVal = ref(parseInt(props.widths + ''))
const heightVal = ref(440)

//监听
watch(() => props.isShow, (isShow) => {
    isModalShow.value = isShow;
})

//
nextTick(()=> {
    //页面渲染完成后，再让 vue3 的 Teleport，把弹出框挂载到外部节点上。
    isBody.value = true
})

//弹窗拖动
const dragModalMouseDown = (event) => {
    // 阻止默认事件和冒泡
    event.preventDefault()
    event.stopPropagation()
    //获取相关dom元素
    let body = document.body, dom = document.getElementById('drag-modal-' + uuid)
    // 鼠标按下，计算当前元素距离可视区的距离
    const disX = event.clientX - dom.offsetLeft, disY = event.clientY - dom.offsetTop;
    const lefts = body.clientWidth - dom.clientWidth, tops = body.clientHeight - dom.clientHeight;
    document.onmousemove = (ve) => {
        // 通过事件委托，计算移动的距离
        let left = ve.clientX - disX, top = ve.clientY - disY
        // 判断是否超出可视区
        if (left <= 0) left = 0
        if (left > lefts) {
            left = lefts
        }

        if (top <= 0) top = 0
        if (top > tops) {
            top = tops
        }
        // 移动当前元素
        dragModalLeft.value = left
        dragModalTop.value = top
    }
    document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
    }
}

//禁止拖动
const dragModalBodyMouseDown = () => {}


//弹窗改变宽高
const dragModalResizeMouseDown = (event) => {
    // 阻止默认事件和冒泡
    event.preventDefault()
    event.stopPropagation()
    //获取相关dom元素
    let body = document.body, dom = document.getElementById('drag-modal-' + uuid)
    let clientX = event.clientX, clientY = event.clientY;
    let offsetWidth = dom.offsetWidth, clientHeight = dom.clientHeight;
    document.onmousemove = (e) => {
        //拖拽时为了对宽和高 限制一下范围，定义两个变量
        let W =  e.clientX - clientX + offsetWidth;
        let H =  e.clientY - clientY + clientHeight;

        if(body.offsetWidth - e.clientX < 0){
            W = body.offsetWidth - parseInt(dom.style.marginLeft);
        }
        if(body.offsetHeight - e.clientY < 0){
            H = body.offsetHeight - parseInt(dom.style.marginTop);
        }

        widthVal.value = W;// 拖拽后物体的宽
        heightVal.value = H;// 拖拽后物体的高
    }
    document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
    }
}


//事件
const emit = defineEmits(['close'])
const show = () => {
    isModalShow.value = true;
}
const hide = () => {
    isModalShow.value = false;
}
const _closeClick = () => {
    hide();
    emit('close', false)
}
</script>

<style lang="scss" scoped>
@import './modal.scss';
</style>
