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

{% block style %}
<style type="text/css">
.form-control {
	width: auto;
	display: inline-block;
}
.placeholders {
	text-align: left;
	margin-top: 40px;
}
.td {
	height: 50px;
}
.td-first {
	display: inline-block;
	width: 90px;
}
</style>
{% endblock %}

{% block content %}
{% raw %}
<div ng-controller="employeeController">
	<h1 class="page-header">添加员工</h1>
	<div class="placeholders">
		<div class="td">
			<div class="td-first">
				手机号：
			</div>
			<input type="text" class="form-control" value="" ng-model="employee.telephone" />
	</div>
		<div class="td">
			<div class="td-first">
				密码：
			</div>
			<input type="password" class="form-control" value="" ng-model="employee.password" />
		</div>
		<div class="td">
			<div class="td-first">
				真实姓名：
			</div>
			<input type="text" class="form-control" value="" ng-model="employee.realname" />
		</div>
		<div class="td">
			<div class="td-first">
				职位：
			</div>
			<select ng-model="roleType" class="form-control" ng-options="role.showValue for role in roleTypeArr" ng-change="selectRoleType(this)" ></select>
		</div>
		<div class="td">
			<div class="td-first">
				组织：
			</div>
			<select ng-model="organization" class="form-control" ng-options="org.name for org in organizationList" ng-change="selectOrganization(this)"></select>
		</div>
		<div class="td">
			<div class="td-first">
				城市：
			</div>
	  		<select class="form-control" ng-change="SelectProvince(this)" ng-model="endProvinceInfo">
				<option ng-repeat="province in provinceEnd" value="{{province}}" ng-selected="employee.cityArr.r1Code=={{province.code}}">
					{{province.name}}
				</option>
			</select>
			<select class="form-control" ng-change="SelectCity(this)" ng-model="endCityInfo">
				<option ng-repeat="city in cityEnd" value="{{city}}" ng-selected="employee.cityArr.r2Code=={{city.code}}">
					{{city.name}}
				</option>
			</select>
			<select class="form-control" ng-change="SelectRegion(this)" ng-model="endRegionInfo">
				<option ng-repeat="region in regionEnd" value="{{region}}" ng-selected="employee.cityArr.r3Code=={{region.code}}">
					{{region.name}}
				</option>
			</select>
		</div>
		<div class="td">
			<button class="form-control" ng-click="create(this)">添加</button>
		</div>
	</div>
</div>
{% endraw %}
{% endblock %}

{% block script %}
<script type="text/javascript">
angular.module('myApp',[])
	.controller('employeeController',function($scope,$http){
		$scope.employee={};
		$scope.end = {
			'province':'省份',
			'city':'城市',
			'region':'区/县'
		};
		$scope.selectOrganization=function(target){
			$scope.employee.organizationId=target.organization.id;
			console.log($scope.employee);
		};
		$scope.selectRoleType=function(target){
			$scope.employee.roleType=target.roleType.realValue;
		};
		$scope.create=function(target){
			createEmployee($scope,$http);
		};
		$scope.SelectProvince=function(target){
			var targetInfo = $.evalJSON(target.endProvinceInfo);
			$scope.end.province = targetInfo.name;
			$scope.end.city = '城市';
			$scope.end.region = '区/县';
			getCityArr($scope,$http,targetInfo.code,2);
		};
		$scope.SelectCity=function(target){
			var targetInfo = $.evalJSON(target.endCityInfo);
			$scope.end.city = targetInfo.name;
			$scope.end.region = '区/县';
			$scope.employee.cityCode=targetInfo.code;
			getCityArr($scope,$http,targetInfo.code,3);
		};
		$scope.SelectRegion=function(target){
			var targetInfo = $.evalJSON(target.endRegionInfo);
			$scope.end.region = targetInfo.name;
			if(targetInfo.code)
				$scope.employee.cityCode=targetInfo.code;
		};
		$("#employee-manage").addClass('active');
		$("#employee-create").addClass("active");
		$("#employee-manage-list").addClass('in');
		getCityArr($scope,$http,0,1);
		getRoleType($scope,$http);
		getOrganizationList($scope,$http);
	});
	function getOrganizationList($scope,$http)
	{
		httpOther(
			$http,
			apiPath('/api/organization/search'),
			'post',
			'',
			function(data,textStatus){
				$scope.organizationList=data.rows;
			},
			function(errno,errmsg){
				$scope.organizationList=[];
			}
		);
	}
	function getRoleType($scope,$http)
	{
		httpOther(
			$http,
			apiPath('/api/dict/key/3'),
			'get',
			'',
			function(data,textStatus){
				$scope.roleTypeArr=data.valueList;
			},
			function(errno,errmsg){
				$scope.roleTypeArr=[];
			}
		);
	}
	function checkInfo(employee)
	{
		if(!employee.telephone)
		{
			alert('手机号不能为空');
			return false;
		}
		if(!employee.password)
		{
			alert('密码不能为空');
			return false;
		}
		if(!employee.realname)
		{
			alert('真实姓名不能为空');
			return false;
		}
		if(!employee.roleType)
		{
			alert('请选择职位');
			return false;
		}
		if(!employee.organizationId)
		{
			alert('请选择组织');
			return false;
		}
		if(!employee.cityCode)
		{
			alert('请选择所在城市');
			return false;
		}
		return true;
	}
	function createEmployee($scope,$http)
	{
		if(!checkInfo($scope.employee))
			return;
		var json={
			'realname':$scope.employee.realname,
			'cityCode':$scope.employee.cityCode,
			'telephone':$scope.employee.telephone,
			'password':$scope.employee.password,
			'organizationId':$scope.employee.organizationId,
			'roleType':$scope.employee.roleType
		};
		httpOther($http,
			apiPath('/api/employee'),
			'post',
			json,
			function(data,textStatus){
				alert('添加成功');
			},
			function(errno,errmsg){
				alert(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){

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