<%@ 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 buildindCost=$("#investmentCostList"+index+"_buildindCost").val();
        var equipmentCost=$("#investmentCostList"+index+"_equipmentCost").val();
        var installationCost=$("#investmentCostList"+index+"_installationCost").val();
        var otherExpenses=$("#investmentCostList"+index+"_otherExpenses").val();
        var count=$("#investmentCostList"+index+"_count").val();
        if(buildindCost==undefined||!isNumber(buildindCost)||buildindCost==''){
            buildindCost=0;
        }
        if(equipmentCost==undefined||!isNumber(equipmentCost)||equipmentCost==''){
            equipmentCost=0;
        }
        if(installationCost==undefined||!isNumber(installationCost)||installationCost==''){
            installationCost=0;
        }
        if(otherExpenses==undefined||!isNumber(otherExpenses)||otherExpenses==''){
            otherExpenses=0;
        }
        var total=(parseFloat(buildindCost) + parseFloat(equipmentCost)+parseFloat(installationCost) + parseFloat(otherExpenses)).toFixed(2);
        if(count!=undefined&&isNumber(count)&&count!=''&&count!=0){
            $("#investmentCostList"+index+"_target").val((total/count).toFixed(2));
        }
        if(count==0){
            $("#investmentCostList"+index+"_target").val(0);
		}
        $("#investmentCostList"+index+"_totalCost").val(total);

        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="addRowCost('#investmentCostList',investmentCostIdx,investmentCostTpl)" title="新增"><i class="fa fa-plus"></i> 新增</a>
        <table:importExcelCost url="${ctx}/workcontentinvestmentcost/workContentInvestmentCost/import"></table:importExcelCost><!-- 导入按钮 -->
    </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>安装工程费</th>
				<th>其他费用</th>
				<th>合计（万元）</th>
				<th>数量</th>
				<th>单位</th>
				<th>指标</th>
				<th>费用类型</th>
				<th>节点类型</th>
                <th>备注</th>
				<th width="60">操作</th>
			</tr>
		</thead>
		<tbody id="investmentCostList">
		</tbody>
	</table>

	<script type="text/template" id="investmentCostTpl">//<!--
        <tr id="investmentCostList{{idx}}">
            <td class="hide">
                <input id="investmentCostList{{idx}}_id" subName="id" class="contentDetail" type="hidden" value="{{row.id}}"/>
                <input id="investmentCostList{{idx}}_delFlag" subName="delFlag" class="contentDetail" type="hidden" value="0"/>
                <input id="investmentCostList{{idx}}_costType" subName="costType" class="contentDetail"  type="hidden" value="{{row.costType}}"/>
            </td>
            <td>
                <input id="investmentCostList{{idx}}_costNum" subName="costNum"  value="{{row.costNum}}" type="text" class="form-control contentDetail"/>
            </td>
            <td>
                <input id="investmentCostList{{idx}}_costName" subName="costName" value="{{row.costName}}" type="text" class="form-control contentDetail"/>
            </td>
            <td>
                <input id="investmentCostList{{idx}}_buildindCost" subName="buildindCost" type="text" value="{{row.buildindCost}}" onchange="formatNumMoney(this,{{idx}});" class="form-control number contentDetail money"/>
            </td>
            <td>
                <input id="investmentCostList{{idx}}_equipmentCost" subName="equipmentCost" type="text" value="{{row.equipmentCost}}" onchange="formatNumMoney(this,{{idx}});" class="form-control number contentDetail money"/>
            </td>
            <td>
                <input id="investmentCostList{{idx}}_installationCost" subName="installationCost" type="text" value="{{row.installationCost}}" onchange="formatNumMoney(this,{{idx}});" class="form-control number contentDetail money"/>
            </td>
            <td>
                <input id="investmentCostList{{idx}}_otherExpenses" subName="otherExpenses" type="text" value="{{row.otherExpenses}}" onchange="formatNumMoney(this,{{idx}});" class="form-control number contentDetail money"/>
            </td>
            <td>
                <input id="investmentCostList{{idx}}_totalCost" subName="totalCost" type="text"  value="{{row.totalCost}}" readonly="true" class="form-control number  contentDetail money"/>
            </td>
            <td>
                <input id="investmentCostList{{idx}}_count" subName="count" type="text" onchange="formatNumMoney(this,{{idx}});"  value="{{row.count}}" class="form-control number contentDetail"/>
            </td>
            <td>
            <select style="width:80px;" id="investmentCostList{{idx}}_unit" subName="unit" class="form-control contentDetail">
			 <option value =""></option>
             <c:if test="${ not empty unitList}">
				<c:forEach items="${unitList}" var="nodeType" varStatus="index">
				<option value="${nodeType.value}">${nodeType.label}</option>
				</c:forEach>
			</c:if>
			</select>
               <%-- <input id="investmentCostList{{idx}}_unit" subName="unit" type="text"  value="{{row.unit}}" class="form-control  contentDetail"/>--%>
            </td>
            <td>
                <input id="investmentCostList{{idx}}_target" subName="target" type="text"  value="{{row.target}}" readonly="true" class="form-control  contentDetail"/>
            </td>
            <td>
            <select style="width:80px;" id="investmentCostList{{idx}}_expenseType" subName="expenseType" class="form-control contentDetail">
			 <option value =""></option>
             <c:if test="${ not empty costList}">
				<c:forEach items="${costList}" var="nodeType" varStatus="index">
				<option value="${nodeType.value}">${nodeType.label}</option>
				</c:forEach>
			</c:if>
			</select>
                <%--<input id="investmentCostList{{idx}}_expenseType" subName="expenseType" type="text"  value="{{row.expenseType}}" class="form-control  contentDetail"/>--%>
            </td>
            <td>
            <select style="width:80px;" id="investmentCostList{{idx}}_nodeTypes" subName="nodeTypes"  class="form-control contentDetail">
			 <option value =""></option>
             <c:if test="${ not empty nodeList}">
				<c:forEach items="${nodeList}" var="nodeType" varStatus="index">
				<option value="${nodeType.value}" >${nodeType.label}</option>
				</c:forEach>
			</c:if>
			</select>
                <%--<input id="investmentCostList{{idx}}_nodeTypes" subName="nodeTypes" type="text"  value="{{row.nodeTypes}}" class="form-control  contentDetail"/>--%>
            </td>
            <td>
                <input id="investmentCostList{{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, '#investmentCostList{{idx}}')"   class="op-btn op-btn-delete"><i class="fa fa-trash"></i> 取消</a>
            </td>
        </tr>//-->
    </script>
        <script type="text/javascript">
            var investmentCostIdx = 0, investmentCostTpl = $("#investmentCostTpl").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(investmentCostList)};
                for (var i=0; i<data.length; i++){
                    addRowCost('#investmentCostList', investmentCostIdx, investmentCostTpl,data[i]);
                    $("#investmentCostList"+i+"_nodeTypes").val(data[i].nodeTypes);
                    $("#investmentCostList"+i+"_expenseType").val(data[i].expenseType);
                    $("#investmentCostList"+i+"_unit").val(data[i].unit);
                }
                $(":input.money").change();
            })

            function addRowCost(list, idx, tpl, row){
                bornTemplete(list, idx, tpl, row, idx);
                investmentCostIdx +=1;
            }

            function bornTemplete(list, idx, tpl, row, idx1){
                var idx1 = $("#investmentCostList 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 genRow(data) {
                for (var i = 0; i < data.length; i++) {
                    addRowCost('#investmentCostList',investmentCostIdx,investmentCostTpl,data[i]);
                }
                $(":input.money").change();
            }

            function genDetailStr(){
                var costList = $("#investmentCostList 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>