<template>
    <div class="if-tags-view" v-if="$state.tagsView.enable">
        <ElScrollbar>
            <div class="if-tags-view-inner">
                <template v-for="(page, index) in $state.tagsView.cached" :key="page.value">
                    <ElTag class="myTag" :title="page.label"  closable @click="toPage(page)" @close="closePage(page, index)" effect="plain" :type="$state.tagsView.activeIndex === page.value ? 'success':'info'">{{page.label}}</ElTag>
                </template>
               
            </div>
        </ElScrollbar>
    </div>
    
</template>
<script setup>
import { getState, pageClose  } from '../hooks'
import {useRouter} from 'vue-router'
const $state = getState();
// const $route = useRoute()
const $router = useRouter()
const closePage = (page) => {
    pageClose(page);
}

const toPage = page => {
    $router.push(page.value)
}
// 加载缓存的页签



</script>

<style>
.if-tags-view-inner{
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0px;
    border-bottom: 1px solid #aaa;
}
.if-tags-view-inner .el-tag{
    margin-right: 8px;
    height: 100%;
    border: none;
    width: 8em;
    position: relative;
    font-size: 14px;
}
.if-tags-view-inner .el-tag:not(:last-child):after{
    content: '|';
    position: absolute;
    right: 0;
    
}
.if-tags-view-inner .el-tag__content{
    overflow: hidden;
    text-overflow: ellipsis;
}
.myTag{
    cursor: pointer;
}
</style>