/**
 *  自定义控件书写模板
 */
(function(KDApi, $){
    // 构造函数，变量名随意，与最后一句代码的KDApi.register的第二个参数一致即可
    function ShiftRule (model) {
        this._setModel(model)
    }

    // 原型中封装生命周期函数，固定格式
    ShiftRule.prototype = {
        _setModel: function(model) {
            this.model = model
        },
        init: function(props){
            this.model.themeNum = props.themeNum;
            initFunc(this.model, props);
        },
        update: function(props){
		updateDom(this.model, props);
		//if(props.data.event != 'init'){
          //  updateDom(this.model, props);
			//}
        },
        destoryed: function(){
        }
    }

    // Other Code
    var initFunc = function(model, props) {
        KDApi.loadFile(['./css/index.css','./js/index.js'], model, function () {
            updateDom(model, props);
        })
    }

    //渲染页面
    var shiftInfo = function(model, items){ 
        if(items.mode == 'd'){
            items.heads = ['1','2','3','4','5','6','7']   
        }else{
            items.heads = ['周一','周二','周三','周四','周五','周六','周日']   
        }
        KDApi.getTemplateStringByFilePath('./html/index.art', model,{items}).then(function (result) {
            model.dom.innerHTML = result;
            for(let i=0;i<items.cells.length;i++){
                let index = items.cells[i].index;
                classInfo(index,items.cells[i]);
            }
			if(!items.lock){
            initEvent(model);
			}
        })
           
    }
    //渲染班次信息
    var classInfo = function(index,item){
        $("div[index='"+index+"']").html('<div class="custom-able-div">'+
        '<div class="custom-box-color" style="background-color:'+item.color+'"></div>'+
        '<div class="custom-number" title='+item.number+'>'+item.number+'</div>'+
        '<div class="custom-time"  title='+item.starttime+'-'+item.endtime+'>'+item.starttime+'-'+item.endtime+'</div>'+
      '</div>');
    }
    var updateDom = function(model,props){
       var event = '';
       var items = {};
       if(props && props.data){
           event = props.data.event;
           items = props.data.args;
		   items.lock = props.lock;
       }else{
          items.mode = 'w'; //默认为周模式
          items.rows = 0;
          items.startindex = 0;
          items.endindex = 0;
          items.cells = [];
		  items.lock = props.lock;
          shiftInfo(model,items);
          return;
       }
       if('init'==event){
        shiftInfo(model,items);
        removeBorderColor();
       }
        if('set'==event){
                //将班次信息显示在对应的单元格上
                let classitem = props.data.args;
                for(var i=0;i<classitem.length;i++){
                    let index = classitem[i].index;
                    classInfo(index,classitem[i]);
                }
                //removeBorderColor();
            return;
        }
        if('clear'==event){//清空选中的单元格
                var selected = items.selected;
                if(selected && selected.length){
                    for(var i=0;i<selected.length;i++){
                        $("div[index='"+selected[i]+"']").html('');
                        $('#inp'+selected[i]).val('');
                    }
                }
                //removeBorderColor();
            return;
        }
    }
    //数据更新后取消边框颜色
    var removeBorderColor = function(){
        $(".custom-able-td").removeClass("custom-able-border");
    }
    //绑定点击事件
    var initEvent = function (model) {
        //是否按住ctrl键的标识
        var isCtrl = false;
        //按住ctrl键进行多选
        $(window).keydown(function(e){
            if(e.ctrlKey){
                isCtrl = true;
            }
        }).keyup(function(){
            isCtrl = false;
        })      
        $("#custom-body-click", model.dom).click(function (e) {
            var target = e.target;
            if($(target).parents().hasClass('custom-able-td')){
                target = $(target).parents('.custom-able-td');
            }
            if($(target).hasClass('custom-able-td')){
                var index = $(target).attr("index");
                if(isCtrl){
                    var select = [];
                    $(target).toggleClass("custom-able-border");
                    if( $(target).hasClass('custom-able-border')){
                        $(target).css('border','1px solid '+model.themeNum)
                    }else{
                        $(target).css('border','none') 
                    }
                   $("#custom-body-click", model.dom).find(".custom-able-border").each(function(){
                      select.push($(this).attr("index"));
                   })
                   console.log(select);
                   model.invoke("select", JSON.stringify({selected:select}));
                }else{
                    $(".custom-able-td", model.dom).removeClass("custom-able-border");
                    $(".custom-able-td", model.dom).css("border", "none");
                    $(target).addClass("custom-able-border");
                    $(target).css("border", '1px solid '+model.themeNum);
                    model.invoke("select", JSON.stringify({selected:[index]}));
                }
      
        }
            
		});
    }
    // 你只需知道第一个参数是你接下来要新增控件方案时填的方案id，第二个参数是上面声明的构造函数
    KDApi.register('wtcshiftrule', ShiftRule)
})(window.KDApi, jQuery) // 这里的jQuery不是必须要传进去的，可移除，要用到的时候才传，PC端系统默认会有jQuery对象，版本是1.12.4
