<template>
    <div style="width: 100%">

        <Assembly></Assembly>

        <el-tabs v-model="activeIndex"
                 v-if="openTab.length"
                 type="card"
                 :closable = "tabCloseable"
                 @tab-click='tabClick'
                 @tab-remove="tabRemove"
                 style="width: 100%;margin-top: 18px;height: 50px">
            <el-tab-pane
                    v-for="(item, index) in this.$store.state.openTab"
                    :key="item.name"
                    :label="item.name"
                    :name="item.route">
            </el-tab-pane>
            <section class="content-container">
                <div class="grid-content bg-purple-light">
                    <!--                <el-col :span="24" class="breadcrumb-container">-->
                    <!--                    <strong class="title">{{$route.name}}</strong>-->
                    <!--                    <el-breadcrumb separator="/" class="breadcrumb-inner">-->
                    <!--                        <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">-->
                    <!--                            {{ item.name }}-->
                    <!--                        </el-breadcrumb-item>-->
                    <!--                    </el-breadcrumb>-->
                    <!--                </el-col>-->
                    <el-col :span="24" class="content-wrapper">
                        <transition name="fade" mode="out-in">
                            <router-view></router-view>
                        </transition>
                    </el-col>
                </div>
            </section>
        </el-tabs>
    </div>
</template>

<script>
    import Assembly from "@/views/bus/Assembly";

    export default {
        name: 'TabMenu',
        components: { Assembly },
        data() {
            return {
                tabCloseable: true
            }
        },
        methods: {
            initTab(){
                // 刷新时以当前路由做为tab加入tabs
                // 当前路由不是首页时，添加首页以及另一页到store里，并设置激活状态
                // 当当前路由是首页时，添加首页到store，并设置激活状态
                if (this.$route.path !== '/' && this.$route.path !== '/main') {
                    // console.log('1');
                    this.$store.commit('add_tabs', {route: '/main' , name: '首页'});
                    this.$store.commit('add_tabs', {route: this.$route.path , name: this.$route.name });
                    this.$store.commit('set_active_index', this.$route.path);
                } else {
                    // console.log('2');
                    this.$store.commit('add_tabs', {route: '/main', name: '首页'});
                    this.$store.commit('set_active_index', '/main');
                    this.$router.push('/main');
                }
            },
            tabClick(tab){
                // console.log("tab",tab);
                // console.log('active',this.$store.state.activeIndex);
                this.$router.push({path: this.$store.state.activeIndex});
            },
            tabRemove(targetName){
                // console.log("tabRemove",targetName);
                //首页不删
                if(targetName == '/main'){
                    return
                }
                this.$store.commit('delete_tabs', targetName);
                if (this.$store.state.activeIndex === targetName) {
                    // 设置当前激活的路由
                    if (this.$store.state.openTab && this.$store.state.openTab.length >=1) {
                        // console.log('=============',this.$store.state.openTab[this.$store.state.openTab.length-1].route)
                        this.$store.commit('set_active_index', this.$store.state.openTab[this.$store.state.openTab.length-1].route);
                        this.$router.push({path: this.$store.state.activeIndex});
                    } else {
                        this.$router.push({path: '/main'});
                    }


                }
            },
        },
        mounted() {
            this.initTab();
        },
        watch:{
            '$route'(to,from){
                //判断路由是否已经打开
                //已经打开的 ，将其置为active
                //未打开的，将其放入队列里
                let flag = false;
                for(let item of this.$store.state.openTab){
                    // console.log("item.name",item.name)
                    // console.log("t0.name",to.name)

                    if(item.name === to.name){
                        // console.log('to.path',to.path);
                        this.$store.commit('set_active_index',to.path)
                        flag = true;
                        break;
                    }
                }

                if(!flag){
                    // console.log('to.path',to.path);
                    this.$store.commit('add_tabs', {route: to.path, name: to.name});
                    this.$store.commit('set_active_index', to.path);
                }

            },
            openTab(){
                this.openTab.length === 1 ? this.tabCloseable=false :this.tabCloseable = true;
            }
        },
        computed:{
            openTab:{
                get: function () {
                    return this.$store.state.openTab;
                },
                set:function (value) {
                    this.$store.commit('set_tabs', {value});
                    // console.log("opebTab监视:value = "+ value);
                }

            },
            activeIndex:{
                get:function () {
                    return this.$store.state.activeIndex;
                },
                set:function (value) {
                    this.$store.commit('set_active_index', value);
                }

            }
        }
    }
</script>

<style>
/*底层背景色*/
    .el-tabs__nav-scroll{
        background-color: rgb(239,243,246);
    }
/*首个内部边框*/
.el-tabs--card>.el-tabs__header .el-tabs__item:first-child{
    border: 1px solid rgba(80,109,130,.64);
}
/*其他内部边框*/
.el-tabs--card>.el-tabs__header .el-tabs__item{
    border: 1px solid rgba(80,109,130,.64);
}
/*外部大边框取消表格样式*/
.el-tabs--card>.el-tabs__header .el-tabs__nav{
    border: 0px;
}
/*黑框及内字体样式*/
.el-tabs__item{
        color:#495060;
        height: 26px;
        border: 1px solid rgba(80,109,130,.64);
        margin: 4px 3px;
        line-height: 26px;
        border-radius: 5px 5px 0 0;
        background-color: #fff;
        font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;
}
/*    选中的黑框的样式*/
.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
    border-bottom: 1px solid rgba(80,109,130,.64);
    border-radius: 5px 5px 0 0;
    background-color: #398af1;
    color: #fff;
    border-color: #398af1;
}
    .el-tabs--card>.el-tabs__header .el-tabs__item.is-active:before{
        content: "";
        background: #fff;
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 8px;
    }
</style>