<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
	<title></title>
	<meta name="decorator" content="default" />
	<script type="text/javascript">
		var validateForm;
		/*function doSubmitExcel(){//回调函数，在编辑和保存动作时，供openDialog调用提交表单。
            $("#inputFormExcle").attr("action","${ctx}/workexample/workExample/import");
            var formData = new FormData();
            formData.append("file",$("#uploadFile")[0].files[0]);
            console.info($("#inputFormExcle").serialize());
            debugger;
            $.ajax({
                type:'post',
                url:'${ctx}/workexample/workExample/import',
                data:formData,
                dataType: "json",
                cache: false,
                processData: false,
                contentType: false,
                success:function(data){
                }
            });
		/!* if(validateForm.form()){

			 /!* $("#inputFormExcle").submit();*!/
			  return true;
		  }

		 return false;*!/
		}*/

        function doSubmit(){//回调函数，在编辑和保存动作时，供openDialog调用提交表单。
            if(validateForm.form()){
                $("#inputFormExcle").submit();
                return true;
            }
            return false;
        }
		$(document).ready(function() {
			validateForm = $("#inputFormExcle").validate({
				submitHandler: function(form){
					loading('正在提交，请稍等...');
					form.submit();
				},
				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);
					}
				}
			});
        });
        


        function getChange(){
            var layerIndex= layer.load(0,{shade: [0.3, '#fff']});
            var formData = new FormData();
            formData.append("file",$("#uploadFile")[0].files[0]);
            $.ajax({
                type: 'post',
                url:'${ctx}/workexample/workExample/excel',
                data: formData,
                dataType: "json",
                cache: false,
                processData: false,
                contentType: false,
            }).success(function (result) {
                layer.close(layerIndex);
                setExcelInfo(result.data);
            }).error(function () {
                top.layer.msg("文件载入失败！");
            });
        }

        function addRow(list, idx, tpl, row){
            var idx1 = $("#excelList tr").length;
            bornTemplete(list, idx, tpl, row, idx1);
        }
        function bornTemplete(list, idx, tpl, row, idx1){
            $(list).append(Mustache.render(tpl, {
                idx: idx, delBtn: true, row: row,
                order:idx1 + 1
            }));
            $(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 setExcelInfo(data){
            for(var i=0;i<data.length;i++){
                addRow('#excelList', excelListRowIdx, excelListTpl);
                excelListRowIdx = excelListRowIdx + 1;
                    var row = excelListRowIdx - 1 ;
                    $("#"+"excelList"+row+"_idId").val(data[i].id);
                    $("#"+"excelList"+row+"_sheetName").val(data[i].sheetName);
                    $("#"+"excelList"+row+"_idName").val(data[i].name);
        }
        }
    </script>
    <style>
        /*超过5个汉字，调整label的长度，以下是配套的*/
        .layui-item .layui-form-label{
            width:90px;
        }
        .form-group .layui-item .layui-input-block,
        .query .layui-input-block {
            margin-left: 116px;
        }
    </style>
</head>
<body >
<div class="single-form">
    <div class="container">
		<form:form id="inputFormExcle" modelAttribute="workExampleExcel"  action="${ctx}/workexample/workExample/import"  enctype="multipart/form-data" method="post" class="form-horizontal">
            <div class="form-group layui-row first">
                <div class="layui-item layui-col-sm6">
                    <div class="layui-input-block">
                        <div class="input-group">
                            <input id="uploadFile" onchange="getChange()" name="file" type="file" />
                        </div>
                    </div>
                </div>
                <div class="layui-item layui-col-xs12 form-table-container" >
                    <table id="" class="table table-bordered table-condensed can-edit no-bottom-margin">
                        <thead>
                        <tr>
                            <th width="20px">序号</th>
                            <th width="400px">sheet名称</th>
                            <th width="400px">对应指标项</th>
                        </tr>
                        </thead>
                        <tbody id="excelList">

                        </tbody>
                    </table>
                    <script type="text/template" id="excelListTpl">//<!--
                                    <tr id="excelList{{idx}}">
                                    <td>
                                            <input id="excelList{{idx}}_no"  type="text" value="{{idx}}"  readonly="true"   class="form-control "/>
                                        </td>
                                        <td>
                                            <input id="excelList{{idx}}_sheetName"   name="excelList[{{idx}}].sheetName" type="text" value="{{row.sheetName}}"  readonly="true"   class="form-control "/>
                                        </td>
                                         <td>
                                            <sys:treeselectJob id="excelList{{idx}}_id" name="excelList[{{idx}}].id" value="${row.id}" labelName="excelList[{{idx}}].name" labelValue="${row.name}"
																title="指标类型" url="/workexample/workExampleIndices/treeDataExampleInfo"   cssClass="form-control layui-input required" allowClear="true" notAllowSelectParent="true"/>
                                        </td>
                                    </tr>//-->
                    </script>
                    <script type="text/javascript">
                        var excelListRowIdx = 1, excelListTpl = $("#excelListTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
                    </script>
                </div>

    </div>
           <%-- <a href="javascript:void(0)" onclick="doSubmit()" class="nav-btn nav-btn-import" ><i class="fa fa-plus"></i>&nbsp;导入</a>--%>
    <div class="form-group layui-row page-end"></div>
	</form:form>
    </div>
</div>
</body>
</html>