<template>
    <div class="navbar-header pull-right">
        <div class="navbar-account">
            <ul class="account-area">
                <li class="visible-xs hidden-xs" id="smallSearchLi">
                    <a class="dropdown-toggle" data-toggle="dropdown" title="搜索" href="#">
                        <i class="icon fa fa-search"></i>
                    </a>

                    <!--Notification Dropdown-->
                    <ul class=""></ul>
                </li>
                <li class="hidden-xs" style="display:none;">
                    <div class="input-group navar-search " style="border-collapse:collapse;display: table">
                        <input id="searchCond" class="navbar-searchins" type="text" autocomplete="off" size="40" placeholder="请输入搜索内容" oninput="this.value == '' ? hideRemoveIcon(this, 'removeIcon') : showRemoveIcon(this, 'removeIcon');"><button type="button" id="removeIcon" class="navbar-searchbtn" style="display: none;" onclick="    $('#searchCond').val(''); hideRemoveIcon(document.getElementById('searchCond'),'removeIcon')">
                        <i class="glyphicon glyphicon-remove iconcolor"></i>
                    </button><button type="button" class="navbar-searchbtn" style="" onclick="alert('开发中。。。');">
                        <i class="glyphicon glyphicon-search iconcolor"></i>
                    </button>
                    </div>
                </li>
                <li>
                    <div class="hidden-xs" id="bs-example-navbar-collapse-1">
                        <ul id="pcmenu" class="nav navbar-nav navbar-right">
                            <template v-for="(mge,index) in BaseInfo.MenuGroup">
                                <li v-bind:class="index==0?'active':''">
                                    <a v-bind:id="mge.GROUPID" class="menu-group" href="javascript:void(0);"  v-on:click="changeMenu(mge.GROUPID)">{{mge.GROUPNAME}}</a>
                                </li>
                            </template>
                        </ul>
                    </div>
                    <a id="mobileMenu" class="login-area dropdown-toggle visible-xs" data-toggle="dropdown" title="菜单" href="#" style=" padding-left: 5px; padding-right: 5px;">
                        <div class="user-name">菜单</div>
                        <div class="user-icon" style="padding-left: 2px;margin-top: 5px;">
                                    <span class="profile">
                                        <i class="fa fa-sort-down"></i>
                                    </span>

                        </div>
                    </a>
                    <ul id="elem" class="dropdown-menu menu-menu" style="color:black">
                        <template v-for="(mge,index) in BaseInfo.MenuGroup">
                            <li v-bind:class="">
                                <a v-bind:id="mge.GROUPID" class="menu-group" href="javascript:void(0);"  v-on:click="changeMenu(mge.GROUPID)">{{mge.GROUPNAME}}</a>
                            </li>
                        </template>
                    </ul>
                </li>
                <li id="favorDropDown" class="hidden-xs">
                    <a class="dropdown-toggle" data-toggle="dropdown" title="收藏夹" href="#">
                        <i class="icon glyphicon glyphicon-star-empty" style="font-size: 18px"></i>
                    </a>

                    <!--Tasks Dropdown-->
                    <ul class="pull-right dropdown-menu">

                        <li style="padding-top:5px;padding-bottom: 5px;" id="favorcontainer">

                            <div class="tabbable">
                                <ul class="nav nav-tabs tabs-flat favorul">
                                    <li class="active text-center" style="padding-right: 0; width: 40% !important">
                                        <a data-toggle="tab" href="#favorhome" class="favortab">
                                            收藏功能
                                        </a>
                                    </li>
                                </ul>

                                <div class="tab-content tabs-flat" style="padding:5px;background-color: #ffffff;">
                                    <div id="favorhome" class="tab-pane in active">
                                        <ul id="favorUl" class="" style="list-style: none;padding: 0px">

                                        </ul>
                                    </div>
                                </div>
                            </div>

                        </li>
                    </ul>
                    <!--/Tasks Dropdown-->
                </li>
                <li class="">
                    <a class="login-area dropdown-toggle" data-toggle="dropdown">
                        <div class="avatar hidden-xs" title="用户信息">
                            <img v-bind:src="BaseInfo.Avatar">
                        </div>
                        <div class="user-name">
                            {{BaseInfo.UserName}}
                        </div>
                        <div class="user-icon">
                                <span class="profile">
                                    <span class="glyphicon glyphicon-certificate"></span>
                                </span>
                        </div>
                    </a>
                    <!--Login Area Dropdown-->
                    <ul class="pull-right dropdown-menu dropdown-login-area">


                        <li style="height:65px;cursor: pointer;">
                            <div class="avatar-area">
                                <img v-bind:src="BaseInfo.Avatar" class="avatar">
                            </div>
                            <ul>
                                <span style="padding-left: 10px;padding-top:5px ">{{BaseInfo.UserName}}</span>
                                <span style="padding-left: 10px;padding-top:5px "><small>{{BaseInfo.Email}}</small></span>
                            </ul>
                        </li>

                        <!--<li class="edit">-->
                            <!--<a href="javascript:void(0)" class="" v-on:click="MenuGroupMgr">菜单组设置</a>-->
                        <!--</li>-->

                        <li class="edit">
                            <a href="javascript:void(0)" class="pull-left" v-on:click="setting">设置</a>
                        </li>

                        <!--Theme Selector Area-->
                        <li class="theme-area">
                            <ul class="colorpicker " id="skin-changer">
                                <li><a class="colorpick-btn" href="javascript:void(0);" style="background-color:#5DB2FF;" v-bind:rel="BaseInfo.ResourcePath + '/assets/teld/css/skins/blue.min.css'"></a></li>
                                <li><a class="colorpick-btn" href="javascript:void(0);" style="background-color:#2dc3e8;" v-bind:rel="BaseInfo.ResourcePath + '/assets/teld/css/skins/azure.min.css'"></a></li>
                                <li><a class="colorpick-btn" href="javascript:void(0);" style="background-color:#03B3B2;" v-bind:rel="BaseInfo.ResourcePath + '/assets/teld/css/skins/teal.min.css'"></a></li>
                                <li><a class="colorpick-btn" href="javascript:void(0);" style="background-color:#47a447;" v-bind:rel="BaseInfo.ResourcePath + '/assets/teld/css/skins/teld.min.css'"></a></li>
                                <li><a class="colorpick-btn" href="javascript:void(0);" style="background-color:#FF8F32;" v-bind:rel="BaseInfo.ResourcePath + '/assets/teld/css/skins/orange.min.css'"></a></li>
                                <li><a class="colorpick-btn" href="javascript:void(0);" style="background-color:#cc324b;" v-bind:rel="BaseInfo.ResourcePath + '/assets/teld/css/skins/pink.min.css'"></a></li>
                                <li><a class="colorpick-btn" href="javascript:void(0);" style="background-color:#AC193D;" v-bind:rel="BaseInfo.ResourcePath + '/assets/teld/css/skins/darkred.min.css'"></a></li>
                                <li><a class="colorpick-btn" href="javascript:void(0);" style="background-color:#8C0095;" v-bind:rel="BaseInfo.ResourcePath + '/assets/teld/css/skins/purple.min.css'"></a></li>
                                <li><a class="colorpick-btn" href="javascript:void(0);" style="background-color:#0072C6;" v-bind:rel="BaseInfo.ResourcePath + '/assets/teld/css/skins/darkblue.min.css'"></a></li>
                                <li><a class="colorpick-btn" href="javascript:void(0);" style="background-color:#585858;" v-bind:rel="BaseInfo.ResourcePath + '/assets/teld/css/skins/gray.min.css'"></a></li>
                                <li><a class="colorpick-btn" href="javascript:void(0);" style="background-color:#474544;" v-bind:rel="BaseInfo.ResourcePath + '/assets/teld/css/skins/black.min.css'"></a></li>
                                <li><a class="colorpick-btn" href="javascript:void(0);" style="background-color:#001940;" v-bind:rel="BaseInfo.ResourcePath + '/assets/teld/css/skins/deepblue.min.css'"></a></li>
                            </ul>
                        </li>
                        <!--/Theme Selector Area-->
                        <li class="dropdown-footer">

                            <a href="javascript:void(0)" onclick="$('#abortModal').modal('show')" class="pull-left">
                                关于
                            </a>
                            <input type="hidden" id="LoginOutUrl" v-bind:value="BaseInfo.LoginOutUrl">
                            <a id="logout" href="javascript:void(0)" v-on:click="logout">
                                注销
                            </a>
                        </li>
                    </ul>
                    <!--/Login Area Dropdown-->
                </li>
                <!-- /Account Area -->
                <!--Note: notice that setting div must start right after account area list.
                no space must be between these elements-->
                <!-- Settings -->
            </ul>
        </div>
    </div>
</template>
<style>
    #pcmenu {
        margin-right: 0px;
    }

    #pcmenu a {
        color: white !important;
        font-size: 16px;
    }

    #pcmenu > li > a:hover, #pcmenu > li > a:focus .menu-menu li a {
        text-decoration: none;
        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        background-color: inherit;
    }

    .menu-menu li.active {

    }
</style>
<script>

    export default{
        data(){
            var that = this;
            return {
                BaseInfo:that.info
            }
        },
        mounted(){
            //设置上次访问的groupId
            let mid = readCookie(getMenuGroupCookieKey())
            if(mid){

                this.changeMenu(mid)
            }
            function renderOldVersion(rows) {
                var template = '<div class="widget collapsed" style="margin-bottom:5px;">' +
                    '<div class="widget-header">' +
                        '<i class="widget-icon fa fa-file-text iconcolor"></i>' +
                        '<span class="widget-caption">{0}</span>' +
                        '<span class="widget-caption" style="padding-left: 10px">{1}</span>' +
                        '<div class="widget-buttons"><a href="#" data-toggle="collapse">详情</a></div>' +
                    '</div>' +
                    '<div class="widget-body table-responsive" style="word-wrap: break-word;overflow-x:auto">{2}</div>' +
                '</div>';
                var list = [];
                for (var i = 0; i < rows.length; i++) {
                    var item = rows[i];
                    var version = item.Version;
                    var temp = new String(template);
                    getDataSync(window.CmsUrl+"&Versions=" + version, 'get',
                                    null, function (data) {
                                        if (data.state == 0) {
                                            NotifyError(data.errmsg);
                                        }
                                        else {
                                            var f0 = new RegExp("\\{0\\}", "gm");
                                            var f1 = new RegExp("\\{1\\}", "gm");
                                            var f2 = new RegExp("\\{2\\}", "gm");
                                            temp = temp.replace(f0, version);
                                            temp = temp.replace(f1, item.Date);
                                            temp = temp.replace(f2, data.data.Content);
                                            list.push(temp);
                                        }

                                    }, function () {
                                        NotifyError("服务器内部错误");
                                    },null,false
                             );
                }
                $("#aboutList").html(list.join(""));

                //initZoomImg();
                $('.widget-buttons *[data-toggle="collapse"]').off("click").on("click", function (n) {
                    n.preventDefault();
                    n.stopPropagation();
                    var t = $(this).parents(".widget").eq(0), r = t.find(".widget-body"), i = $(this).find("i"), u = "fa-plus", f = "fa-minus", e = 300;
                    t.hasClass("collapsed") ? (i && i.addClass(f).removeClass(u), t.removeClass("collapsed"), r.slideUp(0, function () {
                        r.slideDown(e)
                    })) : (i && i.addClass(u).removeClass(f), r.slideUp(200, function () {
                        t.addClass("collapsed")
                    }))
                });

                var first = $("div.widget").first();
                first.find(".widget-header").addClass("btn-primary");
                first.find("a").css("color", "white");
                first.find("i").removeClass("iconcolor");
                first.find("a").click();
                $('.widget').off("click").on("click", function (n) {
                    n.stopPropagation();
                    n.preventDefault();
                    var t = $(this).eq(0), r = t.find(".widget-body"), i = $(this).find("i"), u = "fa-plus", f = "fa-minus", e = 300;
                    t.hasClass("collapsed") ? (i && i.addClass(f).removeClass(u), t.removeClass("collapsed"), r.slideUp(0, function () {
                        r.slideDown(e)
                    })) : (i && i.addClass(u).removeClass(f), r.slideUp(200, function () {
                        t.addClass("collapsed")
                    }))


                });

            }
            $('#abortModal').on('show.bs.modal', function (e) {
                getDataAsync(window.CmsUrl+'&page=1&rows=100', 'get',
                        null, function (data) {
                            if (data.state == 0) {
                                NotifyError(data.errmsg);
                            }
                            else {
                                renderOldVersion(data.data.rows);
                            }

                        }, function () {
                            NotifyError("服务器内部错误");
                        },null,false
                 );

            })

        },
        props: {
            info:{
                type: Object,
                required: true
            }
        },
        methods:{
            logout:function () {
                bootbox.setDefaults("locale", "zh_CN");
                bootbox.confirm("确定注销吗?", function (ok) {
                    if (ok) {
                        eraseCookie('curMenuId');
                        eraseCookie("TELDSID")
                        eraseCookie("telda")
                        eraseCookie("teldb")
                        location.href = $("#LoginOutUrl").val();
                    }
                });
            },
            MenuGroupMgr:function () {
                this.$router.push("/Frame/MenuGroupMgr?");
            },
            setting:function () {
                eraseCookie('settingtabindex');

                this.$router.push("/Frame/Setting");
            },
            changeMenu:function (groupid) {
                this.$nextTick(function () {
                    var menuName = $("#"+groupid).text();
                    $("#mobileMenu").find(".user-name").text(menuName)
                    $("#"+groupid).closest("li").addClass("active")
                });

                this.$emit("subMenuChange",groupid);
            }
        }
    }
</script>
