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

{% block script %}
	<script type="text/javascript">
		function AngularAction($scope,$http,$location,$timeout){
			$scope.weixinId='{{ weixinId }}';
			$scope.topbar='亲人';
			if(location.href.split('?')[1]){
				if(location.href.split('?')[1].split('&')[0] == 'backSelect') $scope.topbarReturn=true;
			}
			getContactList($scope,$http);
			$scope.contactList=[];
			$scope.contactInfo = {
				'name':'',
				'telephone':''
			}
			$scope.contactCancle = function(){
				$scope.newContact = false;
			}
			$scope.contactDelete = function(target,index){
				if(!$scope.doCreate) return;
				myConfirm('确定删除吗？',function(){
					$scope.doCreate = false;
					var json={
						'weixinId':$scope.weixinId,
						'id':target.contact.id
					}
					httpAction(
						$http,
						'/api/user/contact',
						'delete',
						json,
						function(data,textStatus){
							$scope.contactList.splice(index,1);
							$scope.doCreate = true;
						},
						function(errno,errmsg){
							alert(errmsg);
							$scope.doCreate = true;
						}
					);
				});
			}
			$scope.addContact=function(target){
				/*$scope.contactList.push({
					'id':0,
					'name':'',
					'telephone':''
				});*/
				$scope.newContact = true;
			};

            $scope.changeTelephone=function(target){
                location.href = apiPath('/main/user/changeTelephone');
            };

			$scope.contactCreate = function(){
				/*var flag = true;
				$.each($scope.contactList,function(index,content){
					if(!checkPhone(content.telephone)){
						flag = false;
						return false;
					}
				});
				if(flag){*/
					if(!$scope.doCreate) return;
					if(!checkNull($scope.contactInfo.name,'请填写亲人姓名')) return;
					if(!checkPhone($scope.contactInfo.telephone,'请填写亲人电话',true)) return;
					$scope.doCreate = false;
					$scope.contactInfo.weixinId = $scope.weixinId;
					httpAction(
						$http,
						'/api/user/contact',
						'post',
						$scope.contactInfo,
						function(data,textStatus){
							$scope.contactList.push($scope.contactInfo);
							$scope.contactInfo = {
								'name':'',
								'telephone':''
							}
							$scope.hasContact = true;
							$scope.doCreate = true;
							$scope.newContact = false;
						},
						function(errno,errmsg){
							alert(errmsg);
							$scope.doCreate = true;
						}
					);
				//}
			}
		}
	function getContactList($scope,$http)
	{
		var weixinId = $scope.weixinId;
		httpAction(
			$http,
			'/api/user/contact/'+weixinId,
			'get',
			{},
			function(data,textStatus){
				$scope.contactList=data.rows;
				if($scope.contactList.length > 0) $scope.hasContact = true;
			},
			function(errno,errmsg){
				alert(errmsg);
			}
		);
	}
	</script>
{% endblock %}

{% block css %}
<style type="text/css">
	#contact-content {
		font-size: 28px;
		padding-top: 65px;
	}
	#contact-desc {
		width: 100%;
		height: auto;
		min-height: 110px;
		border: 0px;
		overflow-y: visible;
		line-height: 1.5em;
		margin-bottom: 15px;
	}
	input[type=text] {
		margin:0px;
		padding:20px 20px 10px 20px;
		height:80px;
		font-size:32px;
		font-weight:bold;
		color:#333333;
		border-width:0px 0px 1px 0px;
		border-style:solid;
		border-color:#c0c0c0;
		border-radius:0px;
		-webkit-box-shadow: inset 0 0px 0px rgba(0,0,0,0.075);
		-moz-box-shadow: inset 0 0px 0px rgba(0,0,0,0.075);
		box-shadow: inset 0 0px 0px rgba(0,0,0,0.075);
	}
	.contact-list{
		margin-bottom:15px;
	}
	.contact-create .contact-name {
		float: left;
		width: 48%;
	}
	.contact-create .contact-telephone {
		width: 48%;
		float: right;
	}
	.contact-show .contact-name{
		float: left;
		width: 30%;
	}
	.contact-show .contact-telephone{
		display:table;
		margin:0px auto 0px auto;
		width: 38%;
	}
	.contact-show .contact-delete{
		float:right;
		margin:0px;
		width:20%;
		height:80px;
		line-height:80px;
		text-align:center;
		background-color:#7a7a7a;
	}
	button {
		width: 100%;
		height: 75px;
		border: 0px;
		color: #ffffff;
		font-size: 28px;
		margin-top: 25px;
		margin-bottom:25px;
	}
	#contacts a,
	#contacts .contact-telephone{
		color:rgb(243,152,0);
		text-decoration:underline;
	}
</style>
{% endblock %}

{% block body %}
{% raw %}
<div id="contact-content" ng-init="doCreate=true;">
	<div>
	修改绑定手机:
	<div id="contact-desc">
		修改接收推送的手机号码。
	</div>
	<button class="bc-orange" ng-click="changeTelephone()" style="background-color:#3399ff">修改绑定手机</button>
	</div>

	<br />
	<br />
	<br />

	亲人说明：
	<div id="contact-desc">
		通过添加您的亲人，当您为本人预订用车后，订单信息同时会推送到亲人绑定的优护送公众号中。当您为亲人预订用车后，订单信息会推送给您和预订车辆亲人的优护送公众号中。<br />
		您和您的亲人都可以操作订单完成支付，并可以了解整个护送行程中的详细进展
	</div>
	<div id="contacts" class="contact-show" ng-hide="newContact">
		<div class="contact-list" ng-repeat="contact in contactList" ng-show="hasContact">
			<button class="contact-delete" ng-click="contactDelete(this,$index);">删除</button>
			<input value="" class="contact-name" type="text" ng-model="contact.name" readonly="readonly" />
			<a href="tel:{{contact.telephone}}"><input value="" class="contact-telephone" type="text" ng-model="contact.telephone" readonly="readonly"/></a>
		</div>
		<button class="bc-orange" ng-click="addContact(this)">新建亲人</button>
	</div>
	
	<div class="contact-create" ng-show="newContact">
		<input value="" class="contact-name" type="text" ng-model="contactInfo.name" placeholder="亲人姓名" />
		<input value="" class="contact-telephone"type="text" ng-model="contactInfo.telephone" placeholder="亲人电话" onkeyup="checkNaN(this);" onafterpaste="checkNaN(this);"/>
		<button class="bc-blue" ng-click="contactCreate(this)">保存</button>
		<button class="bc-blue" ng-click="contactCancle();">取消</button>
	</div>
</div>
{% endraw %}
{% endblock %}