var areaList=[],officeList=[],areaId="",officeId="",provinLeng,cityLeng ;

$(document).ready(function(){
    $(".Regional").click(function(){
    	event.stopPropagation();
        if ($('.grade-eject').hasClass('grade-w-roll')) {
            $('.grade-eject').removeClass('grade-w-roll');
			$(this).removeClass('current');
        } else {
            $('.grade-eject').addClass('grade-w-roll');
			$(this).addClass('current');
        }
        cleanList();
    });
    $(".resBtn").click(function(){
		cleanList();
	})
	$(document).click(function(event) {
		var _con = $('.clickArea'); // 设置目标区域
		if(!_con.is(event.target) && _con.has(event.target).length === 0) { // Mark 1
			$('.grade-eject').removeClass('grade-w-roll');
			$(this).removeClass('current');
		}
	});
    $(".grade-w").on('click', 'li', function() {
    	$(".grade-t").css("left","50%");
    	if ($(this).hasClass("check_active")) {
    		$(this).removeClass("check_active");
    		$(this).children("img").hide();
    		var areaDataRemove=$(this).attr("data-index");
    		Array.prototype.indexOf = function (val) {
				for(var i = 0; i < this.length; i++){
				  if(this[i] == val){return i;}
				}
				return -1;
			}
			Array.prototype.remove = function (val) {
			 	var index = this.indexOf(val);
			 	if(index > -1){this.splice(index,1);}
			}
			areaList.remove(areaDataRemove); 
			$(".grade-t li img").hide();
			$(".mui-checkbox input").removeAttr("checked")
    	} else{
    		var areaData=$(this).attr("data-index");
    		if ($(".mui-checkbox input").attr("checked")) {
  				areaList=[];
    			var allCheck=$(".grade-w li").length;    
    			for (var i=0; i<allCheck; i++ ) {
					areaData=$(".grade-w li").eq(i).attr("data-index");
	    			areaList.push(areaData); 
				}
    		}else{ 
				if ($(this).children("img").is(':hidden')) {
					areaList.push(areaData);   
				}
    			if (provinLeng==areaList.length) {  
    				$(".mui-checkbox input").attr("checked", "checked");
    			}
    			
      		}
			$(this).addClass("check_active");
    		$(this).children("img").show();
    		$('#gradet li').remove();
	    	//	产品代码
			$.ajax({
				type: "get",
				url: huayi.config.callcenter_url + 'Department/GetCusAreaList',
				async: false,
				data: {
					pid:$(this).attr("data-index"),
					F_Layer: 2,
					token:localStorage.getItem("token")
				},
				dataType: 'json',
				success: function(res) {
					if(res.state.toLowerCase() === "success") {
						res = res.data;
						cityLeng = res.length;
						if(res && cityLeng > 0) {
							res.forEach(function(v, i) {
								var officeData=v.F_DeptId;
								officeList.push(officeData);
								$('<li data-index="'+v.F_DeptId+'">'+v.F_DeptName+
								'<img src="../img/check_true.png"/></li>').appendTo('#gradet')
							});
						}
					}
				}
			});	
    	}
    	
	})
    
    $(".grade-t").on('click', 'li', function() {
    	
    	if ($(this).children("img").is(':visible')) {
    		$(this).removeClass("check_active") 
    		$(this).children("img").hide();
    		var officeDataRemove=$(this).attr("data-index");
    		Array.prototype.indexOf = function (val) {
				for(var i = 0; i < this.length; i++){
				  if(this[i] == val){return i;}
				}
				return -1;
			}
			Array.prototype.remove = function (val) {
			 	var index = this.indexOf(val);
			 	if(index > -1){this.splice(index,1);}
			}
			officeList.remove(officeDataRemove);
    	} else{
    		$(this).addClass("check_active");
    		$(this).children("img").show();
    		var officeData=$(this).attr("data-index");
    		officeList.push(officeData);
    	}
    })
    //	产品代码
	$.ajax({
		type: "get",
		url: huayi.config.callcenter_url + 'Department/GetCusAreaList',
		async: false,
		data: {
			pid: 1,
			F_Layer: 1,
			token:localStorage.getItem("token")
		},
		dataType: 'json',
		success: function(res) {
			if(res.state.toLowerCase() === "success") {
				res = res.data;
				provinLeng = res.length;
				if(res && provinLeng > 0) {
					res.forEach(function(v, i) {
						$('<li data-index="'+v.F_DeptId+'" lenTh="'+ res.length+'">'+v.F_DeptName+
						'<img src="../img/check_true.png"/></li>').appendTo('#gradew')
					});
				}
			}
		}
	});	
});
mui('.mui-checkbox').on('change', 'input', function() {
	if(this.checked){
		areaList=[];
		$(".grade-w li").removeClass("check_active");
		var allCheck=$(".grade-w li").length;
		$(".grade-w li img").show();
		for (var i=0; i<allCheck; i++ ) {
			var areaData=$(".grade-w li").eq(i).attr("data-index");
    		areaList.push(areaData); 
		}
	}else{
		$(".grade-w li img").hide();
		$(".grade-t li img").hide();
		areaList=[];
		officeList=[];
	}
	
	
});
function cleanList () {
	areaList=[],officeList=[],areaId="",officeId="";
	$(this).removeClass("check_active");
	$(this).children("img").hide();
	$(".grade-w li").removeClass("check_active");
	$(".grade-w li img").hide();
	$(".grade-t li").removeClass("check_active");
	$(".grade-t li img").hide();
	$('#gradet li').remove();
}
function areaD() {
	for (var i=0, l=areaList.length; i<l; i++) {
		areaId += areaList[i]+ ","
	}
	if (areaList.length > 0 ) {
		areaId = areaId.substring(0, areaId.length-1);
		$('#AreaId').val(areaId);
	}
}

function officeD() {
	for (var i=0, l=officeList.length; i<l; i++) {
		officeId += officeList[i]+ ","
	}
	if (officeList.length > 0 ) {
		officeId = officeId.substring(0, officeId.length-1);
		$('#OfficeId').val(officeId);
	}
}