@extends('layouts.base')
@section('title', "导入分类")
@section('content')
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods.css')}}"/>

<script type="text/javascript">
function show_task_alert(msg){
	$("#task_alert span").html(msg);
	$("#task_alert").show();
}
function hide_task_alert(){
	$("#task_alert").hide();
}
</script>

<div class="rightlist">
	<div id="app" >
		<div class="second-list" >
			<div class="third-list">
				<div class="form-list">
                   <div class="form-list-con" style="display:flex;margin:0 15px;padding-bottom:15px;">
                        <div style="flex:1">
                            <div style="font-size:24px;font-weight:700;">导入分类</div>
                        	<div style="color:red;padding:10px 0;font-weight:600"></div>
                        </div>
                        <div style="flex:1;text-align:right"></div>
                   </div>
                </div>
                
                <div class="table-list" style="padding:10px 15px;">
                	<div id="task_alert" class="alert alert-danger" role="alert" style="display:none"><span></span></div>
	
                	<div id="">
    					<div class="form-group">
                        	<label class="control-label"><b>来源</b></label>
                        	<select id="source" class="form-control" style="width:300px">
                            	<option value="">请选择</option>
                            	<option value="1">云仓</option>
                            	<option value="2">京东</option>
                            	<option value="6">阿里巴巴</option>
                        	</select>
                        	<p class="help-block"></p>
                      	</div>
                      	
                      	<div id="import_set" style="display:none">
                      		<div class="form-group">
                            	<label class="control-label"><b>是否启用分类</b></label>
                            	<div>
                            		<label class="radio-inline">
                                      <input type="radio" name="enabled" value="1"> 是
                                    </label>
                                    <label class="radio-inline">
                                      <input type="radio" name="enabled" value="0" checked> 否
                                    </label>
                            	</div>
                            	<p class="help-block"></p>
                          	</div>
                    		
                    	</div>
                      	
                      	<button onclick="get_categorys(this)" type="button" class="btn btn-primary">获取分类</button>
                    	<button id="import_categorys_btn" onclick="import_categorys(this)" type="button" class="btn btn-danger" style="display:none;">导入分类</button>
                    </div>
                
                	
                    
                
                	<div id="running_info" style="display:none;margin-top:15px;font-size:11px;background:#eee;padding:10px 10px;">
                		<div style="border-bottom:1px solid #ddd;margin-bottom:10px;"><b id="running_info_tt">分类获取中...</b><span id="got_total_count"></span></div>
                		<div id="running_info_body" style="height:300px;overflow:auto;"></div>
                	</div>
                	
                	<div id="progress" class="progress" style="display:none;height:20px">
                      <div class="progress-bar progress-bar-info" style="width: 0%;text-align:center;">
                       0%
                      </div>
                    </div>
                	
                </div>
                
       		</div>
		</div>
	</div>
	
	<div id="import_logs_con" style="display:none;margin:30px 10px;background:white;padding:10px 10px;">
		<div style="padding:5px 0px;border-bottom:1px solid #ddd;">
			<span>导入记录：</span>
		</div>
		<div style="">
			<ul id="import_logs" style="margin:0;padding:0;width:100%;height:300px;overflow:auto;">
			</ul>
		</div>
	</div>
	
</div>

<script>
var category_list = [], timer;
var fn_calling = false;
function get_categorys(dom){

	var source = $("#source").val();
	$("#source").closest(".form-group").removeClass("has-error");
	$("#source").closest(".form-group").find(".help-block").html("");
	if(source.length <= 0){
		$("#source").closest(".form-group").addClass("has-error");
		$("#source").closest(".form-group").find(".help-block").html("请选择来源");
		return;
	}

	$(dom).attr("disabled", true);
	$(dom).hide();
	$("#source").attr("disabled", true);
	$("#running_info").show();
	$("#running_info_tt").html("请稍后，正在计算分类数量...");
	
	get_max_num(source, function(max){
		ajax_get(source, 0, function(rs){
			var htmls = "";
			for(var i=0; i < rs.categorys.length; i++){
				htmls += '<p>'+rs.categorys[i].title+'</p>';
				rs.categorys[i]['level'] = 0;
				category_list.push(rs.categorys[i]);
			}
			$("#running_info_body").html(htmls);
		});

		timer = setInterval(function(){
			
			var num = parseInt((100 * (category_list.length/max)));
			$("#progress .progress-bar").css("width", num+"%");
			$("#progress .progress-bar").html(num+"%");
			
			if(category_list.length > 0){
				get_childs(source);
			}
			$("#got_total_count").html(category_list.length);
		}, 10);

		show_task_alert("正在执行分类获取任务！请勿进行其他任何操作");
	});
}

//通过二分算法获取分类数量
function get_max_num(source, fn){
	var url = "{!! yzWebUrl('plugin.jd-supply.admin.import-categorys.test-max-num') !!}";
	var n1 = 0, n2 = 100000, timer;
	var loop_fn = function(){
		if(fn_calling) return;
		fn_calling = true;
		ajax_json(url, "post", "n1="+n1+"&n2="+n2+"&source="+source, function(rs, status, xhr){
			console.log(rs);
			if(rs.finished == 0){
				n1 = rs.n1;
				n2 = rs.n2;
			}else{
				clearInterval(timer);
				$("#running_info_tt").html("一共"+rs.max+"个分类。分类获取中...");
				$("#progress").show();
				fn.call(this, rs.max);
			}
			
			fn_calling = false;
		});
	};

	timer = setInterval(function(){
		loop_fn();
	}, 10);
}

function get_childs(source){
	if(fn_calling) return;
	fn_calling = true;
	
	var n = null;
	for(var i=0; i < category_list.length; i++){
		if(!category_list[i].has_got_child){
			n = i;
			break;
		}
	}
	if(n == null){
		clearInterval(timer);
		fn_calling = false;
		$("#import_set").show();
		$("#import_categorys_btn").show();
		$("#import_categorys_btn").html("导入"+category_list.length+"个分类");
		$("#running_info").html('<p>获取成功，一共获取到'+category_list.length+'个分类</p>');
		hide_task_alert();
		$("#progress").hide();
		return;
	}

	/* if(category_list.length >= 500){
		clearInterval(timer);
		fn_calling = false;
		category_list[n].has_got_child = true;
		$("#import_set").show();
		$("#import_categorys_btn").show();
		$("#import_categorys_btn").html("导入"+category_list.length+"个分类");
		$("#running_info").html('<p>获取成功，一共获取到'+category_list.length+'个分类</p>');
		hide_task_alert();
		return;
	}  */

	ajax_get(source, category_list[n].id, function(rs){
		category_list[n].has_got_child = true;
		fn_calling = false;
		var htmls = "";
		for(var i=0; i < rs.categorys.length; i++){
			htmls += '<p>'+rs.categorys[i].title+'</p>';
			rs.categorys[i]['level'] = category_list[n].level + 1;
			if(rs.categorys[i]['level'] >= 2){
				rs.categorys[i]['has_got_child'] = true;
			}
			category_list.push(rs.categorys[i]);
		}
		if(htmls.length <= 0){
			htmls += '<p>'+category_list[n].title+' 无子分类</p>';
		}
		$("#running_info_body").html(htmls);
	});
}

function ajax_get(source, parent_id, fn){
	var url = "{!! yzWebUrl('plugin.jd-supply.admin.import-categorys.api-get') !!}";
	ajax_json(url, "post", "source="+source+"&parent_id="+parent_id, function(rs, status, xhr){
		if(rs.status != 1){
			$("#running_info_body").html(rs.message);
			ajax_get(source, parent_id, fn);
			return;
		}
		for(var i=0; i < rs.categorys.length; i++){
			rs.categorys[i]['has_got_child'] = false;
		}
		fn.call(this, rs);
	});
}

function import_categorys(dom){
	if(!confirm("确定要导入分类吗？"))
		return;
	for(var i=0; i < category_list.length; i++){
		category_list[i]['has_imported'] = false;
	}
	$(dom).attr("disabled", true);
	$("#progress").show();
	$("#import_logs_con").show();
	show_task_alert("正在执行分类导入任务！请勿进行其他任何操作");
	
	//获取设置
	$("input[name='enabled']").attr("disabled", true);
	var enabled = $("input[name='enabled']:checked").val();

	timer = setInterval(function(){
		var total = category_list.length, imported_count = 0;
		for(var i=0; i < category_list.length; i++){
			if(category_list[i].has_imported){
				imported_count += 1;
			}
		}
		var num = parseInt((100 * (imported_count/total)));
		$("#progress .progress-bar").css("width", num+"%");
		$("#progress .progress-bar").html(num+"%");
		import_func(enabled);
	}, 10);
}

function ajax_json(url, method, data, fn){
	var options = {};
	options['url'] 	    = url;
	options['timeout']	= 10000;
	options['dataType'] = "json";
	options['type'] 	= method;
	options['data']		= data;
	options['success']  = function(rs, status, xhr){
		fn.call(this, rs, status, xhr);
	}
	options['error'] 	= function(xhr, status, error){
		console.log(error+":"+status);
		ajax_json(url, method, data, fn);
	}
	$.ajax(options);
}

function import_func(enabled){
	if(fn_calling) 
		return;
	fn_calling = true;
	
	var n = null;
	for(i=0; i < category_list.length; i++){
		if(!category_list[i].has_imported){
			n = i;
			break;
		}
	}

	if(n == null){
		$("#running_info").html("导入完毕！");
		clearInterval(timer);
		fn_calling = false;
		hide_task_alert();
		return;
	}

	var ajax_fn = function(title, parent_id, level, fn){
		var url = "{!! yzWebUrl('plugin.jd-supply.admin.import-categorys.import') !!}";
		var options = {};
		options['url'] 	    = url;
		options['timeout']	= 10000;
		options['dataType'] = "json";
		options['type'] 	= "post";
		options['data']		= "enabled="+enabled+"&title="+title+"&parent_id="+parent_id+"&level="+level;
		options['success']  = function(rs, status, xhr){
			if(rs.status != 1){
				$("#running_info_body").html(rs.message);
				ajax_fn(title, parent_id, level, fn);
				return;
			}
			fn.call(this, rs);
		}
		options['error'] 	= function(xhr, status, error){
			ajax_fn(title, parent_id, level, fn);
		}
		$.ajax(options);
	};

	//处理父分类ID
	var parent_id = 0, level = 0;
	if(category_list[n].parent_id > 0){ //找到本地分类
		parent_id = -1;
		for(i=0; i < category_list.length; i++){
			if(category_list[n].parent_id == category_list[i].id){
				parent_id = category_list[i].local_id;
				level = category_list[i]['local_level'] + 1;
				break;
			}
		}
	}

	//剩余未导入
	var last_count = 0;
	for(i=0; i < category_list.length; i++){
		if(!category_list[i].has_imported){
			last_count += 1;
		}
	}

	if(parent_id < 0){
		alert("分类异常！！！");
		return;
	}

	ajax_fn(category_list[n].title, parent_id, level, function(rs){
		$("#running_info").html(category_list[n].title+"导入成功!父ID:"+parent_id+"。剩余："+(last_count-1)+"个分类");
		$("#import_logs").prepend('<li style="margin-bottom:10px;"><font>'+category_list[n].title+'</font></li>');
		category_list[n]['local_level']  = rs.level;
		category_list[n]['local_id'] 	 = rs.insert_id;
		category_list[n]['has_imported'] = true;
		fn_calling = false;
	});
}
</script>

@endsection