[[$files := newFiles]]
[[append $files "/flib/jquery-resizable/dist/jquery-resizable.js" "/flib/jquery-resizable/dist/jquery-resizable.min.js"]]
[[append $files "/flib/uri.js/src/URI.js" "/flib/uri.js/src/URI.min.js"]]
<script src="[[concat $files]]"></script>
<style type="text/css">
	html,
	body {
		height: 100%;
		overflow: hidden;
	}
	#tabData {
		white-space: nowrap;
		cursor: default;
	}
	#tabData th,
	#header-fixed th {
		text-align: center;
		cursor: pointer;
	}

	.td_number {
		text-align: right;
	}

	.panel-container {
		display: flex;
		flex-direction: row;
		height: 100%;
		border: 1px solid silver;
		/* avoid browser level touch actions */
		xtouch-action: none;
	}
	.panel-left {
		flex: 0 0 auto;
		/* only manually resize */
		width: 300px;
		height: 100%;
		min-height: 200px;
		min-width: 150px;
		white-space: nowrap;
		overflow: auto;
	}
	.splitter {
		flex: 0 0 auto;
		width: 12px;
		background: url(/img/vsizegrip.png) center center no-repeat #d7d7d7;
		min-height: 200px;
		cursor: col-resize;
	}
	.panel-right {
		flex: 1 1 auto;
		/* resizable */
		width: 100%;
		min-height: 200px;
		min-width: 200px;
		height:100%;
	}
	.frame-right{
		width:100%;
		height: 100%;
		padding-top:40px;
		overflow: auto;
	}
	.top-blank{
		height: 40px;
	}
</style>
<nav class='navbar navbar-default navbar-fixed-top' role='navigation' id="navTitle">
	<div class='container-fluid'>
		<div class='navbar-header'>
			<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='#title_navbar_collepse'>
				<span class='sr-only'>Toggle navigation</span>
				<span class='icon-bar'></span>
				<span class='icon-bar'></span>
				<span class='icon-bar'></span>
			</button>
			<a class='navbar-brand' href='#'><i class='fa fa-server'></i></a>
		</div>
		<div class='navbar-collapse collapse' id='title_navbar_collepse'>
			<ul class="nav navbar-nav">
				<li>
					<p class="navbar-text">{{.More.Label}} 的连续操作</p>
				</li>
				{{range .More.Processes}}
				{{if .Active}}
				<li class="active">
					<a href="#">{{.Name}}</a>
				</li>
				{{else}}
				<li>
					<a href="{{.URL}}">{{.Name}}</a>
				</li>
				{{end}}
				{{end}}
			</ul>
			<ul class="nav navbar-nav navbar-right">
				<li>
					<a id="btnPrevPage" {{if .More.PrevPageURL}}href="{{.More.PrevPageURL}}"{{end}}><i class="fa fa-angle-double-left"></i></a>
				</li>
				<li>
					<a id="btnPrev"><i class="fa fa-angle-left"></i></a>
				</li>
				<li>
					<p class="navbar-text"><span id="currentRowNum"></span>/{{.More.RowCount}}</p>
				</li>
				<li>
					<a id="btnNext"><i class="fa fa-angle-right"></i></a>
				</li>
				<li>
					<a id="btnNextPage" {{if .More.NextPageURL}}href="{{.More.NextPageURL}}"{{end}}><i class="fa fa-angle-double-right"></i></a>
				</li>
			</ul>
		</div>
	</div>
</nav>
<div class="panel-container">
	<div class="panel-left">
		<div class="top-blank"></div>
		<table id="tabData" class="table table-striped table-hover table-condensed table-bordered table-nonfluid">
			<thead>
				<tr>
					<th class="thNo">序号</th>
					{{range .More.Columns}}
					<th class="thColumn" data-ColumnName="{{.Name}}">{{.Name}}</th>
					{{end}}
				</tr>
			</thead>
			<tbody>
				{{range $idx,$row:=.More.Rows}}
				<tr class="tr-data" data-rownum={{$row.RowNum}} data-url={{$.More.ActiveProcess.URL $row.Data}} data-candisplay={{$.More.ActiveProcess.CanDisplay $row.Data}}>
					<td align="right">{{$row.RowNum}}</td>
					{{range $.More.Columns}}
					<td {{if or (eq .Type.String "INT") (eq .Type.String "FLOAT")}} class="td_number" {{end}}>
						{{toHtml (index $row.Data .Name)}}
					</td>
					{{end}}
				</tr>
				{{end}}
			</tbody>
		</table>
	</div>

	<div class="splitter">
	</div>
	<div class="panel-right">
		<iframe id="frmSequenceOperateRight" frameborder="0" class="frame-right"></iframe>
	</div>
</div>

<script>
	
	var downDivide = {{.More.DownDivide}};
	var downRowNum = {{.More.DownRowNum}};
	var upDivide = {{.More.UpDivide}}||[];
	var upRowNum = {{.More.UpRowNum}}||[];
	
	$(".panel-left").resizable({
		handleSelector: ".splitter",
		resizeHeight: false
	});
	function activeRow(row){
		var $row = $(row);
		if ($row.length >0){
			$("#frmSequenceOperateRight").attr("src",$row.data("url"));
			$(".tr-data").removeClass("success");
			$row.addClass("success");
			$("#currentRowNum").html($row.data("rownum"));
			//只有超出显示范围的才需要滚动
			if($row.offset().top  > $('.panel-left').height()-$row.height()){
				$('.panel-left').scrollTop( $('.panel-left').scrollTop()+$row.height());
			}
			if(	$row.offset().top < 40)
				$('.panel-left').scrollTop( $('.panel-left').scrollTop()-$row.height());
		}
	}
	$(".tr-data").click(function(){
		activeRow(this);
	});
	$("#btnPrev").click(function(){
		var $row = $(".tr-data.success");
		var nextRow = $row.prev();
		if(nextRow.length == 0){
			var u = $("#btnPrevPage").attr("href");
			if(u)
				window.location.href=u+"&mlast=true";
		}else{
			activeRow(nextRow);
		}
	});
	$("#btnNext").click(function(){
		var $row = $(".tr-data.success");
		var nextRow = $row.next();
		if(nextRow.length == 0){
			var u = $("#btnNextPage").attr("href");
			if(u)
				window.location.href=u;
			else{
				//最后一行，就切换到第一条
				var url = new URI(window.location.href);
				var locationQuery = url.search(true);
	 			var pam = _.pick(locationQuery,"_s","active","_rvp");
				url.search(pam);
				window.location.href=url.toString();
			}
		}else{
			activeRow(nextRow);
		}
	});
	if({{.More.MoveLast}}){
		activeRow($(".tr-data:last"));
	}else{
		activeRow($(".tr-data:first"));
	}
	$("#frmSequenceOperateRight").data("onclose",function(){
		alert("close");
	})
	$(".panel-right").resize(function(){

	});

	window.addEventListener('message', function(event) { 
		if (event.data =="SequenceNext"){
			$("#btnNext").click();
		}
	}); 
</script>