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

{% block style %}
<style type="text/css">
#organization-table td {
	height: 40px;
}
#organization-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;
}
.form-control {
	width: auto;
	display: inline-block;
}
</style>
{% endblock %}

{% block content %}
{% raw %}
<div ng-controller="organizationListController">
	<h1 class="page-header">组织管理</h1>
	<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="organization in organizationList">
	        	<td>{{ organization.id }}</td>
	        	<td>{{ organization.name }}</td>
                <td>{{organization.phone}}</td>
	        	<td>{{ organization.cityArr.r3Name }}</td>
	        	<td><a href="#" data-target="#organization-info" role="button" data-toggle="modal" ng-click="setOrganizationInfo(this)" >修改</a></td>
	        </tr>
	      </tbody>
		</table>
	</div>
	<div id="organization-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>
	  		名称：
	  		<input value="" type="text" class="form-control"  ng-model="organization.name" />
	  		<br/>
            <br/>
			联系电话：
			<input value="" type="text" class="form-control"  ng-model="organization.phone" />
	  		<br/>
            <br/>
	  		城市：
	  		<select class="form-control" ng-change="SelectProvince(this)" ng-model="endProvinceInfo">
				<option ng-repeat="province in provinceEnd" value="{{province}}" ng-selected="organization.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="organization.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="organization.cityArr.r3Code=={{region.code}}">
					{{region.name}}
				</option>
			</select>
	  	</div>
	  </div>
	  <div class="modal-footer">
	    <button class="btn" data-dismiss="modal" ng-click="cleanDetail(this)">关闭</button>
	    <button class="btn btn-primary" ng-click="save(this)">保存</button>
	  </div>
	</div>
</div>
{% endraw %}
{% endblock %}

{% block script %}
<script type="text/javascript">
angular.module('myApp',[])
	.controller('organizationListController',function($scope,$http){
		init($scope,$http);
	});
function init($scope,$http)
{
	$scope.save=function(target){
		saveOrganization($scope,$http);
	};
	$scope.cleanDetail=function(){
		getOrganizationList($scope,$http);
	};
	//getCityArr($scope,$http,0,1);
	$scope.end = {
		'province':'省份',
		'city':'城市',
		'region':'区/县'
	};
	$scope.organization={
		'id':'',
		'name':'',
		'cityCode':'',
		'cityCodeArr':{}
	}
	$scope.setOrganizationInfo=function(target){
		$scope.organization=target.organization;
		console.log(target.organization);
		getCityArr($scope,$http,0,1,target.organization.cityArr.r1Code,target.organization.cityArr.r2Code);
	};
	$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.organization.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.organization.cityCode=targetInfo.code;
	};
	$("#organization-manage").addClass('active');
	$("#organization-list").addClass("active");
	$("#organization-manage-list").addClass('in');
	getOrganizationList($scope,$http);
}
function saveOrganization($scope,$http)
{
	var json={
		'id':$scope.organization.id,
		'name':$scope.organization.name,
        'phone':$scope.organization.phone,
		'cityCode':$scope.organization.cityCode
	};
	httpOther(
		$http,
		apiPath('/api/organization/update'),
		'put',
		$scope.organization,
		function(data,textStatus){
			alert('修改成功');
			$scope.organizationList=data.rows;
			$("#organizationList-info").modal('hide');
		},
		function(errno,errmsg){
			alert(errmsg);
		}
	);
}
function getOrganizationList($scope,$http)
{
	httpOther(
		$http,
		apiPath('/api/organization/search'),
		'post',
		'',
		function(data,textStatus){
			$scope.organizationList=data.rows;
		},
		function(errno,errmsg){

		}

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

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