<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <title>Open Source Customer Support System</title>
    <link rel="stylesheet" href="/aicss/static/cdn/element-ui/2.15.1/theme-chalk/index.min.css">
    <script src="/aicss/static/cdn/vue/2.6.11/vue.min.js"></script>
    <script src="/aicss/static/cdn/element-ui/2.15.1/index.js"></script>
    <script src="/aicss/static/cdn/jquery/3.6.0/jquery.min.js"></script>

    <link rel="stylesheet" href="/aicss/static/css/common.css">
    <script src="/aicss/assets/js/functions.js"></script>
    <style>
        html,
        body {
            height: 100%;
            padding: 0;
            margin: 0;
        }
        body {
            overflow: hidden;
            background-color: #f5f5f5;
        }

        .el-aside{
            height: 100%;
            background: #fff;
            border: solid 1px #e6e6e6;
        }
        .el-aside .el-menu{
            border-right: none;
        }
        .mainLogo{
            font-size: 20px;
            font-weight: bold;
        }
        .mainMain{
            background: #fff;
            margin-left: 10px;
            margin-bottom: 60px;
        }
        .el-card__body{
            cursor: pointer;
        }

    </style>

</head>
<body class="text-center">
<div id="app">
    <template>
        <div class="mainLeftMenu">
            <div style="margin: 20px auto;">
                <el-badge :type="onlineType" is-dot class="item">
                    <el-avatar class="mainLogo" title="Customer Support" :size="45" :src="adminAvator"></el-avatar>
                </el-badge>
            </div>
            <div class="menuLeftItem active" v-on:click="openIframeUrl('/aicss/pannel')">
                <i class="el-icon-platform-eleme"></i>
                <span slot="title">Dashboard</span>
            </div>

            <div class="menuLeftItem" v-on:click="haveNewMessage='';openIframeUrl('/aicss/chat_main')">
                <el-badge :value="haveNewMessage" class="item">
                    <i class="el-icon-chat-dot-round"></i>
                </el-badge>
                <span slot="title">Chat</span>
            </div>

            <div style="display: none" class="menuLeftItem" v-on:click="openIframeUrl('/aicss/setting_deploy')">
                <i class="el-icon-notebook-2"></i>
                <span slot="title">Integration</span>
            </div>

            <div class="menuLeftItem" v-on:click="openIframeUrl('/aicss/setting')">
                <i class="el-icon-setting"></i>
                <span slot="title">Settings</span>
            </div>

            <div class="menuLeftItem menuLeftItemLogout" v-on:click="logout()">
                <i class="el-icon-switch-button"></i>
                <span slot="title">Logout</span>
            </div>
        </div>
        <div class="mainRight">
            <iframe class="mainIframe" v-bind:src="iframeUrl" frameborder="0"></iframe>
        </div>
    </template>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        delimiters:["<{","}>"],
        data: {
            window:window,
            mailTotal:0,
            adminAvator:"",
            adminRole:"",
            onlineType:"success",
            haveNewMessage:"",
            iframeUrl:"/aicss/pannel",
        },
        methods: {
            focusWindow(){
                var _this=this;
                window.addEventListener('message',function(e){
                    var redata=e.data;
                    if(!redata.name||!redata.body){
                        return;
                    }
                    notify(redata.name, {
                        body: redata.body,
                        icon: redata.icon
                    }, function(notification) {
                        window.focus();
                        notification.close();
                        _this.openIframeUrl("/aicss/chat_main");
                    });
                });
            },
            openIframeUrl(url){
                this.iframeUrl=url;
            },
            logout(){
                localStorage.removeItem("aicss-token");
                this.openIframeUrl('/aicss/login');
            },
            openUrl(url){
                window.location.href=url;
            },
            GetQueryString(name){
                var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if(r!=null)return  unescape(r[2]); return null;
            },
            checkAuth(){
                let _this=this;
                $.ajax({
                    type:"GET",
                    url:"/aicss/kefuinfo",
                    headers:{
                        "aicss-token":localStorage.getItem("aicss-token")
                    },
                    success: function(data) {
                        if (data.code != 200) {
                            window.location.href="/aicss/login";
                        } else {
                            _this.adminAvator=data.result.avator;
                            _this.iframeUrl = "/aicss/pannel";
                        }
                    }
                });
            }
        },
        created: function () {
            this.checkAuth();
            this.focusWindow();
            $(function(){
                $("body").on("click",".menuLeftItem",function(){
                    $(".menuLeftItem").removeClass("active");
                    $(this).addClass("active");
                });
            })
        }
    })
    $(window).bind("focus",function(e){
        //alert(1);
    });
</script>
</html>
