<template>
    <div style="height: 100%;text-align: center;width: 100%;">
        <img id="floorplanImg" style="width: 100%;height: 100%;display: none;" src="@/assets/image/floorplan.png" />
        <img id="redriangle" style="display: none;" src="@/assets/redpin.svg" />
        <img id="wihiteriangle" style="display: none;" src="@/assets/pin.svg" />
        <img id="greenriangle" style="display: none;" src="@/assets/greenpin.svg" />
        <canvas id="canvasBOX" width="1800" height="800" style="display: block;background: #D6F8FF;">
            当前浏览器不支持canvas
        </canvas>
    </div>
</template>

<script>
export default {
    data () {
        return {

        }
    },
    mounted(){
        this.$nextTick(() => {
            var redpin=document.getElementById("redriangle");    
            var pin=document.getElementById("wihiteriangle");
            var greenpin=document.getElementById("greenriangle");
        
        
            var canvas = document.getElementById("canvasBOX"),
                graphs = [],
                graphAttr = [
                    {id:1, x:60 , y :60 , w:35 , h:35 , canvasObj:canvas,  pin: pin},
                    {id:2, x:350 , y :120 , w:35 , h:35 , canvasObj:canvas ,  pin: redpin},
                    {id:3, x:200 , y :130 , w:35 , h:35 , canvasObj:canvas ,  pin: greenpin}
                ],
                tempGraphArr = [];

                // sessionStorage.classPlan = [
                //     {id:1, x:60 , y :60 , w:35 , h:35 , canvasObj:canvas,  pin: pin},
                //     {id:2, x:350 , y :120 , w:35 , h:35 , canvasObj:canvas ,  pin: redpin},
                //     {id:3, x:200 , y :130 , w:35 , h:35 , canvasObj:canvas ,  pin: greenpin}
                // ];
                // graphAttr = sessionStorage.classPlan;

            var img=document.getElementById("floorplanImg");
            var ctx=canvas.getContext("2d");
            ctx.drawImage(img,0,0);
            var dragGraph = function(x , y , w , h , canvas, pin, id){
                this.id = id;
                this.x = x;
                this.y = y;
                this.w = w;
                this.h = h;
                this.pin = pin;            
                this.canvas = canvas;
                this.context = canvas.getContext("2d");
                this.canvasPos = canvas.getBoundingClientRect();
            }

            dragGraph.prototype = {
                paint : function(){                
                    this.context.drawImage(this.pin, this.x ,this.y , this.w, this.h);                
                },
                isMouseInGraph : function(mouse){
                    this.context.beginPath();
                    this.shapeDraw();
                    return  this.context.isPointInPath(mouse.x , mouse.y);
                },
                shapeDraw : function(){
                    this.context.rect( this.x , this.y , this.w , this.h);
                },
                erase: function() {
                    this.context.clearRect(0,0,this.canvas.width,this.canvas.height);
                }
            }

            canvas.addEventListener( "mousedown" , function(e){
                var mouse = {
                    x : e.clientX - canvas.getBoundingClientRect().left,
                    y : e.clientY - canvas.getBoundingClientRect().top
                };
                graphs.forEach( function (shape, index, array) {
                    var offset = {
                        x : mouse.x - shape.x,
                        y : mouse.y - shape.y
                    };
                    if (shape.isMouseInGraph(mouse)) {
                        tempGraphArr.push(shape);
                        canvas.addEventListener("mousemove" , function(e){
                            mouse = {
                                x : e.clientX - canvas.getBoundingClientRect().left,
                                y : e.clientY - canvas.getBoundingClientRect().top
                            };

                            if(shape === tempGraphArr[tempGraphArr.length-1]){
                                shape.x = mouse.x - offset.x;
                                shape.y = mouse.y - offset.y;

                                shape.erase();
                                drawGraph(shape.id);
                            }
                        } , false);
                        canvas.addEventListener("mouseup" , function(){
                            let xPecent = shape.x / this.width                        
                            console.log(xPecent.toFixed(3))
                            tempGraphArr = [];
                        } , false);
                    }
                });
                e.preventDefault();
            } , false);

            for(var i = 0 ; i < graphAttr.length ; i++){
                var graph = new dragGraph( graphAttr[i].x , graphAttr[i].y , graphAttr[i].w , graphAttr[i].h ,
                                        graphAttr[i].canvasObj, graphAttr[i].pin, graphAttr[i].id);
                graphs.push(graph);
            }

            var test;
            function drawGraph(id){
                ctx.drawImage(img,0,0);
                for(var i = 0 ; i < graphAttr.length ; i++){
                    if(!isNaN(id) && graphs[i].id == id){
                        test = graphs[i];
                    } else {
                        graphs[i].paint();
                    }
                }

                if(id){
                    test.paint();
                }
            }
            drawGraph();
        })
        // var c=document.getElementById("canvasBOX");
        // var ctx=c.getContext("2d");
        // var img=document.getElementById("floorplanImg");
        // var pin=document.getElementById("wihiteriangle");
        // var greenpin=document.getElementById("greenriangle");
        // var redpin=document.getElementById("redriangle");    
        // c.width = img.width;
        // c.height = img.height
        // var pinW = 35;
        // var pinH = 35;
        // ctx.clearRect(0, 0, img.width, img.height);
        // ctx.drawImage(img,0,0);
        // ctx.drawImage(redpin, (c.width*0.595) ,(c.height * 0.67) , pinW, pinH);
        // ctx.drawImage(greenpin, (c.width*0.45) ,(c.height * 0.23) , pinW, pinH);
        // ctx.drawImage(greenpin, (c.width*0.455) ,(c.height * 0.79) , pinW, pinH);
        // ctx.drawImage(greenpin, (c.width*0.595) ,(c.height * 0.79) , pinW, pinH);
        // ctx.drawImage(greenpin, (c.width*0.245) ,(c.height * 0.79) , pinW, pinH);
        // ctx.drawImage(pin, (c.width*0.52) ,(c.height * 0.23) , pinW, pinH);
        // ctx.drawImage(pin, (c.width*0.59) ,(c.height * 0.23) , pinW, pinH);
        // ctx.drawImage(pin, (c.width*0.595) ,(c.height * 0.73) , pinW, pinH);
        // ctx.drawImage(pin, (c.width*0.525) ,(c.height * 0.73) , pinW, pinH);
        // ctx.drawImage(pin, (c.width*0.525) ,(c.height * 0.79) , pinW, pinH);
        // ctx.drawImage(pin, (c.width*0.455) ,(c.height * 0.73) , pinW, pinH);
    },
    created(){
    },
    watch: {
      
    },
    methods:{
    }
}

</script>

<style>
</style>
