var $;
String.prototype.format = function () {
   //字符串占位符
   //eg: var str1 = "hello {0}".format("world");
   if (arguments.length == 0) return this;
   var param = arguments[0];
   var s = this;
   if (typeof (param) == 'object') {
      for (var key in param) {
         s = s.replace(new RegExp("\\{" + key + "\\}", "g"), param[key]);
      }
      return s;
   } else {
      for (var i = 0; i < arguments.length; i++) {
         s = s.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
      }
      return s;
   }
};

/**打开已经打开的tabMenu**/
let OpenTabMenuFun = function ($, fun) {
   //区分游客和用户登录状态
   var tabMenu = sessionStorage.getItem("tabMenu");//已经打开的tab页面
   var tabMenuLeft = sessionStorage.getItem("tabMenuLeft");//tab的位置
   if (tabMenu) {
      tabMenu = JSON.parse(tabMenu);
      $("#tabTitle").html(tabMenu.tabTitle).animate({
         left: tabMenuLeft
      }, 50);
      $("#tabContent").html(tabMenu.tabContent);
      if (typeof fun == 'function') {
         fun();
      }
   }
};

/**存储打开的tabMenu**/
function saveTabMenuFun($) {
   let tabTitle = $("<div>" + $("#tabTitle").html() + "</div>");
   tabTitle.find("i.layui-tab-close").remove();
   let tabMenu = JSON.stringify({
      tabTitle: tabTitle.html(),
      tabContent: $("#tabContent").html()
   });
   sessionStorage.setItem('tabMenu', tabMenu);
   sessionStorage.setItem('tabMenuLeft', $("#tabTitle").css('left'));
}

/**tab的位置**/
function saveTabMenuPosition(num) {
   num = num || $("#tabTitle").css('left');
   sessionStorage.setItem('tabMenuLeft', num);
}

layui.define(["element", "jquery"], function (exports) {
   var layui = parent.layui || layui;
   $ = layui.jquery;
   var element = layui.element,
      layer = layui.layer,
      okTab = function () {
         this.tabConfig = {
            openTabNum: 30, //最大可打开窗口数量默认30
            tabFilter: "ok-tab", //添加窗口的filter
            url: "", //获取菜单的接口地址
            data: [],//菜单数据列表(如果传入了url则data无效)
            autoRefresh:true,
            parseData: ''//这是一个方法处理url请求地址的返回值(该方法必须提供一个返回值)
         }
      };
   /**
    * 导航初始化的操作(只执行一次)
    * @param option 配置tabConfig参数
    * @returns {okTab}
    */
   okTab.prototype.init = function (option) {
      var _this = this; //这个this就是代表okTab（因为prototype的原因）
      $.extend(true, _this.tabConfig, option); //函数用于将一个或多个对象的内容合并到目标对象。http://www.runoob.com/jquery/misc-extend.html
      this.tabDelete(); //关闭导航页的操作
      this.tab(); //tab导航切换时的操作

      return _this;
   };

   //生成左侧菜单
   var temp = "";
   okTab.prototype.navBar = function (strData) {
      var data;
      if (typeof (strData) == "string") {
         var data = JSON.parse(strData); //有可能是字符串，转换一下
      } else {
         data = strData || [];
      }
      var ulItem = '';
      ulItem +='<li class="layui-nav-item layui-this">';
      ulItem +='  <a lay-id="1" data-url="pages/console.html" is-close="true">';
      ulItem +='<i class="ok-icon"></i><cite>控制台</cite></a></li>';
      for (var i = 0; i < data.length; i++) {
         temp = "";
         if (data[i].isCheck) {
            ulItem += '<li class="layui-nav-item layui-this">';
         } else if (data[i].spread) {
            ulItem += '<li class="layui-nav-item layui-nav-itemed">';
         } else {
            ulItem += '<li class="layui-nav-item">';
         }
         createMenu(data[i], (i + 1).toString());
         ulItem += temp;
         ulItem += '</li>';
      }
      return ulItem;
   };

   /**
    * 递归生成菜单
    * @param data 数据
    * @param tabID 设置lay-id使用
    */
   function createMenu(data, tabID) {
      if (data.list != undefined && data.list.length > 0) {
         temp += '<a>';
         if (data.icon != undefined && data.icon != '') {
            if (!data.fontFamily || data.fontFamily.indexOf("layui-icon") >= 0) {
               if (data.icon.indexOf("&#") >= 0) {
                  temp += ('<i class="layui-icon">{0}</i>').format(data.icon);
               } else {
                  temp += ('<i class="layui-icon {0}"></i>').format(data.icon);
               }
            } else if (data.fontFamily) {
               if (data.icon.indexOf("&#") >= 0) {
                  temp += ('<i class="{0}">{1}</i>').format(data.fontFamily, data.icon);
               } else {
                  temp += ('<i class="{0} {1}"></i>').format(data.fontFamily, data.icon);
               }
            }
         }
         temp += '<cite>' + data.name + '</cite>';
         temp += '<span class="layui-nav-more"></span>';
         temp += '</a>';
         temp += '<dl class="layui-nav-child">';
         for (var i = 0; i < data.list.length; i++) {
            temp += '<dd>';
            var lay_id = tabID + "-" + (i + 1);
            createMenu(data.list[i], lay_id);
            temp += '</dd>';
         }
         temp += "</dl>";
      } else {
         var isClose = data.isClose === false ? "false" : "true";
         if (data.target) {
            temp += ('<a lay-id="{0}" data-url="{1}" target="{2}" is-close="{3}">').format(tabID, data.url, data.target, isClose);
         } else {
            temp += ('<a lay-id="{0}" data-url="{1}" is-close="{2}">').format(tabID, data.url, isClose);
         }
         if (data.icon != undefined && data.icon != '') {
            if (!data.fontFamily || data.fontFamily.indexOf("layui-icon") >= 0) {
               if (data.icon.indexOf("&#") >= 0) {
                  temp += ('<i class="layui-icon">{0}</i>').format(data.icon);
               } else {
                  temp += ('<i class="layui-icon {0}"></i>').format(data.icon);
               }
            } else if (data.fontFamily) {
               if (data.icon.indexOf("&#") >= 0) {
                  temp += ('<i class="{0}">{1}</i>').format(data.fontFamily, data.icon);
               } else {
                  temp += ('<i class="{0} {1}"></i>').format(data.fontFamily, data.icon);
               }
            }
         }
         temp += ('<cite>{0}</cite></a>').format(data.name);

      }
   }

   /**
    * 定位tab位置
    * @param superEle 父级元素
    * @param ele 当前tab
    */
   okTab.prototype.positionTab = function (contEle, ele) {

      var superEle = $(".ok-tab");//父级元素
      contEle = $(contEle);//tab内容存放的父元素
      ele = $(ele);//当前的tab

      var menuSet = $("#navBar a[lay-id]");//获取所有菜单集合
      var thatLayId = ele.attr('lay-id');

      var contWidth = contEle.width(),//父级元素宽度
         superWidth = parseInt(superEle.width()) - 40 * 3,//可显示的宽度
         subWidth = ele.outerWidth(),//当前元素宽度
         elePrevAll = ele.prevAll(),//左边的所有同级元素
         leftWidth = 0,//左边距离
         postLeft = Math.abs(contEle.position().left);//当前移动的位置
      var maxMoveWidth = contWidth - superWidth;//最大可移动的宽度

      /*console.log("maxMoveWidth：" + maxMoveWidth);
      console.log("superWidth：" + superWidth);
      console.log("contWidth：" + contWidth);*/
      // console.log(contEle);
      for (let i = 0; i < elePrevAll.length; i++) {
         leftWidth += $(elePrevAll[i]).outerWidth() * 1;
      }
      if (contWidth > superWidth) {
         /**
          * 移动tab栏的位置
          */
         var showPost = leftWidth - postLeft;//当前点击的元素位置（显示区域的位置）
         var halfPlace = parseInt(superWidth / 2);//可显示的宽度的一半
         var tempMove = 0;
         if (halfPlace < showPost) {//从右往左移动
            tempMove = leftWidth - subWidth;//预留一部分距离
            if (tempMove > maxMoveWidth) {//当前移动的距离超过最大可移动的宽度
               tempMove = maxMoveWidth;
            }
            contEle.animate({
               left: -tempMove
            }, 50);
         } else {//从左往右移动
            tempMove = leftWidth - halfPlace;//预留一部分距离
            if (tempMove < 0) {
               tempMove = 0;
            }
            contEle.animate({
               left: -tempMove
            }, 50);
         }
         /**存储tab位置**/
         saveTabMenuPosition(-tempMove);
      } else {
         contEle.animate({
            left: 0
         }, 50);
         //this.navMove("rightmax");
         /**存储tab位置**/
         saveTabMenuPosition(0);
      }

      /**
       * 左侧菜单的样式和多级菜单的展开
       */
      $("#navBar").find("li,dd").removeClass("layui-this").removeClass("layui-nav-itemed");//关闭所有展开的菜单
      $("#navBar > li dl.layui-nav-child").removeAttr('style');
      for (let i = 0; i < menuSet.length; i++) {
         if ($(menuSet[i]).attr('lay-id') == thatLayId) {
            $(menuSet[i]).parents("dd").addClass("layui-nav-itemed");
            $(menuSet[i]).parents("li").addClass("layui-nav-itemed");
            $(menuSet[i]).parent().removeClass("layui-nav-itemed").addClass("layui-this");
            break;
         }
      }
   };

   // 点击导航页的操作
   okTab.prototype.tab = function () {
      var that = this;
      var filter = this.tabConfig.tabFilter;
      // "hello {0}".format("world");
      //`tab(${filter})`
      element.on("tab({0})".format(filter), function (data) {
         var index = data.index;//点击的某个tab索引
         var elSuper = $(".ok-tab"),//视窗元素
            elMove = $(".ok-tab-title"),//移动的元素
            elTabs = $(".ok-tab-title li"),//所有已存在的tab集合
            thatElem = $(elTabs[index]);//当前元素
         saveTabMenuFun($);
         that.positionTab(elMove, thatElem);
      });
   };

   //删除tab页的操作（此处为点击关闭按钮的操作）
   okTab.prototype.tabDelete = function () {
      var that = this;
      var filter = this.tabConfig.tabFilter;
      //`tabDelete(${filter})`
      element.on("tabDelete({0})".format(filter), function (data) {
         // that.navMove("right");
         /**保存展开的tab**/
         saveTabMenuFun($);
      });
   };

   //添加tab页
   okTab.prototype.tabAdd = function (_thisa) {
      var that = this;
      var _this = $(_thisa).clone(true);//拷贝dom（js： _this.cloneNode(true) ）

      var openTabNum = that.tabConfig.openTabNum;
      var tabFilter = that.tabConfig.tabFilter;
      var url = _this.attr("data-url");//选项卡的页面路径
      var tabId = _this.attr("lay-id");//选项卡ID
      var thatTabNum = $('.ok-tab-title > li').length;//当前已经打开的选项卡的数量
      var iframes = $(".ok-tab-content iframe");
      var isClose = _this.attr('is-close') || "true";

      _this.prepend("<strong style='display: none;' is-close=" + isClose + " lay-id=" + tabId + "></strong>");

      if (_this.children("i").length < 1) {
         _this.prepend("<i class='layui-icon'></i>");
      }
      if (_this.attr("target") == "_blank") {
         window.location.href = _this.attr("data-url");
      } else if (url != undefined) {
         var title = '';
         var html = _this.html();
         // 去重复选项卡
         /**
          * 这里还有一种情况就是同一选项卡页面路径不同（这个是多余的没必要了，页面不同，跳转的选项卡也应该新增）
          */
         for (var i = 0; i < thatTabNum; i++) {
            if ($('.ok-tab-title > li').eq(i).attr('lay-id') == tabId) {
               var iframeParam = (iframes[i].src).split("?")[1];
               var urlParam = url.split("?")[1];
               if (urlParam == iframeParam) {
                  element.tabChange(tabFilter, tabId);
               } else {
                  //参数不一样的时候刷新并且更换参数
                  iframes[i].contentWindow.location.reload(true);
                  iframes[i].src = url;
                  element.tabChange(tabFilter, tabId);
               }
               if (event) {
                  event.stopPropagation();
               }
               return;
            }
         }

         if (thatTabNum >= openTabNum) {
            layer.msg('最多只能同时打开' + openTabNum + '个选项卡哦。不然系统会卡的！');
            return;
         }
         var contentIframe = ("<iframe src='{0}' lay-id='{1}'" +
            "frameborder='0' scrolling='yes' width='100%' height='100%'>" +
            "</iframe>").format(url, tabId);
         element.tabAdd(tabFilter, {
            title: html,
            content: contentIframe,
            id: tabId
         });

         // 切换选项卡
         element.tabChange(tabFilter, tabId);
         this.navMove("rightmax");
         /**保存展开的tab**/
         // saveTabMenuFun($);
      }
   };

   //重新对导航进行渲染(此处有个回调函数，主要用作渲染完成之后的操作)
   okTab.prototype.render = function (fun) {
      var _this = this;//data
      var _data = _this.tabConfig.data;
      if (_this.tabConfig.url) {
         $.get(_this.tabConfig.url, function (res) {
            _data = res;
            if (typeof _this.tabConfig.parseData == "function") {
               _data = _this.tabConfig.parseData(res);
            }
            $("#navBar").html(_this.navBar(_data));
            element.render('nav');
            $(window).resize(function () {
               $("#navBar").height($(window).height() - 245);
            });
            if (typeof fun == "function") {
               fun();
            }
         });
         /**打开缓存中的tab**/
         OpenTabMenuFun($, function () {
            // var filter = _this.tabConfig.tabFilter;
            element.render("tab");
         });
      } else if ($.type(_data) == 'array') {
         if (_data.length < 1) {
            alert("菜单集合中无任何数据");
         }
         var _data = _this.tabConfig.data;
         $("#navBar").html(_this.navBar(_data));
         element.render('nav');
         $(window).resize(function () {
            $("#navBar").height($(window).height() - 245);
         });
         if (typeof fun == "function") {
            fun();
         }
      } else {
         alert("你的菜单配置有误请查看菜单配置说明");
      }
   };

   //刷新当前tab页
   okTab.prototype.refresh = function (_this) {
      if (!($(_this).hasClass("refreshThis"))) {
         $(_this).addClass("refreshThis");
         $(".ok-tab-content .layui-show").find("iframe")[0].contentWindow.location.reload(true);
         setTimeout(function () {
            $(_this).removeClass("refreshThis");
         }, 2000)
      } else {
         layer.msg("客官请不要频繁点击哦！我会反应不过来的");
      }
   };

   /**
    * 关闭tab标签页操作
    * @param num 默认为1
    * 1：代表关闭当前标签页
    * 2：代表关闭其他标签页
    * 3：代表关闭所有标签页
    */
   okTab.prototype.tabClose = function (num) {
      num = num || 1;
      num = num * 1;//强制转换成数字
      var that = this;
      let openTabs = $('.ok-tab-title > li strong[lay-id]').not('strong[is-close=false]'),//获取已打开的tab元素(除开不会被关闭的导航)
         thatLayID = $('.ok-tab-title > li.layui-this strong[lay-id]').not('strong[is-close=false]').attr("lay-id") || '';//获取当前打开的tab元素ID(除开不会被关闭的导航)

      var filter = that.tabConfig.tabFilter;
      if (thatLayID.length < 1 && num == 1) {
         layer.msg("您不能关闭当前页哦 (๑╹◡╹)ﾉ");
         return;
      } else if (openTabs.length < 1) {
         layer.msg("您好！当前没有可关闭的窗口了 (๑╹◡╹)ﾉ");
         return;
      }
      switch (num) {
         case 1:
            element.tabDelete(filter, thatLayID);
            break;
         case 2:
            if (openTabs.length > 0) {
               openTabs.each(function (i, j) {
                  if ($(j).attr("lay-id") != thatLayID) {
                     element.tabDelete(filter, $(j).attr("lay-id"));
                  }
               });
               this.navMove('leftmax');
               setTimeout(function () {
                  saveTabMenuPosition(0);
               }, 500);
            } else {
               layer.msg("您好！当前没有可关闭的窗口了 (๑╹◡╹)ﾉ");
               return;
            }
            break;
         case 3:
            openTabs.each(function (i, j) {
               element.tabDelete(filter, $(j).attr("lay-id"));
            });
            this.navMove('leftmax');
            setTimeout(function () {
               saveTabMenuPosition(0);
            }, 500);
            break;
      }
      element.render("tab", filter);
      /**保存展开的tab**/
      saveTabMenuFun($);
   };

   /**
    * 移动标签导航
    * @param moveId
    *      为left:往左边移动
    *      为right:往右边移动
    *      为rightmax:跑到最右边
    *      为leftmax:跑到最左边
    */
   okTab.prototype.navMove = function (moveId, that) {
      var superEle = $(".ok-tab"),//父级元素
         contEle = $(".ok-tab-title"),//tab内容存放的父元素
         superWidth = parseInt(superEle.width()) - 40 * 3,//可显示的宽度
         contWidth = parseInt(contEle.width()),//移动元素的总宽度
         elTabs = $(".ok-tab-title li"),//所有已存在的tab集合
         postLeft = contEle.position().left;//当前移动的位置

      /*elTabs.each(function (i, j) {
        moveWidth += $(j).outerWidth() * 1;
      });*/

      var movePost = moveId.toLowerCase().indexOf("left") < 0 ? -1 : 1;//移动方向
      var step = parseInt((superWidth * 0.25 < 20 ? 20 : superWidth * 0.25));//移动步长
      var moveLeft = postLeft + step * movePost;
      var moveWidth = contWidth - superWidth;
      if (contWidth > superWidth) {
         switch (moveId) {
            case 'left':
               if (moveLeft >= step) {
                  layer.tips('已到最左边啦', that, {
                     tips: [1, '#000'],
                     time: 2000
                  });
                  moveLeft = 0;
               }
               break;
            case 'leftmax':
               if (moveLeft >= step) {
                  layer.tips('已到最左边啦', that, {
                     tips: [1, '#000'],
                     time: 2000
                  });
                  moveLeft = 0;
               }
               break;
            case 'right':
               if (superWidth + Math.abs(moveLeft) >= contWidth + step) {
                  layer.tips('已到最右边啦', that, {
                     tips: [1, '#000'],
                     time: 2000
                  });
                  moveLeft = -moveWidth;
               }
               if (superWidth + Math.abs(moveLeft) >= contWidth) {
                  moveLeft = -moveWidth;
               }
               break;
            case 'rightmax':
               if (superWidth + Math.abs(postLeft) >= contWidth + step) {
                  layer.tips('已到最右边啦', that, {
                     tips: [1, '#000'],
                     time: 2000
                  });
               }
               moveLeft = -moveWidth;
         }
         if (moveLeft > 0) {
            moveLeft = 0;
         }
         contEle.animate({
            left: moveLeft
         }, 50);
         //saveTabMenuPosition(moveLeft);
      } else {
         contEle.animate({
            left: 0
         }, 50);
         saveTabMenuPosition(0);
      }
   };

   exports("okTab", function (option) {
      if(parent.objOkTab){
         return parent.objOkTab;
      }else{
         return new okTab().init(option);
      }
   });


});

