layui.define(['jquery', 'tools'], function (exports) {
	"use strict";

	/**
	 * @since Pear Admin 4.0
	 * 
	 * Button component
	 * */
	var MOD_NAME = 'menuSearch',
		tools = layui.tools,
		$ = layui.jquery;

	var menuSearch = function (opt) {
		this.option = opt;
	};

	/**
	 * @since Pear Admin 4.0
	 * 
	 * Button start loading
	 * */
	menuSearch.prototype.render = function (opt) {

		var options = {
			select: opt.select,
			elem: opt.elem,
			dataProvider: opt.dataProvider,
		}

		$('body').on("click", options.elem, function () {

			var _html = [
				`<div class="menu-search-content">
				  <div class="layui-form menu-search-input-wrapper">
				    <div class=" layui-input-wrap layui-input-wrap-prefix">
				      <div class="layui-input-prefix">
				        <i class="layui-icon layui-icon-search"></i>
				      </div>
				      <input type="text" name="menuSearch" value="" placeholder="搜索菜单" autocomplete="off" class="layui-input" lay-affix="clear">
				    </div>
				  </div>
				  <div class="menu-search-no-data">暂 无 信 息</div>
				  <ul class="menu-search-list">
				  </ul>
				  <div class="menu-search-tips">
				    <div>
				      <span class="mr-1">选择</span><kbd class="mr-1 w-5"> ↑ </kbd><kbd class="mr-5 w-5"> ↓ </kbd>
				      <span class="mr-1">确定</span><kbd class="mr-5"> Enter </kbd><span class="mr-1">关闭</span><kbd class="mr-1"> Esc </kbd>
				    </div>
				  </div>
				</div>`
			].join('');

			layer.open({
				type: 1,
				offset: "10%",
				area: ['600px'],
				title: false,
				closeBtn: 0,
				shadeClose: true,
				anim: 0,
				move: false,
				content: _html,
				success: function (layero, layeridx) {

					var $layer = layero;
					var $content = $(layero).children('.layui-layer-content');
					var $input = $(".menu-search-input-wrapper input");
					var $noData = $(".menu-search-no-data");
					var $list = $(".menu-search-list");
					var menuData = options.dataProvider();

					$layer.css("border-radius", "6px");
					$input.off("focus").focus();

					// 搜索输入事件
					$input.off("input").on("input", tools.debounce(function () {
						var keywords = $input.val().trim();
						var filteredMenus = filterHandle(menuData, keywords);

						if (filteredMenus.length) {
							var tiledMenus = tiledHandle(filteredMenus);
							var listHtml = createList(tiledMenus);
							$noData.css("display", "none");
							$list.html("").append(listHtml).children(":first").addClass("this")
						} else {
							$list.html("");
							$noData.css("display", "flex");
						}
						var currentHeight = $(".menu-search-content").outerHeight()
						$layer.css("height", currentHeight);
						$content.css("height", currentHeight);
					}, 500)
					)

					// 列表点击事件
					$list.off("click").on("click", "li", function () {
						var id = $(this).attr("smenu-id");
						var title = $(this).attr("smenu-title");
						var url = $(this).attr("smenu-url");
						var type = $(this).attr("smenu-type");
						var openType = $(this).attr("smenu-open-type");

						options.select({ id, title, url, type, openType });

						layer.close(layeridx);
					})

					$list.off('mouseenter').on("mouseenter", "li", function () {
						$(".menu-search-list li.this").removeClass("this");
						$(this).addClass("this");
					}).off("mouseleave").on("mouseleave", "li", function () {
						$(this).removeClass("this");
					})

					// 监听键盘事件
					$('.menu-search-content').off("keydown").keydown(function (e) {
						if (e.keyCode === 13 || e.keyCode === 32) {
							e.preventDefault();
							var that = $(".menu-search-list li.this");
							var id = that.attr("smenu-id");
							var title = that.attr("smenu-title");
							var url = that.attr("smenu-url");
							var type = that.attr("smenu-type");
							var openType = that.attr("smenu-open-type");

							options.select({ id, title, url, type, openType });

							layer.close(layeridx);
						} else if (e.keyCode === 38) {
							e.preventDefault();
							var prevEl = $(".menu-search-list li.this").prev();
							$(".menu-search-list li.this").removeClass("this");
							if (prevEl.length !== 0) {
								prevEl.addClass("this");
							} else {
								$list.children().last().addClass("this");
							}
						} else if (e.keyCode === 40) {
							e.preventDefault();
							var nextEl = $(".menu-search-list li.this").next();
							$(".menu-search-list li.this").removeClass("this");
							if (nextEl.length !== 0) {
								nextEl.addClass("this");
							} else {
								$list.children().first().addClass("this");
							}
						} else if (e.keyCode === 27) {
							e.preventDefault();
							layer.close(layeridx);
						}
					})
				}
			})
		});

		return new menuSearch(options);
	}

	/**
	 * @since Pear Admin 4.0
	 * 
	 * 创建结果列表
	 */
	var createList = function (data) {
		var listHtml = '';
		$.each(data, function (index, item) {
			listHtml += `<li smenu-open-type="${item.info.openType}" smenu-id="${item.info.id}" smenu-icon="'${item.info.icon}" smenu-url="${item.info.href}" smenu-title="${item.info.title}" smenu-type="${item.info.type}">
			   <span><i style="margin-right:10px" class="${item.info.icon}"></i>${item.path}</span>
			   <i class="layui-icon layui-icon-right"></i>
			 </li>`
		})
		return listHtml;
	}

	/**
	 * @since Pear Admin 4.0
	 * 
	 * Tree 转 path 列表
	 */
	var tiledHandle = function (data) {
		var tiledMenus = [];
		var treeTiled = function (data, content) {
			var path = "";
			var separator = " / ";
			if (!content) content = "";
			$.each(data, function (index, item) {
				if (item.children && item.children.length) {
					path += content + item.title + separator;
					var childPath = treeTiled(item.children, path);
					path += childPath;
					if (!childPath) path = ""; // 重置路径
				} else {
					path += content + item.title
					tiledMenus.push({ path: path, info: item });
					path = ""; //重置路径
				}
			})
			return path;
		};
		treeTiled(data);

		return tiledMenus;
	}

	/**
	 * @since Pear Admin 4.0
	 * 
	 * 查询匹配算法
	 */
	var filterHandle = function (filterData, val) {
		if (!val) return [];
		var filteredMenus = [];
		filterData = $.extend(true, {}, filterData);
		$.each(filterData, function (index, item) {
			if (item.children && item.children.length) {
				var children = filterHandle(item.children, val)
				var obj = $.extend({}, item, { children: children });
				if (children && children.length) {
					filteredMenus.push(obj);
				} else if (item.title.indexOf(val) >= 0) {
					item.children = []; // 父级匹配但子级不匹配,就去除子级
					filteredMenus.push($.extend({}, item));
				}
			} else if (item.title.indexOf(val) >= 0) {
				filteredMenus.push(item);
			}
		})
		return filteredMenus;
	}

	exports(MOD_NAME, new menuSearch());
});