<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<script type="text/javascript">
    function formatNumMoney(obj,index) {
        var val = $(obj).val();
        var reviewAmt=$("#budgetList"+index+"_reviewAmt").val();
        if(reviewAmt==undefined||!isNumber(reviewAmt)||reviewAmt==''){
            reviewAmt=0;
        }
        var setAmt=$("#budgetList"+index+"_setAmt").val();
        if(setAmt==undefined||!isNumber(setAmt)||setAmt==''){
            setAmt=0;
        }
        $("#budgetList"+index+"_floatAmt").val((parseFloat(reviewAmt) + parseFloat(setAmt)).toFixed(2));
        if(!isNumber(val))return;

      /*  var money = parseFloat((val + "").replace(/[^\d\.-]/g, "")).toFixed(2) + "";
        var l = money.split(".")[0].split("").reverse(),
            r = money.split(".")[1];
        t = "";
        for(i = 0; i < l.length; i ++ )
        {
            t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
        }
        $(obj).val(t.split("").reverse().join("") + "." + r);*/
    }
</script>
<form id="subForm"  action="#" onsubmit="return false;" method="post" class="form-horizontal">

            <div class="layui-item nav-btns" style="padding-left:0px;">
                <a class="nav-btn nav-btn-add" onclick="addRowBudget('#budgetTableList',budgetIdx,budgetTpl)" title="新增"><i class="fa fa-plus"></i> 新增</a>
            </div>
            <table id="contentTable" class="table table-bordered table-condensed can-edit">
            <!-- 表格 -->
                <thead>
                    <tr>
                        <th class="hide"></th>
                        <th>编号</th>
                        <th>工程费用名称</th>
                        <th>送审金额</th>
                        <th>审定金额</th>
                        <th width="180px">审增减金额（＋/－）</th>
                        <th>审增减原因</th>
                        <th>节点类型</th>
                        <th>备注</th>
                        <th width="120">操作</th>
                    </tr>
                </thead>
                <tbody id="budgetTableList">
                </tbody>
            </table>


            <script type="text/template" id="budgetTpl">//<!--
        <tr id="budgetList{{idx}}">
            <td class="hide">
                <input id="budgetList{{idx}}_id" subName="id" type="hidden" value="{{row.id}}" class="contentDetail"/>
                <input id="budgetList{{idx}}_delFlag" subName="delFlag" type="hidden" value="0" class="contentDetail"/>
            </td>
            <td>
                <input id="budgetList{{idx}}_budgetNum" subName="budgetNum" value="{{row.budgetNum}}" type="text" class="form-control contentDetail"/>
            </td>
            <td>
                <input id="budgetList{{idx}}_costsubName" subName="costName" value="{{row.costName}}" type="text" class="form-control contentDetail"/>
            </td>
            <td>
                <input id="budgetList{{idx}}_reviewAmt" subName="reviewAmt" type="text" value="{{row.reviewAmt}}" onchange="formatNumMoney(this,{{idx}});" class="form-control number contentDetail money"/>
            </td>
            <td>
                <input id="budgetList{{idx}}_setAmt" subName="setAmt" type="text" value="{{row.setAmt}}" onchange="formatNumMoney(this,{{idx}});" class="form-control number contentDetail  money"/>
            </td>
            <td>
                <input id="budgetList{{idx}}_floatAmt" subName="floatAmt" type="text" value="{{row.floatAmt}}" readonly="true" class="form-control number contentDetail money"/>
            </td>
            <td>
                <input id="budgetList{{idx}}_floatReason" subName="floatReason" type="text" value="{{row.floatReason}}" class="form-control contentDetail"/>
            </td>
            <td>
             <select style="width:180px;" id="budgetList{{idx}}_nodeTypes" subName="nodeTypes" class="form-control contentDetail">
			 <option value =""></option>
             <c:if test="${ not empty list}">
				<c:forEach items="${list}" var="nodeType" varStatus="index">
				<option value="${nodeType.value}">${nodeType.label}</option>
				</c:forEach>
			</c:if>
			</select>
                <%--<input id="budgetList{{idx}}_nodeTypes" subName="nodeTypes" type="text"  value="{{row.nodeTypes}}" class="form-control contentDetail"/>--%>
            </td>
            <td>
                <input id="budgetList{{idx}}_remarks" subName="remarks" type="text"  value="{{row.remarks}}" class="form-control contentDetail"/>
            </td>
            <td class="text-center op-td">
                        <a href="#" onclick="delRow(this, '#budgetList{{idx}}')"   class="op-btn op-btn-delete"><i class="fa fa-trash"></i> 取消</a>
            </td>
        </tr>//-->
            </script>
            <script type="text/javascript">
                var budgetIdx = 0, budgetTpl = $("#budgetTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
                var validateForm2;
                $(function(){
                    validateForm2 = $("#subForm").validate({
                        errorContainer: "#messageBox",
                        errorPlacement: function(error, element) {
                            $("#messageBox").text("输入有误，请先更正。");
                            if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
                                error.appendTo(element.parent().parent());
                            } else {
                                error.insertAfter(element);
                            }
                        }
                    });
                    var data = ${fns:toJson(budgetList)};
                    for (var i=0; i<data.length; i++){
                        addRowBudget('#budgetTableList', budgetIdx, budgetTpl,data[i]);
                        $("#budgetTableList"+i+"_nodeTypes").val(data[i].nodeTypes);
                    }
                    $(":input.money").change();
                });

                function addRowBudget(list, idx, tpl, row){
                    tpl = tpl.replace("budgetList[0].nodeTypes","budgetList["+idx+"].nodeTypes");
                    bornTemplete(list, idx, tpl, row, idx);
                    budgetIdx +=1;
                }

                function bornTemplete(list, idx, tpl, row, idx1){
                    var idx1 = $("#budgetTableList tr").length +1;
                    $(list).append(Mustache.render(tpl, {
                        idx: idx, delBtn: true, row: row,
                        order:idx1 + 1, idx1:idx1
                    }));
                    $(list+idx).find("select").each(function(){
                        $(this).val($(this).attr("data-value"));
                    });
                    $(list+idx).find("input[type='checkbox'], input[type='radio']").each(function(){
                        var ss = $(this).attr("data-value").split(',');
                        for (var i=0; i<ss.length; i++){
                            if($(this).val() == ss[i]){
                                $(this).attr("checked","checked");
                            }
                        }
                    });
                }
                function delRow(obj, prefix,idx){
                    var id = $(prefix+"_id");
                    var delFlag = $(prefix+"_delFlag");
                    if(id.val()==null||id.val()==''){
                        $(obj).parent().parent().remove();
                    }else {
                        delFlag.val("1");
                        $(obj).parent().parent().hide();
                    }
                }

                function genDetailStr(){
                    var costList = $("#budgetTableList tr");
                    var contentStr = "[";
                    for(var j=0; j<costList.length;j++){
                        contentStr+="{"
                        var idstr = $(costList[j]).attr("id");
                        var detail = $("tr[id="+idstr+"] .contentDetail");
                        for(var i=0; i<detail.length;i++){
                            contentStr+='"'
                            contentStr+=$(detail[i]).attr("subName");
                            contentStr+='"'
                            contentStr+=":";
                            contentStr+='"'
                            contentStr+=$(detail[i]).val();
                            contentStr+='"'
                            if(i!=detail.length-1){
                                contentStr+=","
                            }
                        }
                        contentStr+="}"
                        if(j!=costList.length-1){
                            contentStr+=","
                        }
                    }
                    contentStr += "]";
                    return contentStr;
                }
            </script>
</form>