 <div id="index" v-cloak>
    <div id="aside">
        <el-menu
                :style="{width:(properties.isCollapse?'64px':'200px')}"
                :default-active="properties.defaultActive"
                @open="handleOpen"
                @close="handleClose"
                @select="handleSelect"
                :unique-opened="properties.uniqueOpened"
                :collapse="properties.isCollapse"
                :collapse-transition="properties.transition"
                background-color="#252a2f"
                text-color="#d6d6d6"
                active-text-color="#ffd04b">
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-setting"></i>
                    <span>系统设置</span>
                </template>
                <el-menu-item index="1-1">映射管理</el-menu-item>
            </el-submenu>
        </el-menu>
    </div>

    <div id="main">
        <div id="head">
            <div class="collapseSwitch" @click="collapseSwitch">
                <a :class="properties.isCollapse?'reversal':''"><i class="el-icon-s-grid"></i></a>
            </div>

            <el-link :underline="false" @click="onHome" icon="el-icon-s-home">首页</el-link>

            <div class="menu">
                <ul>
                    <li>
                        <el-link :underline="false" @click="onHome" icon="el-icon-message-solid"><span
                                style="line-height: 20px;"><el-badge is-dot class="item">消息</el-badge></span></el-link>
                    </li>
                    <li>
                        <el-dropdown>
                            <el-link :underline="false" @click="onHome" icon="el-icon-example-solid">我的</el-link>

                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>修改信息</el-dropdown-item>
                                <el-dropdown-item>修改密码</el-dropdown-item>
                                <el-dropdown-item>退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </li>
                    <li>
                        <el-link :underline="false" @click="onHome" icon="el-icon-warning">关于</el-link>
                    </li>
                </ul>
            </div>
        </div>
        <div id="content">
            <el-tabs v-model="activeTabName" type="border-card" closable @tab-remove="removeTab">
                <el-tab-pane
                        v-for="(item, index) in tabs"
                        :key="item.name"
                        :label="item.title"
                        :name="item.name">
                    <iframe :src="item.url" style="width: 100%;height: 100%;border: 0;"></iframe>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</div>
<style>
    * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
        margin: 0;
        padding: 0;
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    }

    html, body, #index, #main, #content {
        width: 100%;
        height: 100%;
    }

    a {
        text-decoration: none;
        outline: 0;
        cursor: pointer;
        -webkit-transition: color .2s ease;
        transition: color .2s ease;
        -webkit-text-decoration-skip: objects;
        color: #757575;
    }

    a:active, a:hover {
        outline-width: 0
    }

    a:hover {
        opacity: 0.7;
    }

    a:active {
        opacity: 0.9;
    }

    a:active, a:hover {
        outline: 0;
        text-decoration: none
    }

    a[disabled] {
        color: #ccc;
        cursor: not-allowed;
        pointer-events: none
    }

    body {
        overflow: hidden;
    }

    #index {
        display: flex;
    }

    #aside {
        background: #252a2f;
    }

    #aside .el-menu {
        transition: all .5s;
        border-right: 0
    }

    #aside .el-menu-item, .el-submenu__title {
        height: 40px;
        line-height: 40px;
    }

    #main {
        flex-grow: 1;
    }

    #head {
        width: 100%;
        height: 40px;
        line-height: 40px;
        overflow: hidden;
        background: #252a2f;
    }

    #head .collapseSwitch {
        display: inline-block;
        height: 40px;
        width: 40px;
        text-align: center;
        font-size: 24px;
        border-left: 1px solid #424242;
        border-right: 1px solid #424242;
    }

    #head .collapseSwitch a {
        display: inline-block;
        transition: all 1s;
    }

    #head .collapseSwitch a.reversal {
        transform: rotate(90deg);
    }

    #head a {
        color: #d6d6d6;
        vertical-align: top;
    }

    #head a:hover {
        color: #409EFF;
        opacity: 1;
    }

    #head .collapseSwitch:hover {
        background: #3b4146;
    }

    #head .menu {
        display: inline-block;
        float: right;
    }

    #head .menu ul {
        display: inline-block;
    }

    #head .menu ul li {
        display: inline-block;
        vertical-align: top;
    }

    #head .menu ul li a {
        display: inline-block;
        text-align: center;
        position: relative;
        margin: 0 10px;
        height: 40px;
        vertical-align: top;
    }

    #head .menu ul li a:after {
        content: "";
        display: inline-block;
        background: #409EFF;
        width: 0;
        height: 2px;
        position: absolute;
        bottom: 2px;
        left: 50%;
        transition: all 0.3s;
    }

    #head .menu ul li a:hover:after {
        width: 100%;
        left: 0%;
    }

    #content {
        height: calc(100% - 35px);
    }

    #content > div {
        height: 100%;
    }

    #content > div > .el-tabs__content {
        padding: 0;
        height: calc(100% - 43px);
    }

    #content .el-tabs__item {
        padding: 0 10px;
    }

    #content .el-tabs__nav {
        white-space: normal !important;
    }

    #content > div > .el-tabs__content .el-tab-pane {
        height: 100%;
        background: #f0f2f5;
    }

</style>
<script>
    window.index = new Vue({
        el: "#index",
        data: {
            tabs: [],//所有Tabs
            activeTabName: '',
            properties: {
                uniqueOpened: true,//是否保持一个子菜单展开
                isCollapse: false,//左侧菜单是否收缩
                transition: false,
                defaultActive: "1-1",
            }
        },
        methods: {
            onHome: function () {
                this.addTab({
                    title: '首页',
                    name: 'home',
                    url: '${contextPath}/home.htm'
                })
            },
            collapseSwitch: function () {
                this.properties.isCollapse = !this.properties.isCollapse;
            },
            handleOpen: function () {

            },
            handleClose: function () {

            },
            handleSelect: function (index) {
                switch (index) {
                    case "1-1":
                        this.addTab({title: "映射管理", name: "mapping", url: "/mapping.htm"});
                        break;
                }
                return false;
            },
            addTab: function (tab) {
                //查找是否存在该tab
                var tempTabs = this.tabs.filter(function (tab_) {
                    return tab_.name === tab.name;
                })
                //不存在则添加
                if (tempTabs.length <= 0) {
                    this.tabs.push(tab)
                }
                this.activeTabName = tab.name;
            },
            removeTab: function (tabName) {
                var activeName = this.activeTabName;
                var tempTabs = this.tabs;
                if (activeName === tabName) {
                    tempTabs.forEach(function (tab, index) {
                        if (tab.name === tabName) {
                            var nextTab = tempTabs[index + 1] || tempTabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }
                this.activeTabName = activeName;
                this.tabs = tempTabs.filter(function (tab) {
                    return tab.name !== tabName
                })
            }
        },
        created: function () {
        },
        mounted: function () {
            this.onHome();//页面初始好后打开首页
        },
        watch: {}
    })
</script>

