'use strict';
window.onload = function () {
    window.vm = new Vue({
        el: '#g-app-main',
        data: function () {
            return {
                tabsList: [], // 打开的tab页面
                showPagesAction: false, // 打开tabs操作选项
                selectedTabsIndex: -1, // 当前所选的tab 索引
                sideBarOpen: true,
                inFullScreenMode: false, // 是否处于全屏模式
                showThemePicker: false, // 显示主题选择器
                classicalLayout: true,
                menuTreeData: [], // 目录数据
                subMenuData: [], // 二级目录数据
                selectedTopMenuIndex: 0,
                subMenuTitle: '', // 二级目录标题
                selectedId: -1, // 当前激活的id
                // 是否开启刷新记忆tab功能
                is_remember: false,
                webUser: new WebUser(),
                isAdmin: false,
                showShortCut: false,
                showShortOA: false,
                showUserActions: false,
                tabDropdownVisible: false,
                top: 0,
                left: 0,
                closeTimeout: null,
                SystemName: "驰骋BPM",
                SystemLogo: "./image/logo.png",
                IsShowFast: true,
                IsShowOA: true,
                IsShowRefresh: true,
                IsShowFullScreen: true,
                IsShowTheme: true,
                IsShowFlexible: true,
                IsShowTwoLevelMenu: false
            };
        },
        computed: {
            contextMenuStyle: function () {
                return {
                    position: 'fixed',
                    zIndex: 9999,
                    top: (this.top || 0) + 'px',
                    left: (this.left || 0) + 'px',
                    background: 'white',
                    padding: '0 10px',
                    border: '1px solid #eee'
                };
            },
        },
        methods: {
            openTabDropdownMenu: function (e) {
                this.tabDropdownVisible = true;
                this.top = e.pageY;
                this.left = e.pageX;
            },
            selectTopMenu: function (index) {
                if (this.classicalLayout) return;
                this.selectedTopMenuIndex = index;
                this.selectedSubIndex = -1;
                if (this.menuTreeData.length > 0) {
                    this.subMenuData = this.menuTreeData[index];
                    this.subMenuTitle = this.menuTreeData[index].Name;
                    if (this.subMenuTitle.length > 4)
                        $(".line").css("width", (70 - (this.subMenuTitle.length - 4) * 8) + "px");
                    this.bindDropdown(this.subMenuData.type)
                }
                this.sideBarOpen = true
                this.initChildContextMenu()
            },
            fullScreenOpen: function (uri, name) {
                this.changeFullScreenStatus()
                var w = screen.width,
                    h = screen.height
                layer.open({
                    type: 2,
                    title: name,
                    content: [uri, 'no'],
                    area: [w + 'px', h + 'px'],
                    offset: 'rb',
                    shadeClose: true
                })
            },
            changeFullScreenStatus: function () {
                if (this.inFullScreenMode) {
                    this.exitFullScreen()
                    return
                }
                this.fullScreen()
            },
            // 全屏事件
            fullScreen: function () {
                var element = window.document
                    .documentElement; //若要全屏页面中div，var element= document.getElementById("divID");
                //IE 10及以下ActiveXObject
                if (window.ActiveXObject) {
                    var WsShell = new ActiveXObject('WScript.Shell')
                    WsShell.SendKeys('{F11}');
                }
                //HTML W3C 提议
                else if (element.requestFullScreen) {
                    element.requestFullScreen();
                }
                //IE11
                else if (element.msRequestFullscreen) {
                    element.msRequestFullscreen();
                }
                // Webkit (works in Safari5.1 and Chrome 15)
                else if (element.webkitRequestFullScreen) {
                    element.webkitRequestFullScreen();
                }
                // Firefox (works in nightly)
                else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                }
                this.inFullScreenMode = true
            },
            exitFullScreen: function () {
                var element = document
                    .documentElement; //若要全屏页面中div，var element= document.getElementById("divID");
                //IE ActiveXObject
                if (window.ActiveXObject) {
                    var WsShell = new ActiveXObject('WScript.Shell')
                    WsShell.SendKeys('{F11}');
                }
                //HTML5 W3C 提议
                else if (element.requestFullScreen) {
                    document.exitFullscreen();
                }
                //IE 11
                else if (element.msRequestFullscreen) {
                    document.msExitFullscreen();
                }
                // Webkit (works in Safari5.1 and Chrome 15)
                else if (element.webkitRequestFullScreen) {
                    document.webkitCancelFullScreen();
                }
                // Firefox (works in nightly)
                else if (element.mozRequestFullScreen) {
                    document.mozCancelFullScreen();
                }
                this.inFullScreenMode = false
            },
            // 改变侧边栏大小
            resizeSideBar: function () {
                this.sideBarOpen = !this.sideBarOpen
            },
            // 上一个页面
            toLeftPage: function () {
                this.$nextTick(function () {
                    var iframeTabs = this.$refs['iframe-tabs']
                    var offsetWidth = iframeTabs.offsetWidth
                    var scrollWidth = iframeTabs.scrollWidth
                    var offsetLeft = iframeTabs.offsetLeft
                    if (scrollWidth <= offsetWidth) {
                        return
                    }
                    if (offsetLeft < 0) {
                        var leftDistance = offsetLeft + offsetWidth
                        if (leftDistance > 0) {
                            leftDistance = 0
                        }
                        iframeTabs.style.left = leftDistance + 'px'
                    }

                })

            },
            // 下一个页面
            toRightPage: function () {
                this.$nextTick(function () {
                    var iframeTabs = this.$refs['iframe-tabs']
                    var offsetWidth = iframeTabs.offsetWidth
                    var scrollWidth = iframeTabs.scrollWidth
                    var offsetLeft = iframeTabs.offsetLeft
                    if (scrollWidth <= offsetWidth) {
                        return
                    }
                    if (Math.abs(offsetLeft) < scrollWidth - offsetWidth) {
                        iframeTabs.style.left = offsetLeft - offsetWidth + 'px'
                    }
                })
            },
            // 重载当前页面
            reLoadCurrentPage: function () {
                this.$nextTick(function () {
                    if (this.selectedTabsIndex === -1) {
                        this.$refs['iframe-home'].contentWindow.location.reload();
                        return
                    }
                    this.$refs['iframe-' + this.selectedTabsIndex][0].contentWindow.location
                        .reload()
                })
            },
            // 关闭当前标签页
            closeCurrentTabs: function (index) {
                if (index == undefined)
                    index = this.selectedTabsIndex;
                this.tabsList.splice(index, 1)
                var _this = this
                setTimeout(function () {
                    if (_this.tabsList.length > index) {
                        _this.selectedTabsIndex = index
                    } else {
                        _this.selectedTabsIndex = index - 1
                    }
                }, 100)
            },
            closeTabByName: function (name) {
                if (name == null || name == undefined || name == "")
                    return;
                if (this.tabsList.length == 0)
                    return;
                //获取当前标签所在的位置
                var index = -1;
                $.each(this.tabsList, function (i, item) {
                    if (item.name == name) {
                        index = i;
                        return false;
                    }
                })
                if (index == -1)
                    return;
                this.tabsList.splice(index, 1)
                var _this = this
                setTimeout(function () {
                    if (_this.tabsList.length > index) {
                        _this.selectedTabsIndex = index
                    } else {
                        _this.selectedTabsIndex = index - 1
                    }
                }, 100)
            },

            // 关闭所有
            closeAllTabs: function () {
                this.tabsList = []
                this.selectedTabsIndex = -1
                this.$nextTick(function () {
                    this.$refs['iframe-tabs'].style.left = 0 + 'px'
                })
            },
            // 关闭其他
            closeOtherTabs: function () {
                if (this.tabsList.length === 0) return
                var tab = this.tabsList[this.selectedTabsIndex]
                this.tabsList = [tab]
                this.selectedTabsIndex = 0
            },
            // 处理tab滚动
            handleTabScroll: function () {
                // 待实现
                // this.$nextTick(function() {
                //     var tabs = this.$refs['iframe-tabs']
                //     var elLeft = tabs.querySelector('.layui-this').offsetLeft
                //     if (elLeft >= 0 && elLeft <= Math.abs(tabs.offsetLeft)) {
                //         return
                //     } else {
                //         tabs.style.left = -(elLeft - elWidth) + 'px'
                //     }
                // })
            },
            openTabByMenu: function (menu, alignRight) {

                //写入日志.
                UserLogInsert("MenuClick", menu.Name + "@" + menu.Icon + "@" + menu.Url);

                this.openTab(menu.Name, menu.Url, alignRight);
            },
            openTab: function (name, src, alignRight) {
                //如果发起实体类的流程，是通过一个页面中专过去的.
                /*
                 *  /WF/CCBill/Opt/StartFlowByNewEntity.htm
                 *  这里不解析特殊的业务逻辑, 让页面解析。
                 *
                 */
                if (this.tabsList.length >= 30) {
                    layer.alert('最多可以打开30个标签页~');
                    return;
                }
                var obj = {
                    name: name,
                    src: src
                }

                var idx = this.checkExist(obj)
                if (idx > -1) {
                    this.selectedTabsIndex = idx
                    this.reLoadCurrentPage()
                    return
                }

                if (alignRight) {
                    this.tabsList.splice(this.selectedTabsIndex + 1, 0, obj)
                    this.selectedTabsIndex = this.selectedTabsIndex + 1
                } else {
                    this.tabsList.push(obj)
                    this.selectedTabsIndex = this.tabsList.length - 1

                }
                // if (this.tabsList.length > 5)
                //     this.handleTabScroll()
            },
            checkExist: function (obj) {
                for (var i = 0; i < this.tabsList.length; i++) {
                    var item = this.tabsList[i]
                    if (item.name === obj.name && item.src === obj.src) {
                        return i
                    }
                }
                return -1
            },
            foldMenus: function (menus, c, ev) {
                for (var i = 0; i < menus.length; i++) {
                    var item = menus[i]
                    if (item.No === c.No) {
                        item.open = !item.open
                        continue
                    }
                    item.open = false
                }

            },
            generatePickerBody: function () {
                var tag = "<div style=\"padding-left:10px;padding-right:10px;padding-top:10px\">" +
                    "<form class=\"layui-form layui-form-pane\" action=\"\">" +
                    "   <div class=\"layui-form-item\" pane>" +
                    "   <label class=\"layui-form-label\">\u5206\u680F\u5E03\u5C40</label>" +
                    "<div class=\"layui-input-block\">";
                if (this.IsShowTwoLevelMenu == true)
                    tag += "<input type=\"checkbox\" lay-skin=\"switch\" lay-text=\"\u5F00\u542F|\u5173\u95ED\" lay-filter=\"layout\" disabled>" + "</div>" + "</div>" + "</form>" + "</div>" + "<hr class=\"layui-border-black\">" + "<div class='theme-picker'>";
                else
                    tag += "<input type=\"checkbox\" lay-skin=\"switch\" lay-text=\"\u5F00\u542F|\u5173\u95ED\" lay-filter=\"layout\" ".concat(this.classicalLayout ? '' : 'checked', ">" + "</div>" + "</div>" + "</form>" + "</div>" + "<hr class=\"layui-border-black\">" + "<div class='theme-picker'>");
                for (var key in themeData) {
                    if (themeData.hasOwnProperty(key)) {
                        var item = themeData[key]
                        tag += "\n                    <div class=\"theme\" style=\"background-color: ".concat(item.logo, "\" onclick=\"chooseTheme('").concat(key, "')\">\n                        ").concat(item.alias, "\n                    </div>\n                    ");
                    }
                }
                tag += '</div>'
                return tag;
            },
            openThemePicker: function () {
                var _this = this
                var height = window.innerHeight * 0.8
                layer.open({
                    type: 1,
                    title: '颜色与布局',
                    content: this.generatePickerBody(),
                    area: ['300px', height + 'px'],
                    offset: 'rb',
                    shadeClose: true
                })
                layui.use('form', function () {
                    var form = layui.form
                    form.render()
                    form.on("switch(layout)", function (e) {
                        _this.classicalLayout = !_this.classicalLayout
                        _this.updateLayout()
                    })
                })

            },
            updateLayout: function () {
                var layout = document.getElementById("layout-data")
                if (!this.classicalLayout) {
                    try {
                        this.classicalLayout = false
                        this.selectTopMenu(0)
                        layout.innerHTML = "\n                        .g-admin-layout .layui-side{\n                            width: 285px\n                        }\n                        .g-admin-layout .layui-logo, .layui-side-menu .layui-nav{\n                            background-color: white;\n                            position: absolute;\n                            \n                            height: 50px;\n                            line-height:50px;\n                            color: #333;\n                            box-shadow: none;\n                        }\n                        .layui-side-menu .layui-side-scroll{\n                            background-color: white;\n                            width: 305px\n                        }\n                        .g-admin-pagetabs, .g-admin-layout .layui-body, .g-admin-layout .layui-footer, .g-admin-layout .g-layout-left{\n                            left:285px;\n                        }\n                        .layui-side-menu .layui-nav .layui-nav-item a{\n                            height: 30px;\n                            line-height: 30px;\n                            color:#5f626e;\n                            display: flex;\n                            align-items: center;\n                        }\n                        .layui-side-menu .layui-nav .layui-nav-item .layui-icon{\n                            margin-top: -14px;\n                        }          \n                    ";
                        localStorage.setItem("classicalLayout", "0")

                    } catch (error) {
                        layer.msg('加载失败')
                    }
                } else {
                    this.classicalLayout = true
                    layout.innerHTML = ''
                    localStorage.setItem("classicalLayout", "1")
                }
                var color = localStorage.getItem("themeColor")
                chooseTheme(color);

            },
            refreshMenuTree: function (data) {
                console.log(data)
                this.menuTreeData = new MenuConvertTools(this.webUser, data).convertToTreeData();
                //如果是二级菜单显示去掉系统菜单
                if (this.IsShowTwoLevelMenu == true && this.menuTreeData.length > 0) {
                    var modulesNode = [];
                    this.menuTreeData.forEach(systemItem => {
                        modulesNode = $.merge(modulesNode, systemItem.children);

                    });

                    this.menuTreeData = modulesNode;
                }
                layer.close(loading);
                // var color = localStorage.getItem("themeColor")
                // chooseTheme(color)
                if (this.IsShowTwoLevelMenu == true)
                    localStorage.setItem('classicalLayout', "1");
                this.classicalLayout = parseInt(localStorage.getItem('classicalLayout')) === 1
                this.updateLayout()
            },
            closeDropdown: function (e) {
                try {
                    e.target.parentNode.parentNode.classList.remove('layui-show')

                } catch (e) {
                }
                var _this = this
                if (_this.closeTimeout) {
                    clearTimeout(_this.closeTimeout)
                    _this.closeTimeout = null
                }
                _this.closeTimeout = setTimeout(function () {
                    _this.showShortCut = false
                    _this.showShortOA = false
                    _this.showUserActions = false
                    _this.tabDropdownVisible = false
                    clearTimeout(_this.closeTimeout)
                    _this.closeTimeout = null
                }, 30)

            },
            stopTimeout: function () {
                clearTimeout(this.closeTimeout)
                this.closeTimeout = null
            },
            logout: function () {

                if (confirm("提示确定需要退出？") == false)
                    return;

                var handler = new HttpHandler("BP.WF.HttpHandler.WF_Portal");
                var data = handler.DoMethodReturnString("Default_LogOut");
                SetHref(data); // "Login.htm?DoType=Logout";

                //  win
                //  var url = getPortalConfigByKey("LogoutPath", "./") + data;
                //window.location.href = filterXSS(url);// "Login.htm?DoType=Logout";
            },
            logoutExt: function () {
                var handler = new HttpHandler("BP.WF.HttpHandler.WF_Portal");
                var data = handler.DoMethodReturnString("Default_LogOut");
                var url = getPortalConfigByKey("LogoutPath", "./") + data;
                SetHref(url); // "Login.htm?DoType=Logout";
            },
            GoToAppClassic: function () {
                var webUser = new WebUser();
                SetHref("../AppClassic/Login.htm?UserNo=" + webUser.No + "&Token=" + webUser.Token + "&OrgNo=" + webUser.OrgNo);
            },
            GoToMobile: function () {
                var webUser = new WebUser();  //退出
                var url = "../../FastMobilePortal/Login.htm?UserNo=" + webUser.No + "&Token=" + webUser.Token + "&OrgNo=" + webUser.OrgNo;
                SetHref(url);
            },
            initMenus: function () {

                var handler = new HttpHandler("BP.WF.HttpHandler.WF_Portal");
                var data = handler.DoMethodReturnString("Default_Init");
                if (data.indexOf('err@') == 0) {
                    alert(data);
                    return;
                }
                if (data.indexOf('url@') == 0) {
                    var url = data.replace('url@', '');
                    SetHref(url);
                    return;
                }
                data = JSON.parse(data);
                this.refreshMenuTree(data);
                this.initContextMenu()
            },
            initContextMenu: function () {
            },
            initChildContextMenu: function () {

            },
            bindDropdown: function (type) {

            },

            openLayer: function (uri, name, w, h) {
                //console.log(uri, name);

                if (w === 0)
                    w = window.innerWidth;

                if (w === undefined)
                    w = window.innerWidth / 2;

                if (h === undefined)
                    h = window.innerHeight;

                layer.open({
                    type: 2,
                    title: name,
                    content: [uri, 'no'],
                    area: [w + 'px', h + 'px'],
                    offset: 'rb',
                    shadeClose: true
                })
            },
            calcClassList: function (item, type) {
                var cList = ['context-menu']
                if (item.type === 'flow') cList.push(type === 1 ? 'flow-node' : 'flow-node-child')
                if (item.type === 'form') cList.push(type === 1 ? 'form-node' : 'form-node-child')
                return cList
            }
        },
        mounted: function () {
            // fix firefox bug
            document.body.ondrop = function (event) {
                event.preventDefault();
                event.stopPropagation();
            }
            this.SystemName = getPortalConfigByKey("SystemName", "驰骋BPM");
            this.SystemLogo = getPortalConfigByKey("SystemLogo", "./image/logo.png");
            this.IsShowFast = getPortalConfigByKey("IsShowFast", true);
            this.IsShowOA = getPortalConfigByKey("IsShowOA", false);
            this.IsShowRefresh = getPortalConfigByKey("IsShowRefresh", true);
            this.IsShowFullScreen = getPortalConfigByKey("IsShowFullScreen", true);
            this.IsShowTheme = getPortalConfigByKey("IsShowTheme", true);
            this.IsShowFlexible = getPortalConfigByKey("IsShowFlexible", true);
            this.IsShowTwoLevelMenu = getPortalConfigByKey("IsShowTwoLevelMenu", false);
            this.webUser = new WebUser();
            this.isAdmin = this.webUser.No === "admin" || parseInt(this.webUser.IsAdmin) === 1;
            this.initMenus();
        },
    })

}