<!-- 熱區(qū)組件 -->
<template>
    <el-dialog v-model="dialog_visible" append-to-body fullscreen @close="close_event">
        <template #header>
            <div class="title re">
                <div class="tc size-16 fw">編輯熱區(qū)</div>
            </div>
        </template>
        <el-scrollbar class="content-scrollbar">
            <div class="pa-40 flex-row gap-40">
                <div class="left-content flex-1 pa-20">
                    <el-scrollbar class="img-scrollbar">
                        <div class="img-container">
                            <div ref="imgBoxRef" @mousedown.prevent="start_drag" @mousemove.prevent="move_drag" @mouseup.prevent="end_drag">
                                <el-image :src="hot_list.img" class="w img" @selectstart.prevent @contextmenu.prevent @dragstart.prevent></el-image>
                                <div ref="areaRef" class="area" :style="init_drag_style"></div>
                                <div v-for="(item, index) in hot_list.hot" :key="index" class="area-box" :style="rect_style(item.drag_start, item.drag_end)" @mousedown.prevent="start_drag_area_box(index, $event)" @dblclick="dbl_drag_event(item, index)">
                                    <div class="del-btn" @click.stop="del_area_event(index)"><icon name="close"></icon></div>
                                    <div class="drag-btn" :data-index="index" @mousedown.prevent="start_drag_btn(index, $event)"></div>
                                    <div class="text">
                                        <div class="name">{{ item.name }}</div>
                                        <div class="status" :class="item.status ? 'cr-primary' : 'cr-error'">{{ item.status ? '已設(shè)置' : '未設(shè)置' }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-scrollbar>
                </div>
                <div class="right-content flex-1 pa-20">
                    <div class="size-16 fw mb-10">圖片熱區(qū)</div>
                    <div class="size-12 cr-9 mb-20">框選熱區(qū)范圍，雙擊設(shè)置熱區(qū)信息</div>
                    <div class="flex-col gap-20 item">
                        <div v-for="(item, index) in hot_list.hot" :key="index" class="flex-row align-c gap-10">
                            <el-input v-model="item.name" class="name" placeholder="名稱"></el-input>
                            <url-value v-model="item.link"></url-value>
                            <icon name="del" size="20" @click="del_event(index)"></icon>
                        </div>
                    </div>
                </div>
            </div>
        </el-scrollbar>
        <template #footer>
            <span class="dialog-footer">
                <el-button class="plr-28 ptb-10" type="primary" @click="confirm_event">完成</el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog v-model="hot_dialog_visible" width="560" append-to-body @close="hot_close_event">
        <template #header>
            <div class="title re">
                <div class="tc size-16 fw">設(shè)置熱區(qū)</div>
            </div>
        </template>
        <div class="content">
            <el-form ref="formRef" :model="form" label-width="85px" class="pa-20 mt-16">
                <el-form-item label="熱區(qū)跳轉(zhuǎn)鏈接">
                    <url-value v-model="form.link"></url-value>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button class="plr-28 ptb-10" @click="hot_close_event">取消</el-button>
                <el-button class="plr-28 ptb-10" type="primary" @click="hot_confirm_event">確定</el-button>
            </span>
        </template>
    </el-dialog>
    <el-button class="w" @click="dialog_visible = true"><icon name="add">編輯熱區(qū)</icon></el-button>
</template>
<script lang="ts" setup>
import { cloneDeep } from 'lodash';
const app = getCurrentInstance();
/**
 * @description: 熱區(qū)
 * @param modelValue{Object} 默認(rèn)值
 * @param dialog_visible {Boolean} 彈窗顯示
 * @return {*} update:modelValue
 */
const props = defineProps({});
const modelValue = defineModel({ type: Object as PropType<hotData>, default: {} });
const dialog_visible = defineModel('visibleDialog', { type: Boolean, default: false });
const hot_list = ref<hotData>({
    img: '',
    hot: [],
});
const hot_list_index = ref(0);
watch(
    () => modelValue.value,
    (val) => {
        hot_list.value = cloneDeep(val);
        console.log(val);
    },
    { immediate: true, deep: true }
);

//#region 左側(cè)畫布-----------------------------------------------start
const imgBoxRef = ref<HTMLElement | null>(null);
const rect_start = ref<rectCoords>({ x: 0, y: 0, width: 0, height: 0 });
const rect_end = ref<rectCoords>({ x: 0, y: 0, width: 0, height: 0 });
const areaRef = ref<HTMLElement | null>(null);
const init_drag_style = ref('');
const drag_bool = ref(false);
const drag_box_bool = ref(false);
const drag_box_scale_bool = ref(false);
const start_drag = (event: MouseEvent) => {
    drag_bool.value = true;
    if (!imgBoxRef.value) return;
    rect_start.value.x = event.clientX - imgBoxRef.value.getBoundingClientRect().left;
    rect_start.value.y = event.clientY - imgBoxRef.value.getBoundingClientRect().top;
    rect_start.value.width = 0;
    rect_start.value.height = 0;
};
const move_drag = (event: MouseEvent) => {
    if (drag_bool.value) {
        if (!imgBoxRef.value) return;
        rect_end.value.x = event.clientX - imgBoxRef.value.getBoundingClientRect().left;
        rect_end.value.y = event.clientY - imgBoxRef.value.getBoundingClientRect().top;
        rect_end.value.width = rect_end.value.x - rect_start.value.x > 0 ? rect_end.value.x - rect_start.value.x : 0;
        rect_end.value.height = rect_end.value.y - rect_start.value.y > 0 ? rect_end.value.y - rect_start.value.y : 0;
        init_drag_style.value = `left: ${rect_start.value.x}px;top: ${rect_start.value.y}px;width: ${Math.max(rect_end.value.width, 1)}px;height: ${Math.max(rect_end.value.height, 1)}px;display: flex;`;
    }
};
const end_drag = (event: MouseEvent) => {
    drag_bool.value = false;
    if (areaRef.value) areaRef.value.style.display = 'none';
    if (!imgBoxRef.value) return;
    init_drag_style.value = ``;
    if (rect_end.value.width > 16 && rect_end.value.height > 16) {
        hot_list.value.hot.push({
            name: '熱區(qū)' + (hot_list.value.hot.length + 1),
            link: {},
            drag_start: cloneDeep(rect_start.value),
            drag_end: cloneDeep(rect_end.value),
            status: false,
        });
    }
    rect_end.value = { x: 0, y: 0, width: 0, height: 0 };
};
const area_box_point = ref({ x: 0, y: 0 });
// area-box
const dbl_drag_event = (item: hotListData, index: number) => {
    hot_dialog_visible.value = true;
    form.value.link = item.link;
    hot_list_index.value = index;
};
const start_drag_area_box = (index: number, event: MouseEvent) => {
    hot_list_index.value = index;
    event.stopPropagation();
    drag_box_bool.value = true;
    let clone_drag_start = cloneDeep(hot_list.value.hot[hot_list_index.value].drag_start);
    let clone_drag_end = cloneDeep(hot_list.value.hot[hot_list_index.value].drag_end);
    // 記錄原始位置
    area_box_point.value = {
        x: clone_drag_start.x - event.clientX,
        y: clone_drag_start.y - event.clientY,
    };

    // 當(dāng)子元素拖拽方法觸發(fā)后夫元素方法不觸發(fā)
    document.onmousemove = (areaBoxEvent) => {
        areaBoxEvent.stopPropagation();
        if (drag_box_bool.value) {
            if (!imgBoxRef.value) return;
            const new_coordinate = {
                x: areaBoxEvent.clientX + area_box_point.value.x,
                y: areaBoxEvent.clientY + area_box_point.value.y,
            };
            // 左上邊界判斷
            if (new_coordinate.x < 0) {
                new_coordinate.x = 0;
            }
            if (new_coordinate.y < 0) {
                new_coordinate.y = 0;
            }
            // 右下邊界判斷
            if (new_coordinate.x + Math.max(clone_drag_end.width, 1) > imgBoxRef.value.getBoundingClientRect().width) {
                new_coordinate.x = imgBoxRef.value.getBoundingClientRect().width - Math.max(clone_drag_end.width, 1);
            }
            if (new_coordinate.y + Math.max(clone_drag_end.height, 1) > imgBoxRef.value.getBoundingClientRect().height) {
                new_coordinate.y = imgBoxRef.value.getBoundingClientRect().height - Math.max(clone_drag_end.height, 1);
            }
            hot_list.value.hot[hot_list_index.value].drag_start.x = new_coordinate.x;
            hot_list.value.hot[hot_list_index.value].drag_start.y = new_coordinate.y;
        }
    };
    document.onmouseup = (areaBoxEvent) => {
        areaBoxEvent.stopPropagation();
        drag_box_bool.value = false;
    };
};
// drag-btn
const start_drag_btn = (index: number, event: MouseEvent) => {
    hot_list_index.value = index;
    event.stopPropagation();
    drag_box_scale_bool.value = true;
    let clone_drag_start = hot_list.value.hot[hot_list_index.value].drag_start;
    let clone_drag_end = hot_list.value.hot[hot_list_index.value].drag_end;
    document.onmousemove = (dragBtnEvent) => {
        dragBtnEvent.stopPropagation();
        //用鼠標(biāo)的位置減去鼠標(biāo)相對(duì)元素的位置，得到元素的位置
        if (drag_box_scale_bool.value) {
            if (!imgBoxRef.value) return;
            clone_drag_end.x = dragBtnEvent.clientX - imgBoxRef.value.getBoundingClientRect().left;
            clone_drag_end.y = dragBtnEvent.clientY - imgBoxRef.value.getBoundingClientRect().top;
            hot_list.value.hot[hot_list_index.value].drag_end = {
                x: clone_drag_end.x,
                y: clone_drag_end.y,
                width: clone_drag_end.x - clone_drag_start.x > 0 ? clone_drag_end.x - clone_drag_start.x : 0,
                height: clone_drag_end.y - clone_drag_start.y > 0 ? clone_drag_end.y - clone_drag_start.y : 0,
            };
        }
    };
    document.onmouseup = (dragBtnEvent2) => {
        dragBtnEvent2.stopPropagation();
        drag_box_scale_bool.value = false;
    };
};
const del_area_event = (index: number) => {
    hot_list.value.hot.splice(index, 1);
};
const rect_style = computed(() => {
    return (start: rectCoords, end: rectCoords) => {
        return `left: ${start.x}px;top: ${start.y}px;width: ${Math.max(end.width, 1)}px;height: ${Math.max(end.height, 1)}px;display: flex;`;
    };
});
//#endregion 左側(cè)畫布-----------------------------------------------end

//#region 右側(cè)熱區(qū)編輯-----------------------------------------------start
const del_event = (index: number) => {
    hot_list.value.hot.splice(index, 1);
};
//#endregion 右側(cè)熱區(qū)編輯-----------------------------------------------end

//#region 設(shè)置熱區(qū)彈窗-----------------------------------------------start
const hot_dialog_visible = ref(false);
const form = ref({
    link: {},
});
const hot_close_event = () => {
    hot_dialog_visible.value = false;
};
const hot_confirm_event = () => {
    hot_list.value.hot[hot_list_index.value].link = form.value.link;
    hot_close_event();
};
//#endregion 設(shè)置熱區(qū)彈窗-----------------------------------------------end

//#region 熱區(qū)確認(rèn)取消回調(diào) -----------------------------------------------start
// 取消回調(diào)
const close_event = () => {
    dialog_visible.value = false;
};
// 確認(rèn)回調(diào)
const confirm_event = () => {
    modelValue.value = hot_list.value;
    close_event();
};
//#endregion 熱區(qū)確認(rèn)取消回調(diào) -----------------------------------------------end
</script>
<style lang="scss" scoped>
.content-scrollbar {
    height: calc(100vh - 13.8rem);
    margin: 0 -1.6rem;
    .left-content {
        .img-scrollbar {
            display: flex;
            justify-content: center;
            .img-container {
                max-width: 60rem;
                min-width: 30rem;
                height: calc(100vh - 25.8rem);
                position: relative;
                .img {
                    user-select: none;
                    cursor: crosshair;
                }
                .area {
                    position: absolute;
                    background: rgba(41, 128, 185, 0.3);
                    border: 1px dashed #34495e;
                    width: 0px;
                    height: 0px;
                    left: 0px;
                    top: 0px;
                    display: none;
                }
                .area-box {
                    position: absolute;
                    background: rgba(42, 148, 255, 0.25);
                    border: 1px dashed #8ec6ff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #1989fa;
                    font-size: 1.2rem;
                    cursor: move;
                    transition: transform 0.1s;
                    .del-btn {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: #1890ff;
                        color: #fff;
                        text-align: center;
                        border-radius: 0 0 0 0.3rem;
                        position: absolute;
                        right: 0.7rem;
                        top: 0.7rem;
                        transform: translate3d(50%, -50%, 0);
                        cursor: default;
                        width: 1.6rem;
                        height: 1.6rem;
                        line-height: 1.6rem;
                        z-index: 1;
                        i {
                            font-size: 0.9rem;
                        }
                    }
                    .drag-btn {
                        position: absolute;
                        width: 7px;
                        height: 7px;
                        background: transparent;
                        right: 0;
                        bottom: 0;
                        transform: translate3d(50%, 50%, 0);
                        cursor: nwse-resize;
                        z-index: 1;
                    }
                    .text {
                        overflow: hidden;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: center;
                        max-width: 100%;
                        max-height: 100%;
                        text-align: center;
                        align-items: center;
                        color: #fff;
                        font-size: 1.2rem;
                        .name {
                            color: #fff;
                            margin: 0 0.2rem;
                        }
                        .status {
                            margin: 0 0.2rem;
                        }
                    }
                }
            }
        }
    }
    .right-content {
        .item {
            max-width: 47.8rem;
            .name {
                width: 9.8rem;
            }
        }
    }
}
</style>

<!-- 上傳組件 -->
<template>
    <el-dialog v-model="dialogVisible" width="1168" append-to-body fullscreen @close="close_event">
        <template #header>
            <div class="title re">
                <div class="tc size-16 fw">編輯熱區(qū)</div>
            </div>
        </template>
        <el-scrollbar class="content-scrollbar">
            <div class="pa-40 flex-row gap-40">
                <div class="left-content flex-1 pa-20">
                    <el-scrollbar class="img-scrollbar">
                        <div class="img-container">
                            <div ref="imgBoxRef" @mousedown.prevent="start_drag" @mousemove.prevent="move_drag" @mouseup.prevent="end_drag">
                                <el-image :src="modelValue.img" class="w img" @selectstart.prevent @contextmenu.prevent @dragstart.prevent></el-image>
                                <div ref="areaRef" class="area" :style="init_drag_style"></div>
                            </div>
                        </div>
                    </el-scrollbar>
                </div>
                <div class="right-content flex-1 pa-20">
                    <div class="size-16 fw mb-10">圖片熱區(qū)</div>
                    <div class="size-12 cr-9 mb-20">框選熱區(qū)范圍，雙擊設(shè)置熱區(qū)信息</div>
                    <div class="flex-col gap-20 item">
                        <div v-for="(item, index) in modelValue.hot" :key="index" class="flex-row align-c gap-10">
                            <el-input v-model="item.name" class="name" placeholder="名稱"></el-input>
                            <url-value v-model="item.link"></url-value>
                            <icon name="del" size="20" @click="del_event(index)"></icon>
                        </div>
                    </div>
                </div>
            </div>
        </el-scrollbar>
        <template #footer>
            <span class="dialog-footer">
                <el-button class="plr-28 ptb-10" type="primary" @click="confirm_event">完成</el-button>
            </span>
        </template>
    </el-dialog>
    <el-button class="w" @click="dialogVisible = true"><icon name="add">編輯熱區(qū)</icon></el-button>
</template>
<script lang="ts" setup>
import { cloneDeep } from 'lodash';
const app = getCurrentInstance();
/**
 * @description: 熱區(qū)
 * @param modelValue{Object} 默認(rèn)值
 * @param dialogVisible {Boolean} 彈窗顯示
 * @param type{String} 鏈接類型為空數(shù)組則表示無限制，全部可用，傳過來則表示傳的值可用
 * @param placeholder{String} 提示文字
 * @return {*} update:modelValue
 */
const props = defineProps({});
const modelValue = defineModel({ type: Object as PropType<hotData>, default: {} });
const dialogVisible = defineModel('visibleDialog', { type: Boolean, default: false });

//#region 左側(cè)畫布-----------------------------------------------start
interface RectCoords {
    x: number;
    y: number;
    width: number;
    height: number;
}

interface drag {
    status: boolean;
    name: string;
    link: object;
}
const drag_list = ref<drag[]>([]);

const imgBoxRef = ref<HTMLElement | null>(null);
// 開始坐標(biāo)
const rect_start = ref<RectCoords>({ x: 0, y: 0, width: 0, height: 0 });
// 結(jié)束坐標(biāo)
const rect_end = ref<RectCoords>({ x: 0, y: 0, width: 0, height: 0 });
// 拖拽顯示的占位區(qū)域
const areaRef = ref<HTMLElement | null>(null);
// 拖拽顯示的初始化樣式
const init_drag_style = ref('');
// 拖拽開關(guān)
const drag_bool = ref(false);
// 拖拽box開關(guān)
const drag_box_bool = ref(false);
// 拖拽box放大縮小開關(guān)
const drag_box_scale_bool = ref(false);
// 拖拽鼠標(biāo)左擊 開始
const start_drag = (event: MouseEvent) => {
    drag_bool.value = true;
    if (!imgBoxRef.value) return;
    rect_start.value.x = event.clientX - imgBoxRef.value.getBoundingClientRect().left;
    rect_start.value.y = event.clientY - imgBoxRef.value.getBoundingClientRect().top;
    rect_start.value.width = 0;
    rect_start.value.height = 0;
};
// 跟隨鼠標(biāo)移動(dòng)
const move_drag = (event: MouseEvent) => {
    if (drag_bool.value) {
        if (!imgBoxRef.value) return;
        rect_end.value.x = event.clientX - imgBoxRef.value.getBoundingClientRect().left;
        rect_end.value.y = event.clientY - imgBoxRef.value.getBoundingClientRect().top;
        rect_end.value.width = rect_end.value.x - rect_start.value.x > 0 ? rect_end.value.x - rect_start.value.x : 0;
        rect_end.value.height = rect_end.value.y - rect_start.value.y > 0 ? rect_end.value.y - rect_start.value.y : 0;
        init_drag_style.value = rect_style(rect_start.value, rect_end.value);
    }
};
// 拖拽結(jié)束
const end_drag = (event: MouseEvent) => {
    drag_bool.value = false;
    if (areaRef.value) areaRef.value.style.display = 'none';
    if (!imgBoxRef.value) return;
    let clone_drag_start = cloneDeep(rect_start.value);
    let clone_drag_end = cloneDeep(rect_end.value);
    init_drag_style.value = ``;
    if (rect_end.value.width > 16 && rect_end.value.height > 16) {
        // 克隆area元素，并將class=“area”改為area-box
        const area_box = document.createElement('div');
        area_box.className = 'area-box';
        area_box.style.cssText = rect_style(clone_drag_start, clone_drag_end);
        if (areaRef.value) areaRef.value.parentNode?.appendChild(area_box);
        drag_list.value.push({
            name: '熱區(qū)' + drag_list.value.length + 1,
            link: {},
            status: false,
        });
        // area_box 添加拖拽功能
        area_box.onmousedown = (areaEvent) => {
            areaEvent.stopPropagation();
            drag_box_bool.value = true;
            // 記錄原始位置
            let area_box_point = {
                x: clone_drag_start.x - areaEvent.clientX,
                y: clone_drag_start.y - areaEvent.clientY,
            };
            // 當(dāng)子元素拖拽方法觸發(fā)后夫元素方法不觸發(fā)
            document.onmousemove = (areaBoxEvent) => {
                areaBoxEvent.stopPropagation();
                if (drag_box_bool.value) {
                    console.log('area_box onmousemove');
                    if (!imgBoxRef.value) return;
                    const new_coordinate = {
                        x: areaBoxEvent.clientX + area_box_point.x,
                        y: areaBoxEvent.clientY + area_box_point.y,
                    };
                    // 左上邊界判斷
                    if (new_coordinate.x < 0) {
                        new_coordinate.x = 0;
                    }
                    if (new_coordinate.y < 0) {
                        new_coordinate.y = 0;
                    }
                    // 右下邊界判斷
                    if (new_coordinate.x + Math.max(clone_drag_end.width, 1) > imgBoxRef.value.getBoundingClientRect().width) {
                        new_coordinate.x = imgBoxRef.value.getBoundingClientRect().width - Math.max(clone_drag_end.width, 1);
                    }
                    if (new_coordinate.y + Math.max(clone_drag_end.height, 1) > imgBoxRef.value.getBoundingClientRect().height) {
                        new_coordinate.y = imgBoxRef.value.getBoundingClientRect().height - Math.max(clone_drag_end.height, 1);
                    }
                    clone_drag_start.x = new_coordinate.x;
                    clone_drag_start.y = new_coordinate.y;
                    area_box.style.cssText = rect_style(clone_drag_start, clone_drag_end);
                }
            };
            document.onmouseup = (areaBoxEvent) => {
                areaBoxEvent.stopPropagation();
                drag_box_bool.value = false;
            };
        };
        // 在新增的元素內(nèi)創(chuàng)建刪除按鈕 ---------------
        const del_btn = document.createElement('div');
        del_btn.className = 'del-btn';
        del_btn.innerHTML = `<i class="iconfont icon-close"></i>`;
        area_box.appendChild(del_btn);
        del_btn.onclick = () => {
            event.stopPropagation();
            // 將當(dāng)前點(diǎn)擊的del_btn的父級(jí)area_box完全刪除不留痕跡
            area_box.parentNode?.removeChild(area_box);
        };
        // 在新增的元素內(nèi)創(chuàng)建拖拽按鈕 ---------------
        const drag_btn = document.createElement('div');
        drag_btn.className = 'drag-btn';
        area_box.appendChild(drag_btn);
        // 當(dāng)子元素拖拽方法觸發(fā)后夫元素方法不觸發(fā)
        drag_btn.onmousedown = (dragBtnEvent) => {
            dragBtnEvent.stopPropagation();
            drag_box_scale_bool.value = true;
            // // 使用document綁定的drag事件：如果綁定到元素本身的情況下，鼠標(biāo)拖動(dòng)過快，鼠標(biāo)會(huì)離開拖拽的元素，導(dǎo)致拖拽一段距離，拖拽失效的問題
            document.onmousemove = (dragBtnEvent2) => {
                dragBtnEvent2.stopPropagation();
                //用鼠標(biāo)的位置減去鼠標(biāo)相對(duì)元素的位置，得到元素的位置
                if (drag_box_scale_bool.value) {
                    if (!imgBoxRef.value) return;
                    clone_drag_end.x = dragBtnEvent2.clientX - imgBoxRef.value.getBoundingClientRect().left;
                    clone_drag_end.y = dragBtnEvent2.clientY - imgBoxRef.value.getBoundingClientRect().top;
                    clone_drag_end.width = clone_drag_end.x - clone_drag_start.x > 0 ? clone_drag_end.x - clone_drag_start.x : 0;
                    clone_drag_end.height = clone_drag_end.y - clone_drag_start.y > 0 ? clone_drag_end.y - clone_drag_start.y : 0;
                    area_box.style.cssText = rect_style(clone_drag_start, clone_drag_end);
                }
            };
            document.onmouseup = (dragBtnEvent3) => {
                dragBtnEvent3.stopPropagation();
                drag_box_scale_bool.value = false;
            };
        };
        // 在新增的元素內(nèi)創(chuàng)建文本提示---------------
        const drag_text = document.createElement('div');
        drag_text.className = 'text';
        drag_text.innerHTML = `<div class="name">熱區(qū)一</div><div class="status">未設(shè)置</div>`;
        area_box.appendChild(drag_text);
    }
    rect_end.value = { x: 0, y: 0, width: 0, height: 0 };
};
const rect_style = (start: RectCoords, end: RectCoords) => {
    return `left: ${start.x}px;top: ${start.y}px;width: ${Math.max(end.width, 1)}px;height: ${Math.max(end.height, 1)}px;display: flex;`;
};
//#region 左側(cè)畫布-----------------------------------------------end

//#region 右側(cè)熱區(qū)編輯-----------------------------------------------start
const del_event = (index: number) => {
    modelValue.value.hot.splice(index, 1);
};
//#region 右側(cè)熱區(qū)編輯-----------------------------------------------end

//#region 熱區(qū)確認(rèn)取消回調(diào) -----------------------------------------------start
// 取消回調(diào)
const close_event = () => {
    dialogVisible.value = false;
};
// 確認(rèn)回調(diào)
const confirm_event = () => {
    close_event();
};
//#endregion 熱區(qū)確認(rèn)取消回調(diào) -----------------------------------------------end
</script>
<style lang="scss" scoped>
.content-scrollbar {
    height: calc(100vh - 13.8rem);
    margin: 0 -1.6rem;
    .left-content {
        .img-scrollbar {
            display: flex;
            justify-content: center;
            .img-container {
                max-width: 60rem;
                min-width: 30rem;
                height: calc(100vh - 25.8rem);
                position: relative;
                .img {
                    user-select: none;
                    cursor: crosshair;
                }
                .area {
                    position: absolute;
                    background: rgba(41, 128, 185, 0.3);
                    border: 1px dashed #34495e;
                    width: 0px;
                    height: 0px;
                    left: 0px;
                    top: 0px;
                    display: none;
                }
                :deep(.area-box) {
                    position: absolute;
                    background: rgba(42, 148, 255, 0.25);
                    border: 1px dashed #8ec6ff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #1989fa;
                    font-size: 1.2rem;
                    cursor: move;
                    transition: transform 0.1s;
                    .del-btn {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: #1890ff;
                        color: #fff;
                        text-align: center;
                        border-radius: 0 0 0 0.3rem;
                        position: absolute;
                        right: 0.7rem;
                        top: 0.7rem;
                        transform: translate3d(50%, -50%, 0);
                        cursor: default;
                        width: 1.6rem;
                        height: 1.6rem;
                        line-height: 1.6rem;
                        z-index: 1;
                        i {
                            font-size: 0.9rem;
                        }
                    }
                    .drag-btn {
                        position: absolute;
                        width: 7px;
                        height: 7px;
                        background: transparent;
                        right: 0;
                        bottom: 0;
                        transform: translate3d(50%, 50%, 0);
                        cursor: nwse-resize;
                        z-index: 1;
                    }
                    .text {
                        overflow: hidden;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: center;
                        max-width: 100%;
                        max-height: 100%;
                        text-align: center;
                        align-items: center;
                        color: #fff;
                        font-size: 1.2rem;
                        .name,
                        .status {
                            color: #fff;
                            margin: 0 2px;
                        }
                    }
                }
            }
        }
    }
    .right-content {
        .item {
            max-width: 47.8rem;
            .name {
                width: 9.8rem;
            }
        }
    }
}
</style>