import tools from './tools'

import Ball from './canvas/items/ball'
import Line from './canvas/items/line'
import Point from './canvas/items/point'
// var graphy = {};
// var ctx;
// import graphyClick from './graphyEvent'
class graphy {

    /**
     * 创建画布方法，初始化
     * @param id 为canvas元素的id
     */
    zoom //缩放层级
    cStep = -1 //撤回计数
    cPushArray = new Array() //存储canvas的base64的图片
    mousedown = new Object() //mousedown存储的xy
    mouse //鼠标位置
    dx = 0
    dy = 0
    beginPath
    data
    constructor(id, json) {
        this.data = json
        this.beginPath = tools.getXY(json)
        this.canvas = document.getElementById(id);
        if (!this.canvas.getContext) this.canvas.text = '当前浏览器不支持canvas';
        this.ctx = this.canvas.getContext("2d");
        this.executionArray = [];
        this.mouse = tools.getMouse(this.canvas)
    }

    //创建point
    createPoint() {
        let dom = document.getElementById("canvasView")
        let point = new Point(10, 10)
        point.addPoint(dom)
    }


    //添加事件
    addListener(type, listener) {
        this.canvas.addEventListener(type, listener, true)
    }

    //删除事件
    removeListener(type, listener) {
        this.canvas.removeEventListener(type, listener, true)
    }

    //缩放
    sacle() {

    }

    /**
     * 画线条
     * @param data
     * {
     *   beginPath:{//必填
     *      x:,
     *      y:,
     *    },
     *    endPath:{//必填
     *      x: ,
     *      y: ,
     *    },
     *    color: "",选填，颜色，默认#000;
     *    width: "",//选填，宽度，默认1px;
     *    isMove: "",选填，是否可移动，默认false；
     * }
     */
    line(data) {
        // this.ctx.translate(this.beginPath.x, this.beginPath.y)\
        var line = new Line(data[0].X, data[0].Y, data[1].X, data[1].Y)
            // var line = new Line(20, 20, 80, 80)

        // this.ctx.translate(this.beginPath.x, this.beginPath.y)

        line.stroke(this.ctx)
        line.fill(this.ctx)
    }

    //创建小球
    ball() {
        this.cre = new Ball(50, 50, 15);
        this.cre.fill(this.ctx);
    }

    ballDraw() {
        this.addListener("mousedown", this.ballDown)
    }

    ballDown = (e) => {
        if (this.cre.checkMouse(this.mouse)) {
            this.dx = this.mouse.x - this.cre.x
            this.dy = this.mouse.y - this.cre.y
            this.addListener("mousemove", this.ballMove)
            this.addListener("mouseup", this.ballUp)
        }
    }

    ballMove = (e) => {
        this.cre.x = this.mouse.x - this.dx
        this.cre.y = this.mouse.y - this.dy
            // this.cre.fill(this.ctx);
            //加入边界限制
            //当小球碰到边界
            // console.log(this.cre.y, this.cre.x, this.cre.radius, this.canvas.height, this.canvas.width)
        if (this.cre.x < this.cre.radius) { //左边界
            this.cre.x = this.cre.radius;
        } else if (this.cre.x > this.canvas.width - this.cre.radius) {
            this.cre.x = this.canvas.width - this.cre.radius
        }

        //碰到上边界
        if (this.cre.y < this.cre.radius) {
            this.cre.y = this.cre.radius
        } else if (this.cre.y > this.canvas.height - this.cre.radius) {
            this.cre.y = this.canvas.height - this.cre.radius
        }

        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

        this.cre.fill(this.ctx)
    }

    ballUp = (e) => {
        this.removeListener('mousemove', this.ballMove)
        this.removeListener('mouseup', this.ballUp)
    }

    //添加画线的事件
    drawLine() {
        this.addListener("mousedown", this.lineMouseDown)
        this.addListener("mousemove", this.lineMouseMove)
        this.addListener("mouseup", this.lineMouseUp)
        this.canvas.style.cursor = "crosshair"
    }

    //删除事件
    stopdrawLine() {
        this.removeListener("mousedown", this.lineMouseDown)
        this.removeListener("mousemove", this.lineMouseMove)
        this.removeListener("mouseup", this.lineMouseUp)
        this.canvas.style.cursor = "auto"
    }

    //线条添加事件当鼠标按下
    lineMouseDown = (e) => {
        this.cPush()
        var ele = {}
        for (var i in e) {
            ele[i] = e[i]
        }
        ele.clientX = 222
        var loc = this.mouse;
        this.saveDrawingSurface();
        this.mousedown.x = loc.x;
        this.mousedown.y = loc.y;
        this.dragging = true;
    }

    //线条添加移动事件
    lineMouseMove = (e) => {
        //判断当前是否用户在拖动
        if (this.dragging) {
            e.preventDefault();
            var loc = this.mouse;
            this.restoreDrawingSurface();
            this.drawGuidewires(loc.x, loc.y);
            this.updateRubberband(loc);
        }
    }

    //拖动时的辅助线
    drawGuidewires(x, y) {
        this.ctx.save();
        this.ctx.strokeStyle = "rgba(0,0,230, 0.4)";
        this.ctx.lineWidth = 0.5;
        this.drawHorizontLine(y);
        this.drawVerticalLine(x);
        this.ctx.restore();
    }

    //保存图片
    saveDrawingSurface() {
        this.drawingSurfacsImageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
    }

    //恢复canvas的数据，主要用来显示最新的线段，擦除原来的线段
    restoreDrawingSurface = () => {
        this.ctx.putImageData(this.drawingSurfacsImageData,
            0, 0, 0, 0, this.canvas.width, this.canvas.height
        );
    }

    // 添加标记
    addPoint() {
        let img = new Image()
        img.src = "../assets/images/point.png"
        document.getElementById('text').appendChild(img)
    }


    //鼠标弹起事件
    lineMouseUp = (e) => {
        var loc = this.mouse;
        this.restoreDrawingSurface();
        this.updateRubberband(loc);
        //鼠标抬起，拖动标记设为否
        this.dragging = false;
    }

    //更新
    updateRubberband(loc) {
        this.drawRubberbandShape(loc)
    }

    //画最新的线条
    drawRubberbandShape(loc) {
        this.ctx.beginPath();
        this.ctx.moveTo(this.mousedown.x, this.mousedown.y);
        this.ctx.lineTo(loc.x, loc.y);
        this.ctx.stroke();
    }

    //画辅助横线，在y坐标上
    drawHorizontLine(y) {
        this.ctx.beginPath();
        this.ctx.moveTo(0, y + 0.5);
        this.ctx.lineTo(this.canvas.width, y + 0.5);
        this.ctx.stroke();
    }


    //画辅助竖线
    drawVerticalLine(x) {
        this.ctx.beginPath();
        this.ctx.moveTo(x + 0.5, 0);
        this.ctx.lineTo(x + 0.5, this.canvas.height);
        this.ctx.stroke();
    }


    /**
     * 画笔操作时保存canvas的base64图片
     */
    cPush() {
        this.cStep++;
        if (this.cStep < this.cPushArray.length) { this.cPushArray.length = this.cStep; }
        this.cPushArray.push(this.canvas.toDataURL());
    }

    // 清空画布
    clearCanvas() {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }

    //撤回
    undo() {
        if (this.cStep > 0) {
            let _this = this
            this.cStep--;
            let canvasPic = new Image();
            canvasPic.src = this.cPushArray[this.cStep];
            canvasPic.onload = function() {
                _this.clearCanvas()
                _this.ctx.drawImage(canvasPic, 0, 0);
            }
        }
    }

    //取消撤回
    cRedo() {
        if (this.cStep < this.cPushArray.length - 1) {
            cStep++;
            var canvasPic = new Image();
            canvasPic.src = this.cPushArray[this.cStep];
            canvasPic.onload = () => { this.ctx.drawImage(canvasPic, 0, 0); }
        }
    }
}

export default graphy