let canvas = {}, ctx = {};
const image = new Image();
// 定義管線默認(rèn)寬度
const PIPELINE_NUMBER = 15;
// 定義圖標(biāo)默認(rèn)縮放比例
const ICON_SCALE_RATIO = 25;
// 所有繪制元素
let allElementCollection = [];
// 初始化管線水類型： 0為冷水 1為熱水
let pipeline_water_type = 0;
// 當(dāng)前繪制設(shè)備的對象
let equipment_select = {};
// 是否顯示設(shè)備繪制的范圍
let equipment_area_show = false
// 初始化繪制類型：0為管線 1為設(shè)備，2為文字框 默認(rèn)為管線
let draw_element_type = 0;
// 管線流動(dòng)速度初始值
let pipeline_offset = 0;
// 定義當(dāng)前選中的已繪制元素
let current_select_element_index = {};

if (shape) {
    moveAllElement(e, clickX, clickY, rect, shape);
    canvas.style.cursor= "move";
} else {
    if (e.buttons === 1) {
        draw_element_type === 0 ? drawRealTimePipeline(e, clickX, clickY, rect) : (draw_element_type === 1 ? drawRealTimeEquipment(e, clickX, clickY, rect) : drawRealTimeText(e, clickX, clickY, rect))
    }
}

// 繪制實(shí)時(shí)管線
const drawRealTimePipeline = (e, clickX, clickY, rect) => {
    const shape = new ElementFactory(clickX, clickY);
    shape.endX = clickX;
    shape.endY = clickY;
    // 繪制管線時(shí)，刪除通過 new 的對象的 textInfo 和 equipmentInfo，這兩個(gè)對于管線來說沒有用處
    delete shape.textInfo;
    delete shape.equipmentInfo;
    let shapeWidth = 0, shapeHeight = 0;
    // 為了方便處理元素刪除，動(dòng)態(tài)添加一個(gè)隨機(jī)的 ID，并且在當(dāng)前位置拿到，方便在繪制線段過短時(shí)來精確刪除
    let current_uid = setuid(shape);
    allElementCollection.push(shape);
    window.onmousemove = (evt) => {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        shapeWidth = (evt.clientX - rect.left) - clickX;
        shapeHeight = (evt.clientY - rect.top) - clickY;
        // 判斷繪制為 豎線 還是 橫線
        let shapeDirection = Math.abs(shapeWidth) >= Math.abs(shapeHeight);
        if (shapeDirection) {
            // 如果是橫線，則 endY 為固定值
            shape.endX = evt.clientX - rect.left;
            shape.endY = clickY + PIPELINE_NUMBER;
        } else {
            // 如果是豎線，則 endX 為固定值
            shape.endX = clickX + PIPELINE_NUMBER;
            shape.endY = evt.clientY - rect.top;
        }
        shape.pipelineInfo.direction = shapeDirection;
        shape.pipelineInfo.waterType = pipeline_water_type;
        draw();
    };
    // 畫線時(shí)，鼠標(biāo)抬起判斷如果線段繪制過短，則不推入 allElementCollection
    window.onmouseup = () => {
        if(parseInt(draw_element_type) === 0 && shape.endX) {
            if (Math.abs(shape.startX - shape.endX) < 45 && Math.abs(shape.startY - shape.endY) < 45) {
                let index = allElementCollection.findIndex(item => item.uid === current_uid);
                allElementCollection.splice(index, 1)
                ctx.clearRect(0, 0, canvas.width, canvas.height)
                draw()
            }
        }
    };
}
const setuid = (shape) => {
    // 生成唯一ID
    let uid = Math.round( Math.random() * 100000000000);
    shape.uid = uid;
    return uid
}

// 繪制實(shí)時(shí)設(shè)備
const drawRealTimeEquipment = (e, clickX, clickY, rect) => {
    const shape = new ElementFactory(clickX, clickY)
    // 繪制設(shè)備時(shí)，刪除通過 new 的對象的 textInfo 和 pipelineInfo，這兩個(gè)對于圖形來說沒有用處
    delete shape.textInfo;
    delete shape.pipelineInfo;
    // 設(shè)備繪制在鼠標(biāo)點(diǎn)擊的那一刻就需要開始創(chuàng)建，
    setEquipment(e);
    setuid(shape);
    allElementCollection.push(shape);
    window.onmousemove = (evt) => setEquipment(evt);
    function setEquipment(evt) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        shape.startX = evt.clientX - rect.left;
        shape.startY = evt.clientY - rect.top;
        // 計(jì)算當(dāng)前繪制的endX endY
        image.src = require(`../assets/images/${equipment_select.iconPath}`);
        let icon_width = Math.ceil(image.width / ICON_SCALE_RATIO),
            icon_height = Math.ceil(image.height / ICON_SCALE_RATIO);
        shape.endX = evt.clientX - rect.left + icon_width;
        shape.endY = evt.clientY - rect.top + icon_height;
        draw();
    }
    draw();
};

// 繪制實(shí)時(shí)文字
const drawRealTimeText = (e, clickX, clickY, rect) => {
    const shape = new ElementFactory(clickX, clickY);
    setuid(shape);
    // 繪制文字時(shí)，刪除通過 new 的對象的 equipmentInfo 和 pipelineInfo，這兩個(gè)對于圖形來說沒有用處
    delete shape.equipmentInfo;
    delete shape.pipelineInfo;
    ctx.font = `normal normal normal ${shape.textInfo.fontSize + 'px' || '16px'} Microsoft YaHei`;
    const defaultText = '默認(rèn)文字，請右鍵修改';
    const measureText = ctx.measureText(defaultText);
    const textW = measureText.width,
        textH = measureText.actualBoundingBoxAscent + measureText.actualBoundingBoxDescent;
    shape.textInfo.text = defaultText;
    allElementCollection.push(shape);
    setText(e)
    window.onmousemove = (evt) => setText(evt)
    function setText(evt) {
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        shape.startX = evt.clientX - rect.left;
        shape.startY = evt.clientY - rect.top;
        shape.endX = evt.clientX - rect.left + textW;
        shape.endY = evt.clientY - rect.top - textH;
        draw();
    }
    draw();
};

// 元素移動(dòng)
const moveAllElement = (e, clickX, clickY, rect, shape) => {
    const { startX, startY, endX, endY } = shape;
    let tipX = 0, tipY = 0;
    // 鼠標(biāo)左鍵：拖動(dòng)位置
    if (e.buttons === 1) {
        window.onmousemove = (evt) => {
            removeEditTip();
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            const distanceX = evt.clientX - rect.left - clickX;
            const distanceY = evt.clientY - rect.top - clickY;
            shape.startX = startX + distanceX;
            shape.startY = startY + distanceY;
            shape.endX = endX + distanceX;
            shape.endY = endY + distanceY;
            draw();
        }
    }
    // 鼠標(biāo)右鍵：執(zhí)行信息編輯
    if (e.buttons === 2) {
        if (shape.type === 0) {
            // 管線
            tipX = e.clientX;
            tipY = e.clientY + 10;
        } else if (shape.type === 1) {
            // 如果點(diǎn)擊的是圖標(biāo)，彈出提示出現(xiàn)在圖標(biāo)下方
            tipX = (shape.endX - shape.startX) / 2 + shape.startX + rect.left
            tipY = shape.endY + rect.top
        } else if (shape.type === 2) {
            // 文字
            tipX = shape.startX + rect.left + ctx.measureText(`${shape.textInfo.text}`).width / 2;
            tipY = shape.startY + rect.top;
        }
        createEditTip(tipX, tipY, shape);
        return false
    }
};

// 創(chuàng)建管線點(diǎn)擊事件彈窗
const createEditTip = (x, y, shape) => {
    let width = shape.type ? 180 : 120, marginLeft = shape.type ? 95 : 65, display = shape.type ? 'inline-block' : 'none'
    removeEditTip()
    let tipText = document.createElement('div')
    tipText.classList.add('tip-text-content')
    tipText.innerHTML = `<div class="tip-text" id="tipText" style="top: ${y + 10}px;left: ${x}px; width: ${width}px; margin-left:-${marginLeft}px; ">
                            <p>
                                <span id="equipmentDelete">刪除</span>
                                <span id="${parseInt(shape.type) === 2 ? 'textModify' : 'equipmentModify'}" style="display: ${display}">編輯</span>
                                <span id="buttonCancel">取消</span>
                            </p>
                         </div>`
    document.body.appendChild(tipText)
    document.getElementById('equipmentDelete').onclick = () => {
        allElementCollection.splice(current_select_element_index, 1)
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        draw()
        removeEditTip()
    };
    // 判斷點(diǎn)擊的是 圖片 的編輯按鈕，還是 文字 的編輯按鈕
    let modifyButton = document.getElementById('equipmentModify') ? 'equipmentModify' : 'textModify';
    document.getElementById(modifyButton).onclick = () => {
        removeEditTip()
    };
    document.getElementById('buttonCancel').onclick = () => {
        removeEditTip()
    };
};
// 移除管線事件彈窗
const removeEditTip = () => {
    const popup = document.querySelector('.tip-text-content')
    if (popup) document.body.removeChild(popup)
}