<template>
    <div style="width: 100%;height: 50px">
        <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: 0px;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="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__item{
        width: 13em;
        text-align: center;
    }
    /*底层背景色*/
    .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-size: 12px;
        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>