<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="cm" uri="/commons-tags" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>工资帐套</title>
<link href="../resources/style/base.css" rel="stylesheet" type="text/css"/>
<s:include value="../common/head.jsp" />
<script type="text/javascript" src="../resources/js/jquery/jquery.tablednd_0_5.js"></script>
<style>
.item_css {
	display:none;
}
.sys_item_true{
	color:#F00;
}
tr.dnd_cls td {
	background-color:#D2D2FF;
}
</style>
<script language="javascript">
var itemArray=new Array();
<s:iterator value='accountItemList' status="st">
itemIx=<s:property value='#st.index'/>; 
itemArray[itemIx]=new Object(); 
itemArray[itemIx].id="<s:property value='id'/>"; 
itemArray[itemIx].name="<s:property value='name'/>"; 
itemArray[itemIx].pid="<s:property value='kind.id'/>";
itemArray[itemIx].system="<s:property value='system'/>";
</s:iterator>
function generateOpertion(kindId,itemId){
	var res="<option value=''></option>";
	for(var i=0;i<itemArray.length;i++){
		if(itemArray[i].pid!=kindId)continue;
		var selFlag=itemArray[i].id==itemId?"selected":"";
		res=res+"<option class='sys_item_"+itemArray[i].system+"' "+selFlag+" value='"+itemArray[i].id+"'>"+itemArray[i].name+"</option>";
	}
	return res;
}
</script>

</head>

<body>
<div class="body_form" style="width:800px; padding-top:0;">
<s:include value="../common/body.jsp" />
<script language="javascript">
function changeItemKind(ix,accountItemId){
	var $row=$("#row_"+ix);
	var val=$row.find("#itemKind").val();
	$row.find("#accountItem").html(generateOpertion(val,accountItemId));
}


function changeValType(ix){
	var $row=$("#row_"+ix);
	var $span=$row.find("#valExpressSpan");
	var $obj=$row.find("#valExpress");
	$span.hide();
	$obj.attr("disabled",true);
	if($row.find("#valType").val()=="<s:property value='expressionTypeId'/>"){
		$span.show();
		$obj.attr("disabled",false);
	}
}

var tempHtml="";
$(function(){
	tempHtml="<tbody>"+$("#row_template").html()+"</tbody>";
	$("#row_template").html("");
	initRows();
});


function dragTable(){
	$("#accountDataTable").tableDnD(
		{onDragClass: "dnd_cls"}
	);
}


function setName(template,name){
	return template.replace(name+"_name","detList["+rowIndex+"]."+name);
}

var rowIndex=0;
function addRow(id,varNo,itemKind,accountItem,valType,valExpress){
	//替换name,由于ie67不能动态修改
	var thtml=setName(tempHtml,"id");
	thtml=setName(thtml,"varNo");
	thtml=setName(thtml,"itemKind.id");
	thtml=setName(thtml,"accountItem.id");
	thtml=setName(thtml,"valType.id");
	thtml=setName(thtml,"valExpress");

	var $row=$(thtml);
	$row.children("tr").attr("id","row_"+rowIndex);
	$row.find("#id").val(id);
	
	if(id==null&&varNo==null) varNo=rowIndex+1;
	$row.find("#varNo").val(varNo);
	
	$row.find("#itemKind").attr("rel",rowIndex);
	$row.find("#itemKind").val(itemKind);
	
	$row.find("#accountItem").val(accountItem);
	
	$row.find("#valType").attr("rel",rowIndex);
	$row.find("#valType").val(valType);	
	
	$row.find("#valExpress").val(valExpress);			
		
	$row.find("#delImg").attr("rel",rowIndex);
	
	$("#row_body").append($row.html());
	rowIndex++;
	
	resizeBody();
	dragTable();
}

function delRow(ix){
	$("#row_"+ix).html("");
}

function otherCheck(){
	if($("#row_body").find("#varNo").size()<1){
		msgAlert("操作失败，请添加工资帐套项目。");
		return false;
	}
	return true;
}

function initRows(){
	<s:iterator value="account.detSet">
		addRow("<s:property value='id'/>","<s:property value='varNo'/>","<s:property value='itemKind.id'/>",
			"<s:property value='accountItem.id'/>","<s:property value='valType.id'/>","<s:property value='valExpress' escapeJavaScript='true' escape='false'/>");
		changeValType(rowIndex-1);
		changeItemKind(rowIndex-1,"<s:property value='accountItem.id'/>");
	</s:iterator>
	//default add one
	if(rowIndex==0)addRow();
}
</script>


<s:form id="formID" action="salaryAccountOperate" namespace="/salary"  onsubmit="return checkForm(this,otherCheck)">
  <table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr class="form_tr">
      <td width="89" align="right"><span class="required">•</span>帐套名称：</td>
      <td width="280"> <s:textfield name="account.name" title="帐套名称为必填项" cssStyle="width:200px;"/></td>
      <td width="141" align="right"><span class="required">•</span>社保缴纳月份：</td>
      <td width="121"><s:select name="account.insurPayMonth.id" list='#request.SysCodeFinder.find("SALARY_INSUR_PAY_MONTH")'
                        headerKey="" headerValue="" listKey="id" listValue="codeName" title="社保缴纳月份 为必填项目" cssStyle="width:50px;"/></td>
      <td width="169" align="right">
		<a href="<s:url namespace='/system'  action='helpVarList'/>" target="_blank" class="help">查看公式变量</a>      </td>
    </tr>
     <tr class="form_tr">
      <td align="right">帐套备注：</td>
      <td colspan="3"> <s:textfield name="account.descr" cssStyle="width:420px;"/></td>
      <td>      	
          
      </td>
    </tr>   
  </table>
  <table id="accountDataTable" width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="sub_table_line">
	<tr class="sub_list_title center nodrop nodrag">
      <th width="9%">公式编号</td>
      <th width="14%">项目类型</td>
      <th width="22%">项目名称</td>
      <th width="9%">值类型</td>
      <th width="40%">公式</td>
      <th width="6%">操作</td>
    </tr>
    <tbody id="row_body">
    </tbody>
    <tbody id="row_template">
      <tr class="list_data center">
        <td>
        	<s:property value="@com.hrmex.web.constants.ConstantVar@SALARY_ACCOUNT_VAR_PREFIX"/>
        	<s:textfield id="varNo" name="varNo_name" cssStyle="width:35px; text-align:center;"/>
            <s:hidden id="id" name="id_name"/>
        </td>
        <td>
	     	<s:select cssStyle="width:90px;" id="itemKind" name="itemKind.id_name" list='#request.SysCodeFinder.find("SALARY_ITEM_KIND")' 
				onchange="changeItemKind(this.rel)"
                        headerKey="" headerValue="" listKey="id" listValue="codeName" title="值类型为必填项目"/>
        </td>
        <td>
        	<select id="accountItem" name="accountItem.id_name" title="项目名称为必填项目" style="width:160px;"></select>	
        </td>
        <td><s:select id="valType" name="valType.id_name" list='#request.SysCodeFinder.find("SALARY_ACCOUNT_VALUE_TYPE")' 
        	onchange="changeValType(this.rel)"  headerKey="" headerValue="" listKey="id" 
            listValue="codeName" title="值类型为必填项目" cssStyle="width:60px;"/></td>
        <td>
        	<span id="valExpressSpan" class="item_css">
            <s:textarea id="valExpress" name="valExpress_name" title="公式 为必填项" cssStyle="width:290px; height:33px;"/>
            </span>&nbsp;
        </td>
        <td>
        	<img id="delImg" src="../resources/images/del.gif" title="删除该行记录" class="pointer" onclick="delRow(this.rel)"/>
        </td>
      </tr>
    </tbody>
  </table>
  
  <table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr class="form_tr">
      <td width="91%" align="center" valign="top"><s:if test="oper=='edit'">
        <input type="submit" name="button" id="button" value="修 改" />
        </s:if>
        <s:if test="oper=='add'">
          <input type="submit" name="button" id="button" value="添 加" />
          </s:if>
        &nbsp; 
        <!-- back begin -->
        
        <input name="winID" type="hidden" value="${param.winID}" />
        <input type="button" onclick="iframeWindowClose('${param.winID}')" name="button" id="button" value="返 回" />
        
        <!-- back end -->
        <s:hidden name="account.id" />
        <s:hidden name="oper" /></td>
      <td width="9%" align="right" valign="top" style="padding:5px 0;">
	  <div class="sub_add" style="margin-left:0; float:right;" onclick="addRow()">增加</div>
	  </td>
    </tr>
  </table>
  
   <div style="margin-top:15px;">
   <div class="info"><strong>项目名称</strong>：项目名称列在薪资帐套中不能重复，并且“基本项目”类型下的红色字体项目为必选项；其中<strong>工资总额</strong>项目是指员工在扣除个人社保费用和所得税之前的总金额，该项值在调整社保基数模块中会用到。</div>
   <div class="info"><strong>公式</strong>：在公式中只能引用比自己的公式编号小的薪资项目的值，例如：在A10的公式中，可以引用A9但不能引用A11公式变量。</div>
   <div class="info">
   	<strong>值类型</strong>：<strong>固定值</strong>表示在“员工薪资配置”时设定的固定值；<strong>浮动值</strong>表示在每月薪资初始化后可手动修改该项目的值；<strong>公式</strong>为自定义的计算逻辑。   </div>
	</div>
</s:form>
</div>
</body>
</html>