<template>
    <div class="IndexContainer">
        <el-container>
            <el-aside :class="[{'shortElaside':isCollapse},{'lognElaside':!isCollapse}]">
                <Navside :isCollapse="isCollapse"></Navside>
            </el-aside>
            <el-container>
                <el-header>
                    <Headside @lefthide="left_hide"></Headside>
                </el-header>
                <el-main>
                    <keep-alive>
                        <router-view></router-view>
                    </keep-alive>
                </el-main>
                <el-footer v-if="true"><p class="footer">济南佰意兴网络科技有限公司提供技术支持</p></el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    // @ is an alias to /src
    import Headside from '@/components/Headside.vue'
    import Navside from '@/components/Navside.vue'
    import Navs from '../api/Navs';

    export default {
        name: 'Home',
        data() {
            return {
                isCollapse: false,
                aSideState: false,
                thisClick: 0,
                tabwildState: 1,
                navs: Navs,
                handleTabsList: [{
                    title: '系统首页',
                    name: '1',
                    clmurl: '/',
                }],
                editableTabsValue: '1'
            }
        },
        methods: {
            left_hide() {
                this.aSideState = !this.aSideState;
                this.isCollapse = !this.isCollapse;
            },
            // handleTabsAdd: function (data) {
            //     let that = this;
            //     let str = ""; //存放第一层遍历的值
            //     let strArray = []; //存放第二层遍历的值
            //     let item = {};
            //     if (data == 1) {
            //         // 首页直接处理了
            //         item = {
            //             title: '系统首页',
            //             name: '系统首页',
            //             clmurl: '/',
            //         };
            //     } else {
            //         for (var i = 0; i < Navs.length; i++) {
            //             str += Navs[i].id; //获取第一层的值
            //             for (var j = 0; j < Navs[i].childs.length; j++) {
            //                 if (Navs[i].childs[j].clmid == data) {
            //                     strArray.push(Navs[i].childs[j])
            //                 }
            //             }
            //         }
            //         item = {
            //             title: strArray[0].clmname,
            //             name: strArray[0].clmname,
            //             clmurl: strArray[0].clmurl,
            //         };
            //     }
            //     // 去掉重复的
            //     that.handleTabsList.map(function (e, i) {
            //         if (e.title == item.title) {
            //             that.handleTabsList.splice(i, 1)
            //         }
            //     });
            //     that.handleTabsList.push(item);
            //     that.editableTabsValue = item.title;
            // },
        },
        components: {
            Headside,
            Navside
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .el-header {
        padding: 0 !important;
        height: 72px!important;
    }
    .shortElaside {
        width: 60px!important;
        overflow: hidden;
        height: 100%;
        float: left;
    }
    .lognElaside {
        width: 256px!important;
        overflow: hidden;
        height: 100%;
        float: left;
    }
    /deep/ .nav {
        width: 60px;
    }
     .el-main {
        width: 100%;
        height: 910px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
         padding-bottom: 30px;
        overflow-y: scroll;
    }
    .IndexContainer {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: #F0F2F5;
    }
  .IndexContainer>.el-container {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }
    .footer {
        position: absolute;
        bottom: 0px;
        width: 100%;
        padding: 10px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        text-align: center;
        font-size: 12px;
        color: #BDBDBD;
        background: #F0F2F5;
    }
</style>
