//*
// 白板标注工具栏
// */

import Emiter from "Emiter";
import Loger from "Loger";
import $ from "jquery";
import xdysdk from "libs/xdysdk";
import ClassDataProxy from "proxy/ClassDataProxy";


let loger = Loger.getLoger('PC-DrawTool');
class DrawTool extends Emiter {
    constructor() {
        super();
        this.isShow = false;
        ClassDataProxy.isDraw = false;
        this.addEvent();
        this.init();
    }

    init() {
        //布局

        $(".foldDrawTool").on("click", this._controlDrawToolVisible.bind(this));

        //UI按钮点击事件
        $(".toolColor").on("mouseleave", this._showColorNone.bind(this));
        // $(".showColor").on("mouseleave", this._showColorNone.bind(this));
        $(".showColor").on("mouseenter", this._showColorBlock.bind(this));

        //形状列表显示
        $(".toolForm").on("mouseleave", this._showFormNone.bind(this));
        $("#showForm").on("mouseenter", this._showFormBlock.bind(this));

        //点击形状按钮
        $('#showForm').on('click',this._showFormBlock.bind(this));
        $('#curveBrush').on('click',this._formHandler.bind(this));
        $('#straightBrush').on('click',this._formHandler.bind(this));
        $('#squareBrush').on('click',this._formHandler.bind(this));
        $('#circleBrush').on('click',this._formHandler.bind(this));
        $('#customBrush').on('click',this._formHandler.bind(this));

        $(".showColor").on("click", this._showColorBlock.bind(this));
        $(".redColor").on("click", this._colorHandler.bind(this));
        $(".blueColor").on("click", this._colorHandler.bind(this));
        $(".purpleColor").on("click", this._colorHandler.bind(this));
        $(".yellowColor").on("click", this._colorHandler.bind(this));
        $(".pencil").on("click", this._pencilHandler.bind(this));
        $(".rescind").on("click", this._rescindHandler.bind(this));//撤销
        $(".clearContent").on("click", this._clearHandler.bind(this));//删除


        //点击其他区域后颜色板隐藏
        // $(".middle").on("click",this._hideColorTool.bind(this));
        $(".left").on("click",this._hideColorTool.bind(this));
        $(".header").on("click",this._hideColorTool.bind(this));
        $(".right").on("click",this._hideColorTool.bind(this));
        $(".docBox").on("click",this._hideColorTool.bind(this));


        //老是断控制学生端画笔
        $('#controlBrush').on('click',this._controlBrushHandler.bind(this));


    }

    addEvent() {
        xdysdk.on("class_join_success", this._classJoinSuccessHandler.bind(this));
        xdysdk.on("class_insert_roster", this._insertRosterHandler.bind(this));  //人员进入
        xdysdk.on("class_update_status", this._classUpdateHandler.bind(this));//会议状态更新
    }

    _classJoinSuccessHandler(_data) {
        if (_data.userRole == ClassDataProxy.USER_NOTMAL) {
            // $(".foldDrawTool").hide();
            // $(".drawTool").hide();
            this.isShow = true;
        } else {
            $(".foldDrawTool").show();
            $(".drawTool").show();
            this.isShow = true;
        }
    }
    _insertRosterHandler(_data){
        if(_data){
            if(ClassDataProxy.userRole == ClassDataProxy.USER_NOTMAL){
                if(!ClassDataProxy.isEnableDraw){
                    //隐藏学生端画笔
                    this._hideBrushSwitch();
                }
            }
        }
    }
    _classUpdateHandler(_data){
        if(_data){
            //控制学生端画笔是否可以绘画
            ClassDataProxy.isEnableDraw = _data.isEnableDraw || false;
            this._checkBrushSwitch();
        }
    }
    _checkBrushSwitch(){
        this._brushSwitchHandler();
    }
    //老是断控制学生端画笔
    _controlBrushHandler(evt){
        if(ClassDataProxy.isEnableDraw == true){
            ClassDataProxy.isEnableDraw = false;
            xdysdk.api("changeDrawStatus",{"isEnableDraw":false});
        }else{
            ClassDataProxy.isEnableDraw = true;
            xdysdk.api("changeDrawStatus",{"isEnableDraw":true})
        }
    }
    //学生端画笔开关
    _brushSwitchHandler(){
        if(ClassDataProxy.isEnableDraw == true){
            if(ClassDataProxy.userRole == ClassDataProxy.USER_NOTMAL){
                //显示学生端画笔
                this._showBrushSwitch();
            }
            //更改老师端状态
            if(ClassDataProxy.userRole == ClassDataProxy.USER_HOST){
                $('.controlBrush').addClass('controlBrushClick');
            }
        }else{
            //隐藏学生端画笔
            if(ClassDataProxy.userRole == ClassDataProxy.USER_NOTMAL){
                this._hideBrushSwitch();
                //学生端是否可以画图
                ClassDataProxy.isDraw = false;
            }
            //更改老师端状态
            if(ClassDataProxy.userRole == ClassDataProxy.USER_HOST){
                $('.controlBrush').removeClass('controlBrushClick');
            }
        }
    }
    //显示学生端画笔
    _showBrushSwitch(){
        $('.foldDrawToolOut').show();
        $('.foldDrawTool').show();
        $(".drawTool").show();
        $(".drawTool").css("height", "160px");
    }
    //隐藏学生端画笔
    _hideBrushSwitch(){
        $('.foldDrawToolOut').hide();
        $('.foldDrawTool').hide();
        $(".drawTool").hide();
    }
    _pencilHandler() {
        if(ClassDataProxy.isLaser==true){
            ClassDataProxy.isLaser=false;
            let paramInfo = {
                "pointGroup": [],//有多个坐标点组成
                "duration":0  //多长时间发一次数据
            };
            xdysdk.api("sendInsertCursor", paramInfo);
            $(".canvasContent").css("cursor", "default");
        }
        $(".laserBoard").css("z-index","-1");
        $(".toolColor").css("display", "none");
        ClassDataProxy.isDraw = !ClassDataProxy.isDraw;
        this._emit(DrawTool.DRAW_TOOL_CHANGE, {"action": "pencil", "isDraw": ClassDataProxy.isDraw});
        if (ClassDataProxy.isDraw) {
            $(".canvasContent").css({"cursor":"url(images/tool/penciling.png),crosshair"});

        } else {
            $(".canvasContent").css("cursor", "default");
        }
    }

    _rescindHandler() {
        $(".toolColor").css("display", "none");
        this._emit(DrawTool.DRAW_TOOL_CHANGE, {"action": "rescind"});
    }

    _clearHandler() {
        $(".toolColor").css("display", "none");
        this._emit(DrawTool.DRAW_TOOL_CHANGE, {"action": "clear"});
    }

    _colorHandler(evt) {
        $(".toolColor").css("display","none");
        loger.log(evt.target.id, evt.target.title);
        let color = evt.target.title;
        this._emit(DrawTool.DRAW_TOOL_CHANGE, {"action": "changeColor", "color": color});
        let showColor = document.getElementById('showColor');
        switch (evt.target.id) {
            case   "redColor":
                showColor.style.background = 'url("images/colorRed.png") no-repeat';
                $(".showColor").unbind("click");
                this._showColorNone();
                this._showFormNone();
                break;
            case   "blueColor":
                showColor.style.background = 'url("images/colorBlue.png") no-repeat';
                $(".showColor").unbind("click");
                this._showColorNone();
                this._showFormNone();
                break;
            case    "purpleColor":
                showColor.style.background = 'url("images/colorPurple.png") no-repeat';
                $(".showColor").unbind("click");
                this._showColorNone();
                this._showFormNone();
                break;
            case   "yellowColor":
                showColor.style.background = 'url("images/colorYellow.png") no-repeat';
                $(".showColor").unbind("click");
                this._showColorNone();
                this._showFormNone();
                break;
            default:
                break
        }
    }

    _formHandler(){
        $(".toolForm").css("display","none");
        $("#showForm").unbind("click");
        loger.log('点击隐藏形状工具列表');
    }
    _showColorBlock() {
        $(".toolColor").css("display", "block");
        $(".toolColor").css("z-index", 0);
        $(".toolForm").css("display", "none");
        $(".toolForm").css("z-index", 0);
    }

    _showColorNone() {
        $(".toolColor").css("display", "none");
        $(".toolColor").css("z-index", 0);
    }
    _showFormBlock(){
        $(".toolForm").css("display", "block");
        $(".toolForm").css("z-index", 2);
        $(".toolColor").css("display", "none");
        $(".toolColor").css("z-index", 0);
    }
    _showFormNone(){
        $(".toolForm").css("display", "none");
        $(".toolForm").css("z-index", 0);
    }

    _controlDrawToolVisible() {
        // if(ClassDataProxy.isEnableDraw == true){
            if (this.isShow) {
                $(".drawTool").hide();
                $(".arrowTop").hide();
                $(".arrowBottom").show();
            } else {
                $(".drawTool").show();
                $(".arrowTop").show();
                $(".arrowBottom").hide();
            }
            this.isShow = !this.isShow;
        // }
    }
    _hideColorTool(){
        $(".toolColor").css("display", "none");
        $(".toolForm").css("display", "none");
    }
}
DrawTool.prototype.DRAW_TOOL_CHANGE = DrawTool.DRAW_TOOL_CHANGE = "draw_tool_change";
export default DrawTool;