<div id="index" v-cloak>
    <div id="aside" :style="{width:(prop.coll?'64px':'200px')}">
        <el-menu
                @open="handleOpen"
                @close="handleClose"
                @select="handleSelect"
                :default-active="prop.defaultActive"
                :unique-opened="prop.open"
                :collapse="prop.coll"
                :collapse-transition="prop.tran"
                background-color="#252a2f"
                text-color="#d6d6d6"
                active-text-color="#ffd04b">
            <el-submenu index="${tool.uuid()}" >
                <template slot="title">
                    <i class="el-icon-monitor"></i>
                    <span slot="title">系统设置</span>
                </template>
                <el-menu-item index="${tool.uuid()}" @click="addTab({title: '字典管理', name: 'dict', url: '${r'${context}'}/system/dict.htm'})">字典管理</el-menu-item>
                <el-menu-item index="${tool.uuid()}" @click="addTab({title: '文件管理', name: 'file', url: '${r'${context}'}/system/file.htm'})">文件管理</el-menu-item>
            </el-submenu>
<#list modules as item>
            <el-submenu index="${tool.uuid()}">
                <template slot="title">
                    <i class="el-icon-document-copy"></i>
                    <span slot="title">${item.moduleComment}</span>
                </template>
                <#list item.tables as table>
                <el-menu-item index="${tool.uuid()}" @click="addTab({title: '${table.tableComment}', name: '${table.tableName}', url: '${r"${context}"}/${item.moduleName}/${table.getFName()}.htm'})">${table.tableComment}</el-menu-item>
                </#list>
            </el-submenu>
</#list>
        </el-menu>
    </div>

    <div id="main" :style="{marginLeft:(prop.coll?'64px':'200px')}">
        <div id="head">
            <div class="collapseSwitch" @click="collapseSwitch">
                <a :class="prop.coll?'reversal':''"><i class="el-icon-s-fold"></i></a>
            </div>

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

            <div class="menu">
                <ul>
                    <li>
                        <el-input
                                size="mini"
                                placeholder="请输入搜索内容">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </li>
                    <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-user-solid">账户信息</el-link>

                            <el-dropdown-menu slot="dropdown">
                                <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-outline">系统版本</el-link>
                    </li>
                    <li>
                        <el-link :underline="false" icon="el-icon-switch-button"></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"
                        :lazy="true"
                        :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>
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html, body, #index {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    a:active, a:hover {
        opacity: 0.7;
        outline: 0;
        text-decoration: none
        cursor: pointer;
    }

    #aside {
        overflow: hidden;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        transition: all .5s;
        background: #252a2f;
    }

    #aside ul[role=menubar] {
        border-right: solid 0 #e6e6e6;
    }

    .el-submenu__title{
        height: 40px!important;
        line-height: 40px!important;
    }
    .el-menu-item {
        height: 40px!important;
        line-height: 40px!important;
    }
    .el-menu--popup-right-start{
        padding: 0px;
    }

    #main {
        height: 100%;
        margin-left: 200px;
        transition: all .5s;
    }

    #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 .5s;
    }

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

    #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,#content .el-tabs__content  {
        padding: 0;
        height: calc(100% - 40px);
    }

    #content > div,#content .el-tab-pane  {
        padding: 0;
        height: 100%;
    }

    #content div[role=tab]{
        padding: 0 10px;
    }
</style>
<script>
    window.index = new Vue({
        el: "#index",
        data: {
            tabs: [],//所有Tabs
            activeTabName: '',
            prop: {
                open: ${r"<#if prop.open>true<#else>false</#if>"},
                coll: ${r"<#if prop.coll>true<#else>false</#if>"},
                tran: ${r"<#if prop.tran>true<#else>false</#if>"}
            }
        },
        methods: {
            onHome: function () {
                this.addTab({
                    title: '首页',
                    name: 'home',
                    url: '${r"${contextPath}"}/home.htm'
                })
            },
            collapseSwitch: function () {
                this.prop.coll = !this.prop.coll;
            },
            handleOpen: function () {

            },
            handleClose: function () {

            },
            handleSelect: function (index) {

            },
            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>

