<template>
    <div class="hc-drag-node-box">
        <div class="hc-drag-node-mousewheel" @mousewheel="dragNodeMousewheel">
            <div :id="'drag-node-' + uuid" :style="{zoom: zoomRef + '%'}" class="hc-drag-node-content"
                 @mousedown="dragNodeMouseDown">
                <slot></slot>
            </div>
        </div>
        <div class="hc-drag-node-tools">
            <div class="hc-drag-node__actions__inner">
                <el-tooltip content="放大" placement="top" popper-class="z-9999">
                    <div class="icon-view" @click="enlargeClick">
                        <HcIcon name="add-circle"/>
                    </div>
                </el-tooltip>
                <el-tooltip content="缩小" placement="top" popper-class="z-9999">
                    <div class="icon-view" @click="shrinkClick">
                        <HcIcon name="indeterminate-circle"/>
                    </div>
                </el-tooltip>
                <el-tooltip :content="scaleType === 'mouse'?'切换为手动缩放模式':'切换为滚轮缩放模式'"
                            placement="top" popper-class="z-9999">
                    <div class="icon-view" @click="scaleTypeClick">
                        <HcIcon v-if="scaleType === 'mouse'" name="navigation"/>
                        <HcIcon v-else name="mouse"/>
                    </div>
                </el-tooltip>
                <div :class="moreMenus.length > 0 ? 'is-border':''" class="icon-view-more">
                    <template v-for="item in moreMenus" :key="item.key">
                        <el-tooltip v-if="item.name" :content="item.name" placement="top" popper-class="z-9999">
                            <div class="icon-view" @click="moreMenusClick(item)">
                                <HcIcon :name="item.icon"/>
                            </div>
                        </el-tooltip>
                        <div v-else class="icon-view" @click="moreMenusClick(item)">
                            <HcIcon :name="item.icon"/>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, watch} from "vue"
import {getRandom} from "vue-utils-plus"
//初始
const props = defineProps({
    moreMenu: {
        type: Array,
        default: () => ([])
    }
})

//变量
const uuid = getRandom()
const moreMenus = ref(props.moreMenu)

//监听
watch(() => [
    props.moreMenu,
], ([menu]) => {
    moreMenus.value = menu
})

//事件
const emit = defineEmits(['menuTap'])

//菜单被点击
const moreMenusClick = (item) => {
    emit('menuTap', item)
}

//缩放模式
const scaleType = ref('mouse')
const scaleTypeClick = () => {
    scaleType.value = scaleType.value === 'mouse' ? 'navigation' : 'mouse'
}

const zoomRef = ref(100)

//放大
const enlargeClick = () => {
    // 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小
    let zoom = parseInt(zoomRef.value + '') || 100
    zoom += 10
    // 最小范围 和 最大范围 的图片缩放尺度
    if (zoom >= 40 && zoom < 300) {
        zoomRef.value = zoom
    }
}

//缩小
const shrinkClick = () => {
    // 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小
    let zoom = parseInt(zoomRef.value + '') || 100
    zoom -= 10
    // 最小范围 和 最大范围 的图片缩放尺度
    if (zoom >= 40 && zoom < 300) {
        zoomRef.value = zoom
    }
}

//滚轮放大缩小
const dragNodeMousewheel = (event) => {
    if (scaleType.value === 'mouse') {
        // 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小
        let zoom = parseInt(zoomRef.value + '') || 100
        // event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动
        zoom += event.wheelDelta / 12
        // 最小范围 和 最大范围 的图片缩放尺度
        if (zoom >= 40 && zoom < 300) {
            zoomRef.value = zoom
        }
        return false
    }
}

//拖动
const isDown = ref(false)
const dragNodeMouseDown = (event) => {
    // 阻止默认事件和冒泡
    //event.preventDefault()
    event.stopPropagation()
    //获取相关dom元素
    let dom = document.getElementById('drag-node-' + uuid)
    //获取x坐标和y坐标
    let clientX = event.clientX, clientY = event.clientY;

    //获取左部和顶部的偏移量
    let offsetLeft = dom.offsetLeft, offsetTop = dom.offsetTop;
    //开关打开
    isDown.value = true;

    //设置样式
    dom.style.cursor = 'move';

    document.onmousemove = (e) => {
        if (isDown.value === false) {
            return;
        }
        //获取x和y
        let nx = e.clientX;
        let ny = e.clientY;
        //计算移动后的左偏移量和顶部的偏移量
        let nl = nx - (clientX - offsetLeft);
        let nt = ny - (clientY - offsetTop);

        dom.style.left = nl + 'px';
        dom.style.top = nt + 'px';
    }
    document.onmouseup = () => {
        //开关关闭
        isDown.value = false;
        dom.style.cursor = 'default';
        document.onmousemove = null;
        document.onmouseup = null;
    }
}
</script>

<style lang="scss" scoped>
.hc-drag-node-box {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background-color: #c4c4c4;
    .hc-drag-node-mousewheel {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: auto;
        /* 滚动条的宽度 */
        &::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
        .hc-drag-node-content {
            display: table;
            text-align: center;
            position: absolute;
            left: 50%;
            transform: translate(-50%, 0);
        }
    }
    .hc-drag-node-tools {
        position: absolute;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.8;
        cursor: default;
        box-sizing: border-box;
        user-select: none;
        left: 50%;
        bottom: 10px;
        transform: translate(-50%);
        height: 44px;
        background-color: #606266;
        padding: 0 23px;
        border-color: rgb(255, 255, 255);
        border-radius: 22px;
        .hc-drag-node__actions__inner {
            width: 100%;
            height: 100%;
            text-align: justify;
            cursor: default;
            font-size: 23px;
            color: rgb(255, 255, 255);
            display: flex;
            align-items: center;
            justify-content: space-around;
            .icon-view {
                font-size: inherit;
                cursor: pointer;
                height: 1em;
                width: 1em;
                line-height: 1em;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                position: relative;
                fill: currentcolor;
                color: inherit;
                border-radius: 3px;
                margin: 0 8px;
                transition: color .2s, background-color .2s;
                &:hover {
                    color: var(--el-color-primary);
                    background-color: white;
                }
            }
            .icon-view-more {
                position: relative;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                font-size: inherit;
                height: 1em;
                fill: currentcolor;
                color: inherit;
                &.is-border {
                    padding-left: 10px;
                    margin-left: 10px;
                    border-left: 1px solid #a7a7a7;
                }
            }
        }
    }
}
</style>
