<template>
    <div
        :class="$style.tabBar"
        v-if="getTabList.length>0"
    >
        <ul>
            <template v-for="(item,index) of tabList">
                <li
                    v-if="item.meta.tabName"
                    :key="index"
                    :class="[$style.item,item.name===$route.name&&$style.active]"
                >
                    <Touch
                        tag="span"
                        :class="$style.tabName"
                        @tap="$router.push({name:item.name,params:item.params,query:item.query})"
                    >{{item.meta.tabName}}</Touch>

                    <Touch
                        tag="span"
                        :class="$style.closeBtn"
                        @tap="deleteTab(index,item.name===$route.name)"
                    >
                        <IconFont :class="$style.icon">&#xe7;</IconFont>
                    </Touch>
                </li>
            </template>
        </ul>
    </div>
</template>

<script>
    import Touch from "../external/Touch";
    import IconFont from "../basic/IconFont";
    export default {
        name: "TabBar",
        components: {IconFont, Touch},
        data(){
            return {
                tabList:[]
            }
        },
        watch:{
            $route(toRoute){
                console.log(this.tabList)
                let matchIndex=this.traverse(toRoute.name)
                if(matchIndex>=0){
                    this.tabList.splice(matchIndex,1,toRoute);
                }
                else{
                    this.tabList.push(toRoute)
                }
            }
        },
        computed:{
            getTabList(){
                return this.tabList.filter((item)=>{
                    return item.meta.tabName;
                })
            }
        },
        mounted(){
            this.tabList.push(this.$route)
        },
        methods:{
            traverse(name){
                for(let index in this.tabList){
                    if(this.tabList[index].name==name){
                        return index;
                    }
                }
                return -1;
            },
            deleteTab(index,isActive){
                if(isActive){
                    const cb=function(){
                        if(this.tabList.length<=1){
                            this.tabList.splice(index,1);
                            this.$router.replace('/');
                        }
                        else{
                            this.tabList.splice(index,1);
                            this.$router.replace(this.tabList[this.tabList.length-1].path);
                        }
                    }.bind(this);
                    if(this.$dirtyCheck.get()){
                        this.$confirm({msg:'该操作将会丢失更改，确定继续吗？',type:'notice'})
                            .then((flag)=>{
                                if(flag){
                                    this.$dirtyCheck.set(false);
                                    cb();
                                }
                            })
                    }
                    else{
                        cb();
                    }
                }
                else{
                    this.tabList.splice(index,1);
                }
            }
        }
    }
</script>

<style module lang="scss">
    @import '../../cssInjection/cssFunction.scss';
    @import '../../cssInjection/cssLayout.scss';

    .tabBar {
        padding-left: 28PX;
        width: 100%;
        height:38px;
        background-color: #FFFFFF;
        @extend %FlexRowStartCenter;
        >ul{
            width: 100%;
            @extend %FlexRowStartCenter;
            >li{
                margin-right:4px;
                &.item{
                    position: relative;
                    z-index: 1;
                    height: 26px;
                    font-size: 13px;
                    padding-right: 30px;
                    transition: background-color .3s;
                    max-width: 10em;
                    border:#d5d5d5 solid 1px;
                    color: #999999;
                    flex: 1;
                    &.active{
                        /*box-shadow: 2PX 4PX 4PX 0PX rgba(0, 0, 0, 0.06);*/
                        color:#000000;
                        transition-duration: .1s;
                        z-index: 3;
                        border:#d5d5d5 solid 1px;
                    }
                    &:hover{
                        background-color: rgba(0,0,0,0.02);
                    }
                    >*{
                        vertical-align: middle;
                    }
                    >.tabName{
                        display: block;
                        font-size: 13px;
                        max-width: 8em;
                        height: 100%;
                        width:100%;
                        line-height: 26px;
                        padding-left: 1em;
                        min-width: 2.5em;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    >.closeBtn{
                        @extend %AbsoluteVerticalCenter;
                        right: 10px;
                        font-size: 0.6em;
                        color: #62676C;
                        line-height: 1em;
                        height: 1em;
                        &:after{
                            content: '';
                            position: absolute;
                            z-index: 1;
                            width: 150%;
                            height: 150%;
                            left: -25%;
                            top: -25%;
                            background-color: #E8EAED;
                            border-radius: 50%;
                            opacity: 0;
                            transition: opacity .05s 0s;
                        }
                        &:hover{
                            color: #3C4043;
                            &:after{
                                opacity: 1;
                            }
                        }
                        >.icon{
                            position: relative;
                            z-index: 2;
                        }
                    }
                }

            }
        }
    }
</style>