var $=require('jquery');

function tabTree(ele,options){
	var defaults = {
		innerHtml: ' <a href="javascript:void(0);"  class="cityboxbtn" ></a>' + '<div class="citybox">' + '<div class="chooseArea">' + "</div>" + '<div  class="arriveBox">' + '<div class="cityshow"></div>' + "</div>" + '<div class="closeSelector"></div>' + "</div>",
		level: 1,
		columns: [{
			state: "prov",
			text: "一级分类",
			hide: false,
			addclass: ""
		}, {
			state: "city",
			text: "二级分类",
			hide: false,
			addclass: ""
		}, {
			state: "area",
			text: "三级分类",
			hide: false,
			addclass: ""
		}, {
			state: "town",
			text: "四级分类",
			hide: false,
			addclass: ""
		}],
		datas: [{
			sortName: "",
			code: "",
			id: ""
		}, {
			sortName: "",
			code: "",
			id: ""
		}, {
			sortName: "",
			code: "",
			id: ""
		}, {
			sortName: "",
			code: "",
			id: ""
		}],
		otherParam: null,
		stepMet: null,
		complete: null
	};
	this.options = $.extend({}, defaults, options);
	this.element = $(ele);
}

tabTree.prototype= {
		init: function(datas) {
			var g = this,
				p = this.options;
			g.element.addClass("citySelect");
			g.dom = g.dom || g._dom();
			g.selected = [], g.records = [], g.rows = [];
			p.datas = datas || p.datas;
			if (p.columns.length < p.datas.length) {
				return
			}
			g.isfeeze=false;
			g.renderHeader();
			g.setEvent();
		},
		setEvent: function() {
			var g = this,
				p = this.options;
			g.dom["cityboxbtn"].off();
			g.dom["cityboxbtn"].click(function(event) {
				if(g.isfeeze){
					return false;
				}
				g.dom["cityboxbtn"].addClass("select");
				g.dom["citybox"].show().css("top", (g.inputHeight-10) + "px");
				g.dom["chooseArea"].children("p").each(function() {
					if ($(this).hasClass("disable") && $(this).hasClass("cur")) {
						g.active_count = 0;
						g.getData(g._getParam(0))
					}
				});
				return event.stopPropagation()
			});
			g.dom["closeSelector"].off();
			g.dom["closeSelector"].click(function(event) {
				g.reset();
				return event.stopPropagation()
			});
			g.dom["chooseArea"].off();
			g.dom["chooseArea"].children("p").click(function(event) {
				if ($(this).hasClass("disable")) {
					return event.stopPropagation()
				} else {
					g.active_count = $(this).index();
					g.getData(g._getParam(g.active_count));
					return event.stopPropagation()
				}
			});
			g.dom["cityshow"].off();
			g.dom["cityshow"].on("click", "span>a", function(event) {
				var rowid = $(this).attr("data").split("_")[1];
				g.select(g.records[rowid]);
				g.changeVolume();
				if(!p.url){
					g.setHeadVal();
				}else{
					/*既可以选择三级也可以选择四级 hack*/
					if(g.active_count>2){
						g.setHeadVal();
					}
				}

				return event.stopPropagation()
			});
			$(document).click(function() {
				if (g.dom["citybox"].css("display") == "block") {
					g.reset()
				}
			})
		},
		changeVolume: function() {
			var g = this,
				p = this.options;
			var _data = g.selected[g.active_count];
			$("span", g.dom["chooseArea"]).eq(g.active_count).html(_data.sortName);
			g.selected[g.active_count].isdirect = _data.item ? true : false;
			var _cur = g.active_count;
			for (var i = g.active_count + 1; i < p.datas.length; i++) {
				$("span", g.dom["chooseArea"]).eq(i).html(p.columns[i].text)
			}
			if (g.active_count + 1 <= p.columns.length - 1) {
				g.active_count++;
				var _next = g.active_count;
				if (_data.item) {
					_cur = g.active_count;
					$("p", g.dom["chooseArea"]).eq(g.active_count).addClass("disable");
					$("span", g.dom["chooseArea"]).eq(g.active_count).html(_data.item[0].sortName);
					g.selected[g.selected.length] = _data.item[0];
					g.active_count++;
					_next = g.active_count;
				}
				if (g.active_count <= p.columns.length - 1) {
					g.getData(g._getParam(_next))
				} else {
					g.active_count = 0;
					g.setHeadVal(true);
					g.reset()
				}
			} else {
				g.setHeadVal(true);
				g.reset()
			}
		},
		getData: function(_param) {
			var g = this,
				p = this.options;
			$("p", g.dom["chooseArea"]).eq(g.active_count).removeClass("disable").addClass("cur").siblings("p").removeClass("cur");
			for (var i = g.active_count + 1; i < p.datas.length; i++) {
				if ($("span", g.dom["chooseArea"]).eq(i).html() == p.columns[i].text) {
					$("p", g.dom["chooseArea"]).eq(i).addClass("disable")
				}
			}
			_param.param=_param.sortId;
			
			g.getAjax(_param)
		},
		getAjax: function(param) {
			var g = this,
				p = this.options;

			var url = '';

			if (param.state == 'prov') {
				if (p.status) {
					url = '/sale/product/queryPSNotTreeWhenLevelAndStatus';
				} else {
					url = '/product/class/queryAllProductSortList';
				}
			} else {
				if (p.status) {
					url = '/sale/product/queryPSListByParentIdWhenStatus';
				} else {
					url = '/product/class/queryProductSortList';
				}
				
			}

			url=p.url||url;

			param.status = p.status;
			param.sortLevel = p.sortLevel;
			var ajaxOptions = {
				type: "POST",
				url:url,
				data: param,
				dataType: 'json',
				beforeSend: function(msg) {
					g.dom["cityshow"].html("加载中...")
				},
				success: function(items) {
					//console.log("返回值",items);
					// items=items;



					g.dom["cityshow"].html("");
					g.records.length = 0;
					g.rows.length = 0;
					if (items.data.length == 0) {
						g.active_count = 0;
						g.setHeadVal(true);
						g.reset();
					}else{
					$.each(items.data, function(count, item) {
							var b = $("<span/>");
							var a = $("<a/>");
							if (item.ishot == "true") {
								a.addClass("imp")
							}
							a.attr("data", "Sns_" + count).attr("title",item.sortName).html(item.sortName);
							b.append(a);
							g.dom["cityshow"].append(b);
							g.records.push(count);
							g.rows.push(item)
						});
					}
				},
				error: function(e1, e2) {}
			};
			$.ajax(ajaxOptions)
		},
		setHeadVal: function(bool) {
			var g = this,
				p = this.options;
			var arr=[];
			$.each(g.selected, function(count, item) {
				arr.push(item.sortName);
			});
			g.dom["cityboxbtn"].html(arr.join(' > ')||'请选择类目');
			p.datas.length = 0;
			$.each(g.selected, function(count, item) {
				p.datas.push(item)
			});
			if (p.complete != null) {
				p.complete(p.datas, bool)
			}
		},
		renderHeader: function() {
			var g = this,
				p = this.options;

			function _buildHtml(_count, items, isdisable) {
				var _tempfun2 = function(count, item, isdisable) {
						var _txt = $.trim(item.sortName) == "" ? p.columns[_count].text : item.sortName;
						var _html = '<p eq="' + count + '"><span>' + _txt + "</span><b></b></p>";
						if (isdisable || item.id == "") {
							_html = '<p class="disable"><span>' + _txt + "</span><b></b></p>"
						}
						return _html
					};
					// g.dom["chooseArea"].html('');
				//g.dom["cityboxbtn"].append(_tempfun1(_count, items, isdisable));
				g.dom["chooseArea"].append(_tempfun2(_count, items, isdisable))
			}
			g.dom["chooseArea"].html("");
			if (p.datas && p.columns && p.datas.length > 0) {
				var _isdirect = false;
				$.each(p.datas, function(count, item) {
					if (item.id) {
						g.selected[count] = item
					}
					_buildHtml(count, item, _isdirect);
					_isdirect = p.datas[count].isdirect
				});
				var arr=[];
				$.each(g.selected, function(count, item) {
					arr.push(item.sortName);
				});
				g.dom["cityboxbtn"].html(arr.join(' > ')||'请选择类目');

				if (g.selected.length > 0 && !g.selected[g.selected.length - 1].isdirect) {
					if (g.selected.length != p.datas.length) {
						g.active_count = g.selected.length;
						g.getData(g._getParam(g.active_count))
					} else {
						g.active_count = g.selected.length - 1;
						g.getData(g._getParam(g.active_count))
					}
				} else {
					g.active_count = 0;
					g.getData(g._getParam(g.active_count))
				}
				_isdirect = false;
				if (p.complete != null) {
					p.complete(p.datas, true)
				}
			}
			g.dom.chooseArea["append"]('<div class="clear"></div>');
			g.dom.cityboxbtn["append"]("<b></b>");
			g.inputHeight = g.dom.cityboxbtn["height"]();
			g.dom["chooseArea"].addClass("fix");
		},
		reset: function() {
			var g = this,
				p = this.options;
			g.dom["cityboxbtn"].removeClass("select");
			g.dom["citybox"].hide();
		},
		select: function(rp) {
			var g = this,
				p = this.options;
			var row = g.rows[parseInt(rp)];
			g.selected.length = g.active_count;
			g.selected[g.selected.length] = row
		},
		_getParam: function(rp) {
			var g = this,
				p = this.options;
			var defaults = {
				state: p.columns[rp].state,
				// brandId:928,
				sortId: rp - 1 > -1 ? g.selected[rp - 1].id : ""
			};
			var setting = {};
			if (p.otherParam) {
				var obj = p.otherParam(rp, p.columns, g.selected);
				if (obj && typeof(obj) == "object") {
					setting = obj
				}
			}
			var params = $.extend(defaults, setting);
			return params
		},
		_dom: function() {
			var g = this,
				p = this.options;
			g.element.html(p.innerHtml);
			var wrap = g.element;
			var name, DOM = {
				wrap: $(wrap)
			},
				els = wrap[0].getElementsByTagName("*"),
				elsLen = els.length;
			for (var i = 0; i < elsLen; i++) {
				name = els[i].className;
				if (name) {
					DOM[name] = $(els[i], wrap)
				}
			}
			return DOM
		},
		getAddress: function() {
			var g = this,
				p = this.options;
			return p.datas
		},
		getRows: function() {
			var g = this,
				p = this.options;
			return g.selected
		},
		setCurrent: function(rp) {
			var g = this,
				p = this.options;
			g.dom["cityboxbtn"].addClass("select");
			g.dom["citybox"].show().css("top", (g.inputHeight-10) + "px");
			if (g.selected.length - parseInt(rp) >= 0) {
				g.active_count = parseInt(rp);
				g.getData(g._getParam(g.active_count))
			} else {
				g.active_count = 0;
				g.getData(g._getParam(g.active_count))
			}
			return event.stopPropagation()
		}
	};
module.exports = tabTree;