define(['mUtil', "Component", "wev-loading","i18n"], function (mUtil, Component, WevLoading,i18n) {
	var Tree = function(options) {
        var _tree = {}, dataMap = {}, $comp, $treeTitle, $treeSearch, $refreshLoading, $tableWrapper, $noData;
		
		Component.super(this, options);
		
		this.type = "Tree";
		this.tpl = this.type + "_html";
		this.css = this.type + "_css";
        this.dataload = true;
		this.components = {
			loading: new WevLoading({
				delay: 300,
				animation: 1
			})
		};

		
		var vm = this.viewModel = {
			searchTips: "Search",
			treeid: 0,					//树形id, 对应表mode_customtree主键
			treeName: " ",
			details: [],
			standalone: true
		};
		
		this.beforeMount = function(){
			vm.treeparam = "";

			if(!vm.standalone) return;

			if (!mUtil.isArray(vm.details)) { // vm.details只支持数组
				vm.details = [];
			}

			if(!vm.details.length) return;

			vm.treeparam = JSON.stringify({
				customdetail: vm.details.map(function (item) {
					return {
						detailid: item.nodeid,
						urltype: 1,
						appendhtml: item.suffix || ""
					};
				})
			});
		};
		
		this.mounted = function(){
			$comp = this.$comp;
			$refreshLoading = this.$el.find(".wev-refresh-loading");
			$tableWrapper = this.$el.find(".wev-table-view-wrapper");
			$treeTitle = this.$el.find(".wev-treetitle");
			$treeSearch = this.$el.find(".wev-treesearch");
			$noData = this.$el.find(".wev-no-data").attr('data-title',i18n.NO_DATA);
			
			this.$el.find(".wev-no-data:after").css('content',i18n.NO_DATA);
			var that = this,
			 	$search = $(".wev-search", $comp),
			 	$placeholder = $(".wev-placeholder", $search),
			 	$placeholderInner = $(".wev-placeholder-inner", $placeholder),
			 	$searchKey = $("input[type='search']", $search),
			 	$clear = $(".wev-clear-btn", $search);
		 	
			$placeholder.click(function(){
				$search.addClass("wev-active").removeClass("wev-inactive");
                $searchKey.focus();
            });
            
            $searchKey.blur(function(){
				if(this.value) return;
                
				$search.addClass("wev-active").removeClass("wev-inactive");
            }).on("input", function() {
				$search.toggleClass("wev-has-value", !!this.value);
            }).keyup(function(e) {
				if(e.keyCode != 13) return;
				
				_tree.buildSearch($searchKey.val());
                $searchKey[0].blur();
            });
            
            $clear.click(function(){
				$treeSearch.hide();
				$noData.hide();
				$treeTitle.html(vm.treeName);
				$searchKey.val("").triggerHandler("input");
                _tree.buildTree();
                e.stopPropagation();
            });
            
            $comp.on("click", "li.wev-table-view-cell,li.wev-table-view-cell i", function(e){
            	var $this = $(this);
            	if($this.hasClass("wev-table-view-cell")){//执行点击动作
            		_tree.doAction($this, that.pageid);
            	}else{//获取子节点
            		var $parent = $this.closest("li"),
            			nodeid = $parent.data("id"),
            			nodename = $parent.data("name");
            		var isOpen = $this.hasClass("open");
    				if(!isOpen){
    					_tree.buildTree(nodeid, nodename, $parent);
    				}else{
    					$parent.children("ul.wev-treepage").hide();
    				}
    				$this[isOpen ? "removeClass" : "addClass"]("open wev-minus-icon");
    				$this[!isOpen ? "removeClass" : "addClass"]("wev-plus-icon");
            	}
            	e.stopPropagation(); 
            });
            
            //清除搜索结果
            $treeTitle.on("click", "i.clear-search", function(e){
            	$treeSearch.hide();
            	$noData.hide();
            	$treeTitle.html(vm.treeName);
            	$searchKey.val("").triggerHandler("input");
            	_tree.buildTree();
            	e.stopPropagation();
            });
            
			_tree.refreshTree();
		};
		
		var treeTimestamp = 0;
		
		_tree.doAction = function($node, pageid){
			var nodeid = $node.data("id");

			if (!nodeid || !dataMap[nodeid]) {
				mUtil.getLabel(5293, "不正确",function(msg){
					mUtil.console.error("id(" + nodeid + ") " + msg);
				});
				return ;
			}

			var nodeData = dataMap[nodeid],
				nodeurl = nodeData.nodeurl_mobile;

			if (vm.standalone) {
				var clickFn;

				vm.details.forEach(function (item) {
					if (nodeid.indexOf(String(item.nodeid) + "_") == 0) {
						clickFn = item.click;
					}
				});

				if (mUtil.isFunction(clickFn)) {
					return clickFn.call($node[0], nodeData.billdata);
				} 
			} else if (nodeurl) {
				if (nodeurl.indexOf("javascript") === 0) {
					mUtil.eval(nodeurl, pageid);
				} else if (nodeurl.indexOf("mobilemode:refreshList") === 0) {
					var refreshParam = nodeurl.split(":"),
						callback = refreshParam[5];

					var refreshedCallbackFn = callback && function () {
						var targetFn = eval("this." + callback);

						if (typeof (targetFn) == "function") {
							targetFn.call(this, nodeData.billdata);
						}
					};
					
					var listPageid = refreshParam[2];
					var refreshListPage = function(){
						Mobile_NS.refreshSpecifiedList(listPageid, refreshParam[3], refreshParam[4], refreshedCallbackFn);
					};
					if(mUtil.getPageId(listPageid) == pageid){ //列表是否在当前页
						refreshListPage();
					}else if(($("#"+pageid).attr("data-form")||'').includes("slide")&&($("#"+mUtil.getPageId(listPageid)).attr("data-form")||'').includes("slide")){ //树型是顶层页面打开，刷新列表页面后关闭顶层页面
						//树型在从列表页面通过Mobile_NS.createTopfloorPage打开，则刷新列表并且关闭顶层页面
						refreshListPage();
						Mobile_NS.closeTopfloorPage();
					}else{
						var opts = {onPageLoad: refreshListPage};
						$u("/mobilemode/appHomepageView.jsp?appHomepageId="+listPageid, opts);
					}
				} else {
					$u(nodeurl);
				}
				return;
			} 

			if (nodeData.isParent == "true") {
				var isOpen = $node && $node.children("div").children("i").hasClass("open");
				if(!isOpen){
					_tree.buildTree(nodeid, nodeData.name, $node);
				}else{
					$node.children("ul.wev-treepage").hide();
				}
				$node && $node.children("div").children("i").toggleClass("wev-plus-icon").toggleClass("open wev-minus-icon");
			}
		};
		
		_tree.showLoading = function($node, pid){
			var loading = this.components.loading;
			var $treeLoading = $("<div class='wev-loading'><span>"+i18n.LOADING_DATA+"</span></div>");
			if(!pid){
				loading.setRefs(this.$comp, "wev-refreshing");
				loading.show();
			}else{
				$node && $node.append($treeLoading);
			}
			return $treeLoading;
		};
		
		_tree.hideLoading = function($loading, pid){
			var endstamp = new Date().valueOf();
			
			if (endstamp - treeTimestamp < 300 && $loading) {
				return setTimeout(function() {
					_tree.hideLoading($loading, pid);
				}, 300);
			}

        	if(!pid) {
				this.components.loading.hide();
        	} else if($loading) {
        		$loading.remove();
        	}
        };
		
		_tree.refreshTree = function(){
			_tree.buildTree();
		};
		
        _tree.buildTree = function(pid, pname, $node, callback) {
			pid = pid || "";
			var $treepage = $tableWrapper.find(".wev-treepage[data-pid='" + pid + "']");
			
			if(!$treepage.length) {
				return _tree.loadTreeData(pid, pname, callback, $node);
			}

			$treepage.show();
			$noData.toggle(!pid && $treepage.children("li").length === 0);
        	mUtil.isFunction(callback) && callback(pid, pname);
        };
		
		_tree.loadTreeData = function(pid, pname, callback, $node){
			var that = this,
				timestamp = (new Date()).valueOf();    //时间戳
			treeTimestamp = timestamp;
			
			var $loading = _tree.showLoading($node, pid);
			
			var actionUrl = mUtil.getActionUrl(this.type, {action: "getTreeData", "mec_id": vm.id}, this.pageid);
			mUtil.getJSON(actionUrl, {treeid: vm.treeid, pid: pid, appid: mUtil.getAppid() || "", treeparam: vm.treeparam}, function(result){
				if(timestamp != treeTimestamp){
                    return;
                }
				
				_tree.setDatas(result.datas);
				_tree.hideLoading($loading, pid);
				var templateHtml = [
					'<ul class="wev-table-view wev-treepage" data-pid="'+pid+'">',
					'{@each datas as d}',
						'<li class="wev-table-view-cell" data-id="${d.id}" data-name="$${d.name}" nodeparent="$${d.isParent}">',
							'<div>',
								'$${d.name}$${d.appendhtml}',
								'{@if d.isParent == "true"}',
						    		'<em>$${d.childNum}</em>',
									'<i class="wev-css-icon wev-plus-icon"></i>',
								'{@/if}',
							'</div>',
						'</li>',
					'{@/each}',
					'</ul>'
				].join('');

        result.datas && result.datas.map(function (d) {
          d.appendhtml = mUtil.replaceSysVars(d.appendhtml);
          return d;
        });

				var html = mUtil.parseTemplate(templateHtml, result);
				var $wrapper = $node || $tableWrapper;

				$wrapper.append(html);
				$noData.toggle(!pid && !result.datas.length);
				mUtil.isFunction(callback) && callback(pid, pname);
                mUtil.trigger('dataload', that.pageid, that.id);
			});
		};
		

		_tree.buildSearch = function(searchKey){
			if (mUtil.isEmpty(searchKey)) {
				$treeSearch.html("");
				_tree.refreshTree();
				return;
			}
			$comp.addClass("wev-refreshing");
			$refreshLoading.show().removeClass("wev-hide").addClass("wev-show");
			
			var timestamp = (new Date()).valueOf();    //时间戳
			treeTimestamp = timestamp;
			
			var actionUrl = mUtil.getActionUrl(this.type, {action: "searchTree", "mec_id": vm.id}, this.pageid);
			mUtil.getJSON(actionUrl, {treeid: vm.treeid, appid: mUtil.getAppid() || "", searchKey: searchKey, treeparam: vm.treeparam}, function(result){
				if(timestamp != treeTimestamp){
                    return;
                }
				
				_tree.setDatas(result.datas);
				$tableWrapper.children(".wev-treepage:not(.wev-treesearch)").hide();
				
				_tree.hideLoading();
				var templateHtml = [
					'{@each datas as d}',
						'<li class="wev-table-view-cell" data-id="${d.id}" data-name="$${d.name}" nodeparent="$${d.isParent}">',
						'<div>',
							'$${d.name}$${d.appendhtml}',
						'</div>',
						'</li>',
					'{@/each}'
				].join('');
				var html = mUtil.parseTemplate(templateHtml, result);

				$noData.toggle(!result.datas.length);
				$treeSearch.html(html).show();
				//$treeTitle.html("搜索<b>“"+searchKey+"”</b>的结果<i class=\"clear-search\"></i>").show();
			});
		};
		
		_tree.setDatas = function(datas){
			datas = datas || [];
			datas.forEach(function(data){
				var id = data.id;

				if(!dataMap[id]) {
					dataMap[id] = data;
				}
			});
		};
		
		_tree.loadTreeData = _tree.loadTreeData.bind(this);
		_tree.showLoading = _tree.showLoading.bind(this);
		_tree.hideLoading = _tree.hideLoading.bind(this);
		_tree.buildSearch = _tree.buildSearch.bind(this);
    };

    return Component.init(Tree);
});