$(function(){
	initPhoneData();

	// $("#addOrEdit_div").click(function(){
	// 	var btnHtml=$(this).html();
	// 	if(btnHtml=="应用"){
	// 		var currentTypeId="";
	// 		var typelist=[];
	// 		var errormsg="";
	// 		$("#phonetype-nav li").each(function(){
	// 			if($(this).hasClass("active")){
	// 				currentTypeId=this.id;
	// 			}
	// 			var telephoneObj={};
	// 			var type=$(this).find("input").eq(0).val();
	// 			if(type==undefined){
	// 				type=$(this).find("a").eq(0).html();
	// 			}
	// 			if(type!=null && type!=""){
	// 				var msgre = new RegExp(getUtfRegexp()) ;
	// 				if(!msgre.test(type)){
	// 					errormsg+="电话类型（"+type+"）有不合法字符;<br/>";
	// 					//return false; //跳出each循环
	// 				}
	//
	// 				var phonedata=getPhonesByTypeId(this.id,type);
	// 				errormsg+=phonedata.errormsg;
	// 				var list=phonedata.list;
	// 				if(list.length>0){
	// 					telephoneObj.type=type;
	// 					telephoneObj.list=list;
	// 					typelist.push(telephoneObj);
	// 				}
	// 			}
	//
	// 		});
	// 		if(errormsg==""){//如果输入验证通过
	// 			var telephoneStr=JSON.stringify(typelist);
	// 			$("#hidden_communityTelephone").val(telephoneStr);
	// 			initPhoneData();
	// 			if(currentTypeId==""){
	// 				$("#phonetype-nav li").first().click();
	// 			}else{
	// 				clickPhoneType(currentTypeId);
	// 			}
    //
	// 			$(".editElement").hide();
	// 			$(this).removeClass("apply_btn").addClass("addOrEdit_btn").html("添加/修改");
	// 		}else{//如果输入验证不通过
	// 			alertErrorMsg(errormsg);
	// 		}
	//
	// 	}else{
	// 		$(".editElement").show();
	// 		$(this).addClass("apply_btn").removeClass("addOrEdit_btn").html("应用");
	//
	// 	}
	//
	// });
	

	$("#addTelType_btn").click(function(){
		//用当前毫秒时间戳作为id避免重复
		var timestamp=new Date().getTime();
		var newTypeHtml=' <li role="presentation" id="'+timestamp+'" onclick="clickPhoneType(\''+timestamp+'\')"><a href="#"><input style="width:80px;height: 20px;margin-top: 0px;"  class="form-control form-input"  placeholder="电话类型" title="电话类型"/></a></li>';
		$("#phonetype-nav").append(newTypeHtml);
		scrollTelForm();
		$("#phonetype-nav li").last().click();
	});
	$("#addPhone_btn").click(function(){
		var typeId="";
		$("#phonetype-nav li").each(function(){
			if($(this).hasClass("active")){
				typeId=this.id;
			}
		});
		if(typeId!=""){
			var newPhoneRowHtml=' <div class="row phone_row '+typeId+'" >'+
			' <div class="col-sm-3 col-md-3 col-lg-3 col-sm-offset-1 col-md-offset-1 col-lg-offset-1" style="color: #fff;font-size: 14px;">'+
			' <input style="width:80px;height: 20px;margin-top: 5px;" name="msg" class="form-control form-input"  placeholder="显示内容" title="显示内容"/>'+
			' </div>'+
			' <div class="col-sm-6 col-md-6 col-lg-6" style="color: #fff;font-size: 14px;">'+
			' <input style="width:160px;height: 20px;margin-top: 5px;" name="phone"  class="form-control form-input"  placeholder="电话号码" title="电话号码"/>'+
			' </div>'+
			' <div class="col-sm-2 col-md-2 col-lg-2" style="max-height: 30px;">'+
			' <img src="'+ctx+'/static/images/delete3x.png" height="25px";width="25px"; style="cursor: pointer;" onclick="delPhoneRow(this)">'+
			' </div>'+
			' </div>' ;
			
			$("#phonerows-div").append(newPhoneRowHtml);
			scrollTelForm();
		}
		
	});
	$(".editElement").hide();
	$("#phonetype-nav li").first().click();
});


function initPhoneData(){
	var telephone=$("#hidden_communityTelephone").val();
	if(telephone==null || telephone.trim()==""|| telephone.trim()=="[]"){
		$("#phonetype-nav").html("");
		$("#phonerows-div").html("");
	}else{
		var phonetypeHtml="";
		var phonerowsHtml="";
		//[{"type":"类别","list":[{"msg":"显示内容","phone":"电话号码"}]}]
		var typeObjs=$.parseJSON(telephone);
		for(i=0;i<typeObjs.length;i++){
			phonetypeHtml+='<li role="presentation" id="phonetype-'+i+'" onclick="clickPhoneType(\'phonetype-'+i+'\')"><a href="#" ondblclick="changeToInput(this,1)">'+typeObjs[i].type+'</a></li>';
			
			var phoneObjs=typeObjs[i].list;
			for(j=0;j<phoneObjs.length;j++){
				phonerowsHtml+='<div class="row phone_row phonetype-'+i+'" >'+
					'<div class="col-sm-4 col-md-4 col-lg-4 " ondblclick="changeToInput(this,2)" >'+phoneObjs[j].msg+'</div>'+
					'<div class="col-sm-6 col-md-6 col-lg-6" ondblclick="changeToInput(this,3)">'+phoneObjs[j].phone+'</div>'+
					'<div class="col-sm-2 col-md-2 col-lg-2" style="max-height: 30px;">'+
					'<img src="'+ctx+'/static/images/delete3x.png" height="25px" width="25px" style="cursor: pointer;" class="editElement" onclick="delPhoneRow(this)">'+
					'</div>'+
				'</div>';
			}
			
		}
		
		$("#phonetype-nav").html(phonetypeHtml);
		$("#phonerows-div").html(phonerowsHtml);
		
	}
}


/**
 * 点击电话类型 显示该类型所有电话
 * @param tabid
 */
function clickPhoneType(tabid){
	$("#phonetype-nav li").removeClass("active");
	$("#"+tabid).addClass("active");
	$(".phone_row").hide();
	$("."+tabid).show();
	//如果没有电话信息
//	if($("."+tabid).length==0){
//		var msg="请为此电话类型添加电话内容，若没有电话内容，则此电话类型无效将不会被保存";
//		
//	}
}

/**
 * 删除电话行
 * @param obj
 */
function delPhoneRow(obj){
	$(obj).parent().parent().remove();
}

/**
 * 根据电话类型id查询所有电话信息
 * @param typeId
 */
function getPhonesByTypeId(typeId,typeName){
	var result={};
	//用于存该类型所有电话的数组
	var list = [];
	//用于存放数据验证时的错误信息
	var errormsg="";
	//用于存放空数据条数
	var temp=0;
	//获取该类型所有电话行
	$("."+typeId).each(function(){
		var row = {};
		var msgdiv=$(this).children().eq(0);
		var phonediv=$(this).children().eq(1);
		var msg=msgdiv.find("input").eq(0).val();
		var phone=phonediv.find("input").eq(0).val();
		if(msg==undefined){
			msg=msgdiv.html();
		}
		if(phone==undefined){
			phone=phonediv.html();
		}
		if(msg!=null && msg!="" && phone!=null && phone!="" ){
			var msgre = new RegExp("^([\x09\x0A\x0D\x20-\x7E]|[\u4e00-\u9fa5]|[\uff0c\u3002\u3001\uff1b\u2019\u2018\u3010\u3011\u3001\uff1a\u201c\u201d\u300a\u300b\uff1f\uff01\u00b7\uffe5\u2026\uff08\uff09\u2014\u3007\u3000])+$") ;
			if(!msgre.test(msg)){
				errormsg+="电话类型（"+typeName+"）中显示内容（"+msg+"）有不合法字符;<br/>"
			};
            // var isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
		    // var isMob=/^((\+?86)|(\(\+86\)))?(13[0-9]{9}|15[012356789][0-9]{8}|177[0-9]{8}|18[0-9]{9}|147[0-9]{8})$/;
            var isMob=/(^(0\d{2,3})?-?[1-9]\d{6,7}$)|(^(\d{2})?1[3-9]\d{9}$)|(^([5|6|8|9])\d{7}$)/;
		    if(!isMob.test(phone)){
		    	errormsg+="电话类型（"+typeName+"）中电话号码（"+phone+"）格式不正确;<br/>"
		    }
			
			row.msg = msg;
			row.phone = phone;
			list.push(row);
		}else{
			temp++;
		}
		
	});
	if(temp>0){
		errormsg+="电话类型（"+typeName+"）中存在"+temp+"条空数据;<br/>"
	}
	result.errormsg=errormsg;
	result.list=list;
	return result;
}
//自动滚到底部的滚动条
function scrollTelForm(){
	
	var scroll_pane = $('.scroll-pane');
	$(scroll_pane).css({'padding':'0px','border':'none'});
	scroll_pane.jScrollPane({
		stickToBottom : true,
		animateScroll : true
		
	});
	//去除水平滚动条
	var scroll_x = scroll_pane.find('.jspHorizontalBar');
	$(scroll_x).css('display', 'none');	
	scroll_pane.hover(			
		function () {			
			$(this).find('div.jspVerticalBar').fadeIn("slow");				
		},
		function () {			
			$(this).find('div.jspVerticalBar').fadeOut("slow");				
		}
	);
}

/**
 * 弹窗错误提示
 * @param msg
 */
function alertErrorMsg(msg){
	var x = ($(window).width() - 420 + $('div.viewFramework-sidebar').width())/2;
	var y = ($(window).height() / 2 - 120);
		 //页面层
      layer.open({
        type: 1,
        skin: 'layui-layer-rim', //加上边框
        area: ['420px', '240px'], //宽高
        content: msg,
	  title:'提示',
	  offset: [y+'px', x+'px']
      });
}


/**
 * 将html 变成可编辑的输入框
 * 用于双击电话 修改其内容的时候
 * @param obj
 * @param type
 */
function changeToInput(obj,type){
	var btnHtml=$("#addOrEdit_div").html();
	if(btnHtml=="应用"){
		var value=$(obj).html();
		if(value.indexOf('<input')>=0)
			return;
		if(type==1){
			var htmlstr='<input style="width:80px;height: 20px;margin-top: 0px;"  class="form-control form-input"  placeholder="电话类型" title="电话类型" value="'+value+'"/>';
			$(obj).html(htmlstr);
		}else if(type==2){//显示内容
			var htmlstr=' <input style="width:80px;height: 20px;margin-top: 5px;" name="msg" class="form-control form-input"  placeholder="显示内容" title="显示内容" value="'+value+'"/>';
			$(obj).html(htmlstr);
		}else if(type==3){
			var htmlstr=' <input style="width:160px;height: 20px;margin-top: 5px;" name="phone"  class="form-control form-input"  placeholder="电话号码" title="电话号码" value="'+value+'"/>';
			$(obj).html(htmlstr);
		}
	}
	
}