<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>

<%@include file="/WEB-INF/page/header.jsp" %>

<script type="text/javascript">
	changeMenu(5, '');//左边菜单active
</script>

<div class="row white-bg border-bottom white-bg page-heading">
	<div class="col-lg-12">
		<h2>我的帐户</h2>
	</div>
	<div class="col-lg-12">
		<div class="row">
			<div class="col-sm-10">
				<ol class="breadcrumb">
					<li>我的帐户</li>
					<li class="active"><strong>地区账号</strong></li>
				</ol>
			</div>
			<div class="col-sm-2 text-right">
				<a href="${contextPath}/user/account"> <i class="fa fa-level-up"></i> 返回</a>
			</div>
		</div>
	</div>
</div>

<div class="wrapper wrapper-content animated fadeInRight">
	<div class="row">
		<div class="col-lg-12">
			<div class="ibox float-e-margins">
				<div class="ibox-content">
					<form  class="form-horizontal">
						<div class="form-group">
							<label class="col-sm-10 control-label">
								<h3 class="text-left">地区账号列表</h3>
							</label>
							<div class="col-sm-2">
								<button class="btn btn-danger" type="button" id="addAreaAccountButton">新增地区账号</button>
							</div>
						</div>
						<div class="hr-line-dashed"></div>
				
						<div class="row">
							<div class="col-md-2">
								<select id="areaProvince" class="form-control input-sm" onchange="setChArea(this)">
									<option selected value="" >省份</option>						    
								</select>
			            	</div>
			            	<div class="col-md-2">
			          			<select id="areaCity" class="form-control input-sm" onchange="setChArea(this)">
									<option value="">城市</option>
								</select>
							</div>
	               			
	               			<div class="col-sm-3">
	               				<input type="text" class="form-control input-sm m-b-xs" id="keyword"
	                                  placeholder="输入“帐号、开户行”等关键词">
	               			</div>
	               			<div class="col-sm-1">
	               				<button type="button" class="btn btn-purple btn-sm" id="searchd">
									<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
									查询
								</button>
	               			</div>
	               		</div>
               		</form>
               		
               		<div class="row">
						<div class="col-md-12 jqGrid_wrapper">
							<table id="gridTable1"></table>
							<div id="gridPager1"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div id="mod-account" class="modal fade" tabindex="-1">
	  <div class="modal-dialog" style="max-width: 400px;">
	      <div class="modal-content">
	      	<div class="modal-header">
      			<div class="table-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						<span class="white">&times;</span>
					</button>
					地区账号
				</div>
	      	</div>
	        <div class="modal-body">
                 <form role="form" id="mod-account-form">
                 	<div class="form-group">
						<select id="mod-account-areaProvince" class="form-control input-sm" onchange="setChArea(this)">
							<option selected value="" >省份</option>						    
						</select>
	            	</div>
	            	<div class="form-group">
	          			<select id="mod-account-areaCity" class="form-control input-sm">
							<option value="">城市</option>
						</select>
					</div>
					<div class="form-group">
						<label>开户名</label> 
						<input type="text" id="mod-account-accountName" value="" class="form-control">
					</div>
					<div class="form-group">
						<label>开户行</label> 
						<input type="text" id="mod-account-accountBank" value="" class="form-control">
					</div>
					<div class="form-group">
						<label>帐    号</label> 
						<input type="text" id="mod-account-accountNum" value="" class="form-control">
					</div>
					<div class="form-group">
						<input type="hidden" id="mod-account-id" value="" class="form-control">
					</div>
				</form>
	      	</div>
	      	<div class="modal-footer">
	      		<button class="btn btn-primary" type="button" id="mod-account-submit"><strong><i class="fa fa-floppy-o bigger-160"></i> 确定</strong></button>
                <button class="btn" data-dismiss="modal"><i class="fa fa-share bigger-160"></i> 取消</button>
			</div>
	      </div>
	  </div>
</div>

<%@include file="/WEB-INF/page/footer.jsp" %>    

<link href="${contextPath}/static/css/plugins/jQueryUI/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
<link href="${contextPath}/static/css/plugins/jqGrid/ui.jqgrid.css" rel="stylesheet">

<script src="${contextPath}/static/js/plugins/jqGrid/jquery.jqGrid.min.js"></script>
<script src="${contextPath}/static/js/plugins/jqGrid/i18n/grid.locale-cn.js"></script>
    
<script src="${contextPath}/static/ssdb/china_area.js"></script>

<script type="text/javascript">
var gridTable1 = null;
var grid_selector = "#gridTable1";
var pager_selector = "#gridPager1";

jQuery(function($) {
	initAreaProvince();

	initGridTable();
	// resize to fit page size
	$(window).on("resize.jqGrid", function() {
		$(grid_selector).jqGrid("setGridWidth", $(".page-content").width());
	});
	// resize on sidebar collapse/expand
	var parent_column = $(grid_selector).closest("[class*='col-']");
	$(document).on("settings.ace.jqGrid", function(ev, event_name, collapsed) {
		if (event_name === "sidebar_collapsed" || event_name === "main_container_fixed") {
			// setTimeout is for webkit only to give time for DOM changes and then redraw!!!
			setTimeout(function() {
				$(grid_selector).jqGrid("setGridWidth", parent_column.width());
			}, 0);
		}
	});
	
	$(document).one('ajaxloadstart.page', function(e) {
		$(grid_selector).jqGrid('GridUnload');
		$('.ui-jqdialog').remove();
	});
	
	$('#mod-reviewFail-submit').on('click', function() {
		reviewFailSubmit();
	});
	$('#mod-replyLawyer-submit').on('click', function() {
		replyLawyerSubmit();
	});
		
 	// Add responsive to jqGrid
    $(window).bind('resize', function () {
        var width = $('.jqGrid_wrapper').width();
        gridTable1.setGridWidth(width);
    });
 	
    jQuery(grid_selector).jqGrid('navGrid', pager_selector, {
		edit : false,
		editicon : 'ace-icon fa fa-pencil blue',
		add : false,
		addicon : 'ace-icon fa fa-plus-circle purple',
		del : false,
		delicon : 'ace-icon fa fa-trash-o red',
		search : false,
		searchicon : 'ace-icon fa fa-search orange',
		refresh : false,
		refreshicon : 'ace-icon fa fa-refresh blue',
		view : false,
	}).jqGrid('navButtonAdd', pager_selector,{
		caption:"",
    	title : "删除地区账号",
		buttonicon:"ui-icon ace-icon fa ui-icon-trash blue",
		onClickButton: function(){
			var selectedIds = gridTable1.jqGrid("getGridParam", "selarrrow");
			if(selectedIds.length < 1){
				alert('请选择记录');
				return;
			}
			deleteAreaAccounts(selectedIds);
		},
		position:"last"
	});
    
    $(document).keydown(function(event) {
		var key = window.event ? event.keyCode : event.which;
		if (key == 13) {
			$("#searchd").click();
		}
	});
    
    $("#searchd").click(function(){
		var keyword =$("#keyword").val();
		var province = $("#areaProvince").val();
		var city = $("#areaCity").val();
		gridTable1.setGridParam({data:'json',url : '${contextPath}/account/getAreaAccounts?keyword='+keyword+'&provinceCode='+province+'&cityCode='+city}).trigger('reloadGrid');
	});
    
	$("#addAreaAccountButton").click(function(){
		document.getElementById('mod-account-form').reset();
		$("#mod-account").modal("toggle");
	});
	$("#mod-account-submit").click(function(){
		submitAreaAccount();
	});
});

function deleteAreaAccounts(ids){
	if (confirm("确定删除吗?")) {
		$.ajax({
			dataType : "json",
			url : "${contextPath}/account/deleteAreaAccounts",
			type : "post",
			traditional: true,
			data : {
				'ids' : ids.join()
			},
			complete : function(ret) {
				var ret = eval("(" + ret.responseText + ")");
				if(ret.success){
					alert('删除成功');
					reloadGrid();
				}else{
					alert(ret.message);
				}
			}
		});
	}
}

function initAreaProvince(){
	$.getJSON("${contextPath}/pub/getProvince",function(result){
		$.each(result, function(i, v){
			$("#areaProvince").append("<option value='"+v.code+"'>"+v.name+"</option>");
			$("#mod-account-areaProvince").append("<option value='"+v.code+"'>"+v.name+"</option>");
		});
	});	
}

function initGridTable(){
	gridTable1 = jQuery(grid_selector).jqGrid({
		subGrid : false,
		url : "${contextPath}/account/getAreaAccounts",//
		datatype : "json",
		height : "auto",
		autowidth:true,
		colNames : ["省份", "城市", "开户名", "开户行", "帐号","操作"],
		colModel : [{
			name : "province",
			index : "province",
			label : "省份",
			width : 100,
			search : false
    	},{
			name : "city",
			index : "city",
			label : "城市",
			width : 100,
			search : false
    	},{
			name : "accountName",
			index : "accountName",
			label : "开户名",
			width : 200,
			search : false
    	},{
			name : "accountBank",
			index : "accountBank",
			label : "开户行",
			width : 200,
			search : false
    	},{
			name : "accountNum",
			index : "accountNum",
			label : "帐号",
			width : 200,
			sortable: false,
			search : false
    	},{
    		align : "center",
			name : "id",
			index : "id",
			label : "操作",
			width : 100,
			viewable:false,
			sortable: false,
			fixed:true,
			formatter:operationLink
    	}],
		sortname : "province",
		sortorder : "asc",
		viewrecords : true,
		rowNum : 10,
		rowList : [ 10, 20, 30 ],
		pager : pager_selector,
		altRows : true,
		//toppager : true,
		multiselect : true,
		//multikey : "ctrlKey",
        multiboxonly : true,
     	rownumbers:true,  
     	rownumWidth:30, 
	       
	});
}

function isNotBlank(obj){
	var result = true;
	if(obj == undefined || obj == null || obj == 'null' || obj.length < 1){
		result = false;
	}
	return result;
}

function modAccountShow(accountBank,accountName,accountNum,cityCode,id,provinceCode){
	document.getElementById('mod-account-form').reset();
	$('#mod-account-accountBank').val(accountBank);
	$('#mod-account-accountName').val(accountName);
	$('#mod-account-accountNum').val(accountNum);
	$('#mod-account-id').val(id);
	$('#mod-account-areaProvince').val(provinceCode);
	var sec = document.getElementById('mod-account-areaCity');
	sec.innerHTML = "<option selected value='' >城市</option>";
	$.getJSON("${contextPath}/pub/getAreas?parentCode="+provinceCode,function(result){
		$.each(result, function(i, v){
			sec.innerHTML+="<option value='"+v.code+"'>"+v.name+"</option>";
		});
		if(isNotBlank(cityCode)){
			$('#mod-account-areaCity').val(cityCode);
		}
	});
	$("#mod-account").modal("toggle");
}

//操作链接
function operationLink(cellvalue, options, rowObject){
	var result = '<a href="javascript:void(0);" style="color:blue" onclick="modAccountShow(\'' + rowObject.accountBank + '\',\'' + rowObject.accountName + '\',\'' + rowObject.accountNum + '\',\'' + rowObject.cityCode + '\',\'' + rowObject.id + '\',\'' + rowObject.provinceCode + '\')">修改</a>';
	return result;
}

function reloadGrid(){
	gridTable1.trigger('reloadGrid');
}

function setChArea(obj){  
    var val = obj.value;  
    var sec = null;
    var areaId = $(obj).attr("id");
	if(areaId == "areaProvince" || areaId == "mod-account-areaProvince"){
		if(areaId == "areaProvince")
			sec = document.getElementById('areaCity');
		else
			sec = document.getElementById('mod-account-areaCity');
	    sec.innerHTML = "<option selected value='' >城市</option>"; 
	}else{
		sec = document.getElementById('areaCounty');			
	    sec.innerHTML = "<option selected value='' >全部</option>"; 
	}
    if(val != ''){  
    	//ajax
    	$.getJSON("${contextPath}/pub/getAreas?parentCode="+val,function(result){
    		$.each(result, function(i, v){
    			sec.innerHTML+="<option value='"+v.code+"'>"+v.name+"</option>";
    		});
  		});
    }     
}

function submitAreaAccount(){
	var data = {};	
	var ids = {"mod-account-areaProvince":["省份","provinceCode"],"mod-account-accountName":["开户名","accountName"],
			   "mod-account-accountBank":["开户行","accountBank"],"mod-account-accountNum":["帐号","accountNum"]};
	var v = null;
	for(var id in ids){
		v = $('#' + id).val();
		if(isNotBlank(v)){
			data[ids[id][1]] = v
		}else{
			alert(ids[id][0] + '不能为空');
			return;
		}
	}
	data['id'] = $('#mod-account-id').val();
	data['cityCode'] = $('#mod-account-areaCity').val();
	var t = $("#mod-account-areaProvince").find("option:selected").text();
	if(isNotBlank(data['cityCode'])){
		t += $("#mod-account-areaCity").find("option:selected").text();
	}
	data['province'] = t;
	$.getJSON('${contextPath}/account/saveAreaAccount',data,function(result){
		if(result.success){
			alert('提交成功！');
			$("#mod-account").modal("toggle");
			reloadGrid();
		}else
			alert(result.message);
	});
}
</script>