{% extends 'MirrorOamBundle:Base:base.html.twig' %}

{% block style %}
<style type="text/css">
#employee-table td,
#password-table td {
	height: 40px;
}
#employee-table input,
#password-table input{
	width:200px;
}
#split-page {
	text-align: center;
}
#employee-info,
#password-info{
	width: 50%;
	height: 400px;
	left: 0px;
	right: 0px;
	top: 100px;
	margin: 0px auto;
	background-color: #ffffff;
}
.modal-body {
	height: 240px;
	max-height: 240px;
	overflow-y: scroll;
}
.modal-body>div {
	margin-bottom: 8px;
}
.modal-body>div>.close {
	line-height: 35px;
}
.modal-body .form-control {
	width: 30%;
	display: inline-block;
}
.form-control {
	width: auto;
	display: inline-block;
}
</style>
{% endblock %}

{% block content %}
{% raw %}
<div ng-controller="employeeListController">
	<h1 class="page-header">主审管理</h1>
	<div class="page-header">
		手机号：
		<input ng-model="search.telephone" type="text" class="form-control" />
		城市：
		<select class="form-control" ng-change="SelectProvince(this,1)" ng-model="endProvinceInfo">
			<option ng-repeat="province in provinceEnd" value="{{province}}" ng-selected="search.cityArr.r1Code=={{province.code}}">
				{{province.name}}
			</option>
		</select>
		<select class="form-control" ng-change="SelectCity(this,1)" ng-model="endCityInfo">
			<option ng-repeat="city in cityEnd" value="{{city}}" ng-selected="search.cityArr.r2Code=={{city.code}}">
				{{city.name}}
			</option>
		</select>
		<select class="form-control" ng-change="SelectRegion(this,1)" ng-model="endRegionInfo">
			<option ng-repeat="region in regionEnd" value="{{region}}" ng-selected="search.cityArr.r3Code=={{region.code}}">
				{{region.name}}
			</option>
		</select>
		<button class="form-control" ng-click="searchEmployeeList(this)">搜索</button>
	</div>
	<div class="table-responsive">
		<table class="table table-striped">
			<thead>
		        <tr>
		          <th>#</th>
		          <th>手机号</th>
                  <th>姓名</th>
		          <th>负责城市</th>
		          <th>操作</th>
		        </tr>
	      </thead>
	      <tbody>
	        <tr ng-repeat="staffs in staffList">
	        	<td>{{staffs.id}}</td>
	        	<td>{{staffs.telephone}}</td>
                <td>{{staffs.realName}}</td>
	        	<td>{{staffs.cityName}}</td>
	        	<td><a href="#" data-target="#employee-info" role="button" data-toggle="modal" ng-click="setEmployeeInfo(this)" >修改信息</a>&nbsp;&nbsp;&nbsp;<a href="#" data-target="#password-info" role="button" data-toggle="modal" ng-click="setPassword(this)" >修改密码</a></td>
	        </tr>
	      </tbody>
		</table>
	</div>

	<div id="split-page" style="display:none;">
		<tm-pagination conf="paginationConf"></tm-pagination>
	</div>

	<div id="employee-info" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-header">
		    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="cleanDetail(this)">×</button>
		    <h3 id="myModalLabel">修改</h3>
	  </div>
	  <div class="modal-body">
	  	<div>
	  		<table id="employee-table" width="">
	  			<tr>
	  				<td>
				  		手机号：
				  	</td>
				  	<td>
				  		<input type="text" class="form-control" placeholder="" ng-model="saveInfo.telephone" />
				  	</td>
			  	<tr/>
				<tr>
					<td>
						姓名：
					</td>
					<td>
						<input type="text" class="form-control" placeholder="" ng-model="saveInfo.name" />
					</td>
				<tr/>
				<tr>
					<td>城市:</td>
					<td>
						<select class="form-control" ng-change="SelectProvince(this)" ng-model="endProvinceInfo">
							<option ng-repeat="province in provinceModify" value="{{province}}" ng-selected="saveInfo.cityArr.r1Code=={{province.code}}">
								{{province.name}}
							</option>
						</select>
						<select class="form-control" ng-change="SelectCity(this)" ng-model="endCityInfo">
							<option ng-repeat="city in cityModify" value="{{city}}" ng-selected="saveInfo.cityArr.r2Code=={{city.code}}">
								{{city.name}}
							</option>
						</select>
						<select class="form-control" ng-change="SelectRegion(this)" ng-model="endRegionInfo">
							<option ng-repeat="region in regionModify" value="{{region}}" ng-selected="saveInfo.cityArr.r3Code=={{region.code}}">
								{{region.name}}
							</option>
						</select>
					</td>
				</tr>
	  		</table>
	  	</div>
	  </div>
	  <div class="modal-footer">
	    <button class="btn" data-dismiss="modal" ng-click="cleanDetail(this)">关闭</button>
	    <button class="btn btn-primary" ng-click="update(this)">保存</button>
	  </div>
	</div>

	<div id="password-info" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-header">
		    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="cleanDetail(this)">×</button>
		    <h3 id="myModalLabel">修改</h3>
	  </div>
	  <div class="modal-body">
	  	<div>
	  		<table id="password-table" width="">
				<tr>
					<td>新密码:</td>
					<td>
						<input class="form-control" ng-model="pwdInfo.password" type="password" />
					</td>
				</tr>
				<tr>
					<td>确认密码:</td>
					<td>
						<input class="form-control" ng-model="pwdInfo.repassword" type="password" />
					</td>
				</tr>
	  		</table>
	  	</div>
	  </div>
	  <div class="modal-footer">
	    <button class="btn" data-dismiss="modal" ng-click="cleanDetail(this)">关闭</button>
	    <button class="btn btn-primary" ng-click="changPwd(this)">保存</button>
	  </div>
	</div>
</div>
{% endraw %}
{% endblock %}

{% block script %}
<script type="text/javascript" src="{{ asset('bundles/mirroroam/js/tm-pagination.js') }}"></script>
<script type="text/javascript">
angular.module('myApp',['tm.pagination'])
	.controller('employeeListController',function($scope,$http){
		init($scope,$http);
	});
function init($scope,$http)
{
	$scope.employee={};
	$scope.search={};
	$scope.cleanDetail=function(){
		getDirectorList($scope,$http);
	};
	$scope.searchEmployeeList=function(target){
		getDirectorList($scope,$http);
		//alert(angular.toJson($scope.search));
	};
	$scope.SelectProvince=function(target,type){
		var targetInfo = $.evalJSON(target.endProvinceInfo);
		if(type){
			$scope.search.cityCode=targetInfo.code;
			getCityArr($scope,$http,targetInfo.code,2);
		}
		else{
			modifyCityArr($scope,$http,targetInfo.code,2);
		}
	};
	$scope.SelectCity=function(target,type){
		var targetInfo = $.evalJSON(target.endCityInfo);
		if(type){
			$scope.search.cityCode=targetInfo.code;
			getCityArr($scope,$http,targetInfo.code,3);
		}
		else{
			$scope.saveInfo.cityCode=targetInfo.code;
			modifyCityArr($scope,$http,targetInfo.code,3);
		}
	};
	$scope.SelectRegion=function(target,type){
		var targetInfo = $.evalJSON(target.endRegionInfo);
		if(type){
			$scope.search.cityCode=targetInfo.code;
		}
		else{
			$scope.saveInfo.cityCode=targetInfo.code;
		}
	};
	
	$scope.setEmployeeInfo=function(target){
		$scope.saveInfo = target.staffs;
		//console.log(target.staffs);
		modifyCityArr($scope,$http,0,1,$scope.saveInfo.cityArr.r1Code,$scope.saveInfo.cityArr.r2Code);
	};

	$scope.setPassword=function(target){
		$scope.pwdInfo = {};
		$scope.pwdInfo.id = target.staffs.id;
	};

	$scope.update = function(){
		//alert(angular.toJson($scope.saveInfo));
		httpOther(
			$http,
			apiPath('/api/director/update'),
			'post',
			$scope.saveInfo,
			function(data,textStatus){
				alert('修改成功');
 				$('#employee-info').modal('hide');
//				$('.modal-backdrop').remove();
				getDirectorList($scope,$http);
			},
			function(errno,errmsg){
				alert(errmsg);
			}

		);
	}

	$scope.changPwd = function(){
		//alert(angular.toJson($scope.pwdInfo));
		if($scope.pwdInfo.password != $scope.pwdInfo.repassword){
			alert('两次密码不同，请重新输入');
			return;
		}
		httpOther(
			$http,
			apiPath('/api/director/change/password'),
			'post',
			$scope.pwdInfo,
			function(data,textStatus){
				alert('修改成功');
				$('#password-info').hide();
				$('.modal-backdrop').remove();
			},
			function(errno,errmsg){
				alert(errmsg);
			}
		);
	}

	$scope.focusEmployee={};
	$scope.paginationConf = {
        currentPage: 1,
        itemsPerPage: 100,
        pagesLength: 90,
        onChange: function(){
        }
    };
	$("#check-manage").addClass('active');
	$("#check-list").addClass("active");
	$("#check-manage-list").addClass('in');
	getCityArr($scope,$http,0,1);
    getDirectorList($scope,$http);
}

function getDirectorList($scope,$http)
{
	var currentPage=$scope.paginationConf.currentPage;
	var json={
		'telephone':$scope.search.telephone,
		'page':currentPage ? currentPage : 1,
		'rows':$scope.paginationConf.itemsPerPage,
		'cityCode':$scope.search.cityCode
	}
	httpOther(
		$http,
		apiPath('/api/director/search'),
		'post',
		json,
		function(data,textStatus){
			$scope.staffList=data.rows;
			$scope.paginationConf.totalItems=data.total;
			$scope.paginationConf.onChange=function(){
				getDirectorList($scope,$http);
			};
		},
		function(errno,errmsg){

		}

	);
}

function getCityArr($scope,$http,value,type){
	httpOther($http,apiPath('/api/region/list/'+value),'GET',
		{},
		function(response){
			switch(type){
				case 1:
					$scope.provinceEnd = response.regionList;
					getCityArr($scope,$http,$scope.provinceEnd[0].code,2);
				break;
				case 2:
					$scope.cityEnd = response.regionList;
					getCityArr($scope,$http,$scope.cityEnd[0].code,3);
				break;
				case 3:
					$scope.regionEnd = response.regionList;
				break;
			}
		},
		function(errno,errmsg){

	});
}

function modifyCityArr($scope,$http,value,type,firatValue,nextValuse){
	httpOther($http,apiPath('/api/region/list/'+value),'GET',
		{},
		function(response){
			switch(type){
				case 1:
					$scope.provinceModify = response.regionList;
					if(firatValue)
						if(nextValuse)
							modifyCityArr($scope,$http,firatValue,2,nextValuse);
					else
						modifyCityArr($scope,$http,$scope.provinceModify[0].code,2);
				break;
				case 2:
					$scope.cityModify = response.regionList;
					if(value)
						modifyCityArr($scope,$http,firatValue,3);
					else
						modifyCityArr($scope,$http,$scope.cityModify[0].code,3);
				break;
				case 3:
					$scope.regionModify = response.regionList;
				break;
			}
		},
		function(errno,errmsg){

	});
}
</script>
{% endblock %}