<template>
    <div class="canvas-container">
        <div class="canvas-icon-content">左側(cè)選項列表</div>
        <div class="canvas-content">
            <div class="canvas" id="canvas">
                <canvas id="myCanvas" ref="myCanvas"></canvas>
            </div>
            <div class="canvas-options">下方操作按鈕</div>
        </div>
    </div>
</template>
<script>
import canvas from '../utils/canvas'
let myCanvas = {}
export default {
    name: 'index',
    data() {
        return {}
    },
    mounted() {
        myCanvas = canvas.init('myCanvas')
    },
}
</script>

const canvasDraw = {
    init(element) {
        canvas = document.getElementById(element)
        ctx = canvas.getContext('2d')
        const w = 1200, h = 800;
        canvas.width = w * devicePixelRatio;
        canvas.height = h * devicePixelRatio;
        canvas.style.width = w + 'px';
        canvas.style.height = h + 'px';
        return canvas
    },
    // 回傳鼠標抬起事件
    canvasMouseUp: (e) => {},
    // 繪制類型切換
    drawTypeChange: (ele) => {},
    // 修改管線類型（冷熱水）
    changePipelineType: (type) => {},
    // 設(shè)備參數(shù)修改
    canvasModifyInfo: (info) => {},
    // 顯示設(shè)備可拖動的區(qū)域范圍
    showEquipmentIconArea: ()  => {},
    commit: () => {
        // todo
        // 提交事件
    },
    // 清除整個畫布
   clearAll: (info) => {},
    // 數(shù)據(jù)回顯
    echoData: (data) => {}
}
export default canvasDraw

/**
 * 創(chuàng)建繪制元素工廠函數(shù)
 *
 * */
class ElementFactory {
    constructor(startX, startY, endX, endY) {
        this.startX = startX;  // 鼠標 按下 X點
        this.startY = startY;  // 鼠標 按下 Y點
        this.endX = endX;      // 鼠標 抬起 X點
        this.endY = endY;      // 鼠標 抬起 Y點
        this.type = 0;       // 繪制類型：圖形、文字、圖片
        this.pipelineInfo = {};  // 圖形（管線）私有信息
        this.equipmentInfo = {};  // 圖片（設(shè)備）私有信息
        this.textInfo = {};      // 文字（文字）私有信息
    }
    get minX() {
        return Math.min(this.startX, this.endX);
    }
    get maxX() {
        return Math.max(this.startX, this.endX);
    }
    get minY() {
        return Math.min(this.startY, this.endY);
    }
    get maxY() {
        return Math.max(this.startY, this.endY);
    }
    get middleX() {
        return this.endX - (this.endX - this.startX) / 2
    }
    get middleY() {
        return this.endY - (this.endY - this.startY) / 2
    }
    // 判斷點擊的是否存在元素繪制的范圍之內(nèi)
    isInside(x, y) {
        return x >= this.minX && x <= this.maxX && y >= this.minY && y <= this.maxY
    }
    // 繪制管線
    drawPipeline() {}
    // 繪制設(shè)備
    drawEquipment() {}
    // 繪制設(shè)備上方文字
    drawEquipmentText() {}
    // 繪制純文本
    drawText() {}
    // 根據(jù)條件來調(diào)用不同的繪制方法
    drawAllElement() {
        parseInt(this.type) === 0 ? this.drawPipeline() : (parseInt(this.type) === 1 ? this.drawEquipment() : this.drawText())
    }
}

const canvasMousedown = (e) => {
    const rect = canvas.getBoundingClientRect();
    const clickX = e.clientX - rect.left;
    const clickY = e.clientY - rect.top;
    // 查詢所點擊元素是否存在
    const shape = getElement(clickX, clickY);
    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))
        }
    }
};

// 鼠標點擊canvas查看是否點擊到了已經(jīng)繪制的路線，若是，則返回相關(guān)線的對象，若否，返回null
const getElement = (x, y) => {
    for (let i = allElementCollection.length - 1; i >= 0; i--) {
        if (element.isInside(x, y)) return element;
    }
    return null
};