//*
// 标注模块
// */

import Loger from "../Loger";
import Ape from "./Ape";
import xdysdk from "libs/xdysdk";
import DrawTool from "./DrawTool";
import LaserPen from "./LaserPen";
import $ from "jquery";
import ClassDataProxy from "proxy/ClassDataProxy";

let loger = Loger.getLoger('PC-WhiteBoardApe');
class WhiteBoardApe extends Ape {
    constructor() {
        super();
        this.color = "#b8242a";
        ClassDataProxy.isDraw = false;//是否可以绘制标注
        this.drawTool;
        this.thickness = 2;
        this.isMouseDown = false;
        this.canvasContent;
        this.context;
        this.canvasWidth = 0;
        this.canvasHeight = 0;
        this.scroolTop = 0;
        this.scroolLeft = 0;
        this.canvasTop = 0;
        this.canvasLeft = 0;
        this.pointGrou = [];
        this.prevX=0;
        this.prevY=0;
        this.receiveData = [];//储存接收到的数据，用于canvas重绘时使用
        this.addEvent();
        this.init();
    }

    init() {
        this.drawTool = new DrawTool();
        this.drawTool.on(DrawTool.DRAW_TOOL_CHANGE, this._drawToolChnageHandler.bind(this));

        //布局
        //loger.log("docBox->", $(".docBox").width(), $(".docBox").height());
        this.canvasContent = $(".canvasContent");

        this.canvasWidth = $(".docBox")[0].clientWidth;
        this.canvasHeight = $(".docBox")[0].clientHeight;
        this.canvasContent[0].width = this.canvasWidth;
        this.canvasContent[0].height = this.canvasHeight;

        this.context = this.canvasContent[0].getContext("2d");
        //loger.log(" this.canvasContent-->", this.canvasContent.width(), this.canvasContent.height());

        //UI按钮点击事件
        this.canvasContent.on('mousedown', this._mouseDownHandler.bind(this));
        this.canvasContent.on('mousemove', this._mouseMoveHandler.bind(this));
        document.addEventListener('mouseup',this._mouseUpHandler.bind(this),false);
        document.addEventListener('mouseout',this._mouseOutHandler.bind(this),false)
    }

    addEvent() {
        xdysdk.on("whiteboard_annotation_update", this._whiteboradUpdateHanlder.bind(this));
        xdysdk.on("class_join_success", this._classJoinSuccessHandler.bind(this));
    }

    setCanvasSize(_data) {
        //loger.log("setCanvasSize", _data);
        if (this.canvasContent) {
            //文档的尺寸已经更改，需要更新canvas大小
            this.canvasWidth = _data.width;
            this.canvasHeight = _data.height;
            this.canvasContent[0].width = this.canvasWidth;
            this.canvasContent[0].height = this.canvasHeight;

            this._clearCanvas();
            this._startDraw(this.receiveData);
            //loger.log("setCanvasSize->success->需要重绘的数据->", this.receiveData.length);
        }
    }

    clear() {
        //loger.log("clear");
        this.pointGrou = [];
        this.receiveData = [];
        this._clearCanvas();
    }

    _whiteboradUpdateHanlder(_data) {
        if(ClassDataProxy.userRole==ClassDataProxy.USER_NOTMAL){
            $(".laserBoard").css("z-index","-1");
        }
        loger.log("更新的白板标注->是否清除:", _data.isFresh,"数量->",_data.annotaionItems.length);
        let annotaionItems = _data.annotaionItems;
        //isFresh是白板的绘制模式，true-先清除canvas再绘制；false->在canvas上直接添加绘制
        if (_data.isFresh) {
            //清除重绘制数据
            this.receiveData = [];
            this._clearCanvas();
            //本地储存一份数据
            if (annotaionItems && annotaionItems.length > 0) {
                for (let i = 0; i < annotaionItems.length; i++) {
                    this.receiveData.push(annotaionItems[i]);
                }
            }
            //绘制全部数据
            this._startDraw(annotaionItems);
        }else {
            //本地储存一份数据
            let tempAnnos=[];
            let nodeId=ClassDataProxy.nodeId;
            if (annotaionItems && annotaionItems.length > 0) {
                for (let k = 0; k < annotaionItems.length; k++) {
                    this.receiveData.push(annotaionItems[k]);
                    if(annotaionItems[k].initiator!=nodeId){
                        tempAnnos.push(annotaionItems[k]);
                    }
                }
            }
            //绘制不是自己刚刚添加的数据
            this._startDraw(tempAnnos);
        }
    }
    _classJoinSuccessHandler(_data){
        if (_data.userRole == ClassDataProxy.USER_NOTMAL || ClassDataProxy.isRecordPlayBack) {
            this.color = '#0071bc';
            $('#showColor').css('background','url("images/colorBlue.png") no-repeat');
        }
    }
    //绘制数据到canvas
    _startDraw(_data) {
        if (_data && _data.length > 0) {
            for (let i = 0; i < _data.length; i++) {
                let item = _data[i];
                if (item && item.parentId == ClassDataProxy.currentDocId && item.curPageNo == ClassDataProxy.currentPageNum) {
                    this._drawDataToCanvas(item);
                }
            }
        }
    }


    //清除canvas
    _clearCanvas() {
        if (this.context) {
            this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
        }
    }

    //绘制数据到canvas
    _drawDataToCanvas(_data) {
        if (_data) {
            switch (_data.type) {
                case 0:
                    this._drawLine(_data);
                    break;
                default:
                    loger.log("_drawDataToCanvas->未知类型不处理", _data.type);
                    break;
            }
        }
    }

    //绘制线条
    _drawLine(_data) {
        //loger.log("_drawLine---->");
        let pointGroup = _data.pointGroup;
        if (pointGroup && pointGroup.length > 1) {
            this.context.beginPath();
            this.context.lineWidth = parseInt(_data.thickness) || 2;
            this.context.strokeStyle = _data.color || "#b8242a";
            //起点
            let point = this.xyFromPer(pointGroup[0].w, pointGroup[0].h);
            let len = pointGroup.length;
            this.context.moveTo(point.x, point.y);
            let item = null;
            for (let i = 1; i < len; i++) {
                item = pointGroup[i];
                point = this.xyFromPer(item.w, item.h);
                this.context.lineTo(point.x, point.y);
            }
            this.context.stroke();
        }
    }

    _drawToolChnageHandler(_data) {
        loger.log("_drawToolChnageHandler", _data.color);
        switch (_data.action) {
            case "pencil":
                //画笔切换
                ClassDataProxy.isDraw = _data.isDraw;
                break;
            case "changeColor":
                //颜色切换
                this.color = _data.color;
                break;
            case "rescind":
                //撤销
                xdysdk.api("sendGotoPrev");
                break;
            case "clear":
                //清除当前页的标注
                xdysdk.api("sendDeleteCurPageAnnotation");
                break;
            default :
                break
        }
    }

    _mouseDownHandler(evt) {
        this.pointGrou = [];
        if (ClassDataProxy.isDraw) {
            this.isMouseDown = true;
            this.scroolTop = $(window).scrollTop();
            this.scroolLeft = $(window).scrollLeft();
            this.canvasTop = this.canvasContent.offset().top - this.scroolTop;
            this.canvasLeft = this.canvasContent.offset().left - this.scroolLeft;
            this.prevX=evt.clientX - this.canvasLeft;;
            this.prevY=evt.clientY - this.canvasTop;
            this.pointGrou.push(this.xyToPer(Math.round( this.prevX), Math.round( this.prevY)));
        }
    }

    _mouseMoveHandler(evt) {
        if (ClassDataProxy.isDraw && this.isMouseDown) {
            let toX = evt.clientX - this.canvasLeft;
            let toY = evt.clientY - this.canvasTop;
            if(this.prevX==toX&&this.prevY==toY){
                return;
            }
            this.context.beginPath();
            this.context.moveTo(this.prevX,this.prevY);
            this.context.lineTo(toX,toY);
            this.context.strokeStyle= this.color;
            this.context.lineWidth=this.thickness;
            this.context.lineCap='round';
            this.context.lineJoin='round';
            this.context.stroke();
            this.prevX=toX;
            this.prevY=toY;
            this.pointGrou.push(this.xyToPer(Math.round(toX), Math.round(toY)));
        }
    }

    _mouseUpHandler(evt) {
        if (ClassDataProxy.isDraw && this.isMouseDown) {
            loger.log("_mouseUpHandler");
            this.isMouseDown = false;
            this._sendDrawLine();
        }
        this.pointGrou = [];
    }

    _mouseOutHandler(evt) {
        if (ClassDataProxy.isDraw && this.isMouseDown) {
            loger.log("_mouseOutHandler");
            this.isMouseDown = false;
            this._sendDrawLine();
        }
        this.pointGrou = [];
    }

    //发送新添加的标注数据
    _sendDrawLine() {
        if (this.pointGrou.length > 1) {
            let paramInfo = {
                "type": 0,
                //"curPage": ClassDataProxy.currentPageNum,//页码是第1页
                //"parentId": ClassDataProxy.currentDocId,//父级(文档)的itemIdx标识，如果当前没有文档，设置为0即可
                "pointGroup": this.pointGrou,//有多个坐标点组成
                "color": this.color,
                "thickness":this.thickness //线条粗细放大一倍(这个问题之后要解决，不能放大)
            };
            console.log("发送标注数据->",paramInfo);
            xdysdk.api("sendInsertAnnotaion", paramInfo);
            this.pointGrou = [];
        }
    }

    //把X Y坐标转换为相对canvas宽度的百分比
    xyToPer(x, y) {
        let recordPencilObject = {};
        recordPencilObject.w = parseInt(x / this.canvasWidth * 10000) / 100;
        recordPencilObject.h = parseInt(y / this.canvasWidth * 10000) / 100;
        //loger.log("xyToPer",recordPencilObject);
        return recordPencilObject;
    }

    xyFromPer(w, h) {
        let xyObj = {};
        xyObj.x = Math.round((w * this.canvasWidth) / 100) ;//加0.5偏移 平滑
        xyObj.y = Math.round((h * this.canvasWidth ) / 100);
        //loger.log("xyFromPer",xyObj);
        return xyObj;
    }
}
export default WhiteBoardApe;