if(typeof(MEC_NS) == 'undefined'){
    MEC_NS = {};
}

MEC_NS.Steps = function(type, id, mecJson){
    this.type = type;
    if(!id){
        id = new UUID().toString();
    }
    this.id = id;
    if(!mecJson){
        mecJson = this.getDefaultMecJson();
    }
    this.mecJson = mecJson;
}

/*获取id。 必需的方法*/
MEC_NS.Steps.prototype.getID = function(){
    return this.id;
};

/*获取设计的html， 页面上怎么显示控件完全依赖于此方法。 必需的方法*/
MEC_NS.Steps.prototype.getDesignHtml = function(){
    return getDesignHtml(this);
};

/*获取构建属性编辑窗体的html，添加和单击控件后会调用此方法，由此方法去构建属性编辑窗体。 必需的方法*/
MEC_NS.Steps.prototype.getAttrDlgHtml = function(){
    var theId = this.id;
    var htm = '<div id="MAD'+theId+'" style="height: inherit;">';
        htm += '<div class="title">'+SystemEnv.getHtmlNoteName(4650)+'<div class=\"add-before add-step\">'+SystemEnv.getHtmlNoteName(3518)+'</div></div>';//基本信息
        htm += '<div class="form-group">';
            
            htm += '<table class="table" id="MADSteps_table_'+theId+'" style="margin-top: 0px;margin-bottom:8px;">';  //名称  描述 条件
                htm += '<thead>';
                    htm += '<tr>';
                        htm += '<td style="width:20px;"></td>';
                            htm += '<td style="width:90px;">'+SystemEnv.getHtmlNoteName(4141)+'</td>';//名称
                            htm += '<td style="width:*;">'+SystemEnv.getHtmlNoteName(4325)+'</td>'; //描述
                            htm += '<td style="width:*;">'+SystemEnv.getHtmlNoteName(6040)+'</td>';//条件
                            htm += '<td style="width:24px;"></td>';
                        htm += '</tr>';
                    htm += '</thead>';
                htm += '<tbody></tbody>';
            htm += '</table>';
            htm += '<div class="tip-control tip-steps-control" style="margin-bottom: 8px;">'+SystemEnv.getHtmlNoteName(4159)+'</div>';  //单击右上角的添加按钮以添加内容
            
            htm += '<div class="row">'
                htm += '<span class="col-2 span-control">'+SystemEnv.getHtmlNoteName(4552)+'</span>';  //插件样式：
                htm += '<div class="col-8 pd-7">';
                    htm += '<div class="multi-checkbox">';
                        htm += '<span class="cbboxEntry">';
                            htm += '<input type="checkbox" name="direction" value="vertical"/>';
                            htm += '<span class="cbboxLabel">'+SystemEnv.getHtmlNoteName(5051)+'</span>';  //纵向排列
                        htm += '</span>';
                    
                        htm += '<span class="cbboxEntry">';
                            htm += '<input type="checkbox" name="direction" value="horizontal"/>';
                            htm += '<span class="cbboxLabel">'+SystemEnv.getHtmlNoteName(5052)+'</span>';  //横向排列
                        htm += '</span>';
                    htm += '</div>';
                htm += '</div>';
            htm += '</div>';//end row
            
            htm += '<div class="tip-control tip-condition-control" style="margin-top: 20px;display:block;">';
                htm += SystemEnv.getHtmlNoteName(6046) + '<br>';       //条件格式支持使用数据集和参数，格式支持JavaScript表达式，如：
                htm += '1、'+SystemEnv.getHtmlNoteName(6047)+'{data.status} == 1<br>';                 //1、单个条件用数据集，如：
                htm += '2、'+SystemEnv.getHtmlNoteName(6048)+'{status} == 1<br>';                      //2、单个条件用参数，如：{status} == 1
                htm += '3、'+SystemEnv.getHtmlNoteName(6049)+'{data.status} == 1 && {status} == 1<br>';//3、多个条件同时满足，如：
                htm += '4、'+SystemEnv.getHtmlNoteName(6050)+'{data.status} == 1 || {status} == 1<br>';//4、多个条件满足任意一个，如：
                htm += '5、'+SystemEnv.getHtmlNoteName(6051);                                          //支持直接用true、false来判断条件是否满足
            htm += '</div>';  
            
            htm+='<div class="bottom">';
                htm += '<div class="save-btn">'+SystemEnv.getHtmlNoteName(3451)+'</div>';  //确定
            htm += '</div>';
        htm += '</div>';//end form-group
    htm += '</div>';//end MADSteps
    
    htm += '<div class="MAD_Alert">'+SystemEnv.getHtmlNoteName(4115)+'</div>';  //已生成到布局
    return htm;
};


/*构建属性编辑窗体完成后调用此方法，主要用于一些必须要使用js对页面进行后置操作时，无需要此方法可至空。 不必需的方法，有此方法系统自动调用*/
MEC_NS.Steps.prototype.afterAttrDlgBuild = function(){
    var that = this,
        theId = this.id,
        $attrContainer = this.$attrContainer = $("#MAD_" + theId);
    
    this.bindAttrDlgHtmlEvent();
    
    var steps = this.mecJson["steps"] || [];
    if(steps.length == 0){
        $attrContainer.find(".tip-steps-control").show();
    }else{
        steps.forEach(function(step) {
        	that.addStepToPage(step);
        });
    }
    
    var direction = this.mecJson["direction"];
    var $direction = $attrContainer.find("input[type='checkbox'][name='direction'][value='" + direction + "']");
    if($direction.length > 0){
        $direction.checked();
    }
    
    $("#MAD_"+theId).checkbox({
        onClick: function(){
            that.autoUpdate();
        }
    });
    
    $("#MADSteps_table_"+theId+" > tbody").sortable({
        revert: false,
        axis: "y",
        items: "tr",
        handle: ".bemove",
        update: function(){
            that.autoUpdate();
        }
    });
};

/*获取JSON*/
MEC_NS.Steps.prototype.getMecJson = function(){
    var theId = this.id;
    
    this.mecJson["id"] = theId;
    this.mecJson["mectype"] = this.type;
    
    var $attrContainer = $("#MAD_"+theId);
    if($attrContainer.length > 0){
        var $direction = $attrContainer.find("input[type='checkbox'][name='direction']:checked");
        if($direction.length > 0){
            this.mecJson["direction"] = $direction.val();
        }
        
        var steps = [];
        $("#MADSteps_table_"+theId+" > tbody > tr").each(function(i){
            var $row = $(this);
            steps.push({
                title: MLanguage.getValue($row.find("input[name='title']")),
                desc: MLanguage.getValue($row.find("input[name='desc']")),
                condition: encodeURIComponent($row.find("input[name='condition']").val())
            });
        });
        this.mecJson["steps"] = steps;
    }
    return this.mecJson;
};

MEC_NS.Steps.prototype.getDefaultMecJson = function(){
    return {
        direction: 'vertical',
        steps: [
            {
                title: SystemEnv.getHtmlNoteName(5251), // 开始
                desc: SystemEnv.getHtmlNoteName(6045), // 描述信息
                condition: "true"
            },
            {
                title: SystemEnv.getHtmlNoteName(4900), // 进行中
                desc: SystemEnv.getHtmlNoteName(6045), // 描述信息
                condition: "true"
            },
            {
                title: SystemEnv.getHtmlNoteName(4831), // 完成
                desc: SystemEnv.getHtmlNoteName(6045), // 描述信息
                condition: "false"
            }
        ]
    }
};

$.extend(MEC_NS.Steps.prototype, {
    autoUpdate: function(){
        var mecHandler = MECHandlerPool.getHandler(this.id);
        //避免导入插件到低版本时报错
        mecHandler && mecHandler.autobind && mecHandler.autobind.update();
    },
    bindAttrDlgHtmlEvent: function(){
        var that = this, theId = this.id, $attrContainer = this.$attrContainer;
        
        //添加行事件
        $attrContainer.find(".add-step").on("click", function(){
            that.addStepToPage({
                title: "",
                desc: "",
                condition: ""
            });
            that.autoUpdate();
        });
        
        //删除行事件
        var $tbody = $("#MADSteps_table_"+theId+" > tbody");
        $tbody.on("click", ".del-after2", function(e){
            $(this).closest("tr").remove();
            if($tbody.children("tr").length == 0){
                $(".tip-steps-control", $attrContainer).show();
            }
            that.autoUpdate();
        });
    },
    addStepToPage: function(step){
        var that = this,
            theId = this.id,
            $attrContainer = this.$attrContainer;
        
        $attrContainer.find(".tip-steps-control").hide();
        
        var title = step["title"], desc = step["desc"], condition = decodeURIComponent(step["condition"]);
        
        var html = '<tr>'
                + '<td class="bemove" width="20px"></td>'
                + '<td width="90px">'
                    +'<input type="text" name="title" data-autobind placeholder="'+SystemEnv.getHtmlNoteName(4141)+'" class="form-control" '+MLanguage.ATTR+'/>'
                + '</td>'
                + '<td width="*">'
                    +'<input type="text" name="desc" data-autobind placeholder="'+SystemEnv.getHtmlNoteName(4325)+'" class="form-control" '+MLanguage.ATTR+'/>'
                + '</td>'
                + '<td width="*">'
                    +'<input type="text" name="condition" data-autobind placeholder="'+SystemEnv.getHtmlNoteName(6044)+'" class="form-control"/>'   //如{status}==1
                + '</td>'
                + '<td width="24px">'
                    + '<div class="del-after2"></div>'
                + '</td>'
            + '</tr>';
        var $row = $(html);
        var $tbody = $("#MADSteps_table_"+theId+" > tbody");
        $tbody.append($row);
        
        MLanguage.setValue($row.find("input[name='title']"), title);
        MLanguage.setValue($row.find("input[name='desc']"), desc);
        $row.find("input[name='condition']").val(condition);
        
        $row.MLanguage();
    }
});