<!-- 右边，第二行：tab栏 -->
<template>
    <div>
        <el-scrollbar
            ref="tab-title-box"
            @wheel.native.prevent="handleScroll"
            class="tab-title-box" :class=" 'tab-style-' + themeStore.tabStyle "
        >
            <draggable
                v-model="appStore.tabList"
                chosen-class="chosen-tab"
                animation="500"
                item-key="id"
                :scroll="true"
            >
                <template #item="{element: tab}">
                    <div
                        :id=" 'tab-' + tab.id "
                        class="tab-title"
                        :class=" (tab === appStore.nativeTab ? 'tab-native' : '') "
                        @click="appStore.showTab(tab)"
                        @contextmenu.prevent="$refs['com-right-menu'].right_showMenu(tab, $event)"
                        draggable="true"
                        @dragstart="appStore.isDrag = true; appStore.dragTab = tab"
                        @dragend="appStore.isDrag = false;"
                    >
                        <div class="tab-title-2">
                            <!-- <i class="el-icon-caret-right"></i> -->
                            <span>{{ tab.title }}</span>
                            <svg-icon class="tab-title-close" name="el-icon-Close" v-if="!tab.hideClose" @click.stop="appStore.closeTab(tab)"></svg-icon>
                        </div>
                    </div>
                </template>
            </draggable>
        </el-scrollbar>

        <!-- 右键菜单 -->
        <com-right-menu ref="com-right-menu"></com-right-menu>

    </div>
</template>

<script setup name="nav-tab-bar">
import Draggable from 'vuedraggable'
import ComRightMenu from './com-right-menu'
import {useAppStore} from "../../store/app";
import {getCurrentInstance, ref} from "vue";
import {watch} from "vue";
import {useRoute} from "vue-router";
import {useThemeStore} from "../../store/theme";
import mitt from "@/mitt";
const appStore = useAppStore();
const themeStore = useThemeStore();
const route = useRoute();

// 获取滚动条操作对象
const {proxy} = getCurrentInstance()
const getWrap = function () {
    return proxy.$refs['tab-title-box'].$refs.wrap$;
}

// 处理鼠标滚动
const handleScroll =function (e) {
    getWrap().scrollLeft += - e.wheelDelta / 5;
}

// 设置滚动条 带动画效果，value=要滚动到的位置
const setScroll = function (value){

    const start = getWrap().scrollLeft; // 初始值
    const end = value;   // 结束值
    let ci = 20;    // 分多少次完成
    const bu = (end - start) / ci;  // 每次跳跃多少

    // 递归函数
    const fn = function (){
        getWrap().scrollLeft += bu;
        ci--;
        if(ci >= 0) {
            setTimeout(fn, 10);
        }
    }
    fn();

}

// 滚动条自动归位
const scrollToAuto = function() {
    //
    try{
        var boxWidth = document.querySelector('.nav-right-2').clientWidth;	// 视角宽度
        var nativeTab = document.querySelector('.tab-native');  // 当前选中元素

        // 元素与box左边框的距离
        const leftBor = nativeTab.offsetLeft - getWrap().scrollLeft;

        // 元素与box右边的距离
        // const rightBor = boxWidth + leftBor;

        // 元素滚到中间需要的距离
        // const centerX = boxWidth / 2 - leftBor;

        // 让滚动条滚过去
        // getWrap().scrollLeft -= centerX;
        // setScroll(getWrap().scrollLeft - centerX);

        // 如果越过了左边，需要往右滚动一些
        if(leftBor - 100 < 0) {
            setScroll(getWrap().scrollLeft + leftBor - 100);
        }

        // 如果越过了右边，需要向左滚动一些
        if(leftBor + nativeTab.clientWidth + 50 > boxWidth) {
            setScroll(getWrap().scrollLeft + leftBor + 100 + nativeTab.clientWidth - boxWidth);
        }

    }catch(e){
        // throw e;
    }
};

// 监听：每次切换 path 时，刷新一下 tab 栏
watch(() => route.path, () => {
    if(route.meta && route.meta.menu) {
        // 如果是 homeTab
        const menu = route.meta.menu;
        if(menu.id === appStore.homeTab.id) {
            return appStore.showHome();
        }
        // 先从 tab 栏查询打开
        const tab = appStore.showTabById(menu.id);
        if(tab) {
            return;
        }
        // tab栏里找不到时，再尝试从菜单栏查询 
        appStore.showMenuById(menu.id);
    }
})


// 订阅事件：设置滚动条值
mitt.off('setScroll');
mitt.on('setScroll', data => {
    setScroll(data);
});

// 订阅事件：滚动条自动归位
mitt.off('scrollToAuto');
mitt.on('scrollToAuto', data => {
    scrollToAuto();
});


</script>

<style scoped lang="scss">

.tab-title-box{width: 100%; height: 100%; position: absolute; white-space: nowrap; background-color: #FFF; transition: all 0.2s; }
.tab-title-box :deep(.el-scrollbar__wrap){overflow-y: hidden;}

.tab-title:first-child{margin-left: 10px;}
.tab-title:last-child{margin-right: 40px;}

.tab-title{font-size: 12px; cursor: pointer; display: inline-block; overflow: hidden; text-decoration: none; color: #414060;}
.tab-title-2{padding: 0px 5px; /* background-color: #FFF; */ }
.tab-title-2{transition: padding 0.1s, margin 0.1s;}

.tab-title span{display: inline-block; margin-left: 11px; margin-right: 11px;}
.tab-title:hover span,.tab-native span{/* font-weight: bold; */}

/* 关闭图标 */
.tab-title .tab-title-close{display: inline-block; font-size: 12px !important; vertical-align: -20%;}
.tab-title .tab-title-close{border-radius: 50%; padding: 1px; color: #ccc; margin-left: -5px;}
.tab-title .tab-title-close:hover{background-color: red; color: #FFF;}

/* 卡片样式 */
.tab-title{transition: width 0.2s, background 0s, border 0.2s, border-radius 0.2s;}
.tab-title:hover,.tab-native{transition: width 0.2s, background 0.2s, border 0.2s;}
.tab-title{border-radius: 1px; border: 1px #e5e5e5 solid; height: 24px; line-height: 26px; margin: 6px 2px 0px; background-color: #fff;}

/* ------- 卡片风格 ------- */
// 方块风格（取默认）
// 圆润风格
.tab-style-mellow{
    .tab-title{
        border-radius: 20px;
    }
    .tab-title-2{
        padding: 0px 10px;
    }
}

// 遮罩风格
.tab-style-mask,.tab-style-mask-light{
    .tab-title{
        mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAkBAMAAAAdqzmBAAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMAr3DvEM8wgCBA379gj5//tJBPAAAAnUlEQVRIx2NgAAM27fj/tAO/xBsYkIHyf9qCT8iWMf6nNQhAsk2f5rYheY7Dnua2/U+A28ZEe8v+F9Ax2v7/F4DbxkUH2wzgtvHTwbYPo7aN2jZq26hto7aN2jZq25Cy7Qvctnw62PYNbls9HWz7S8/G6//PsI6H4396gAUQy1je08W2jxDbpv6nD4gB2uWp+J9eYPsEhv/0BPS1DQBvoBLVZ3BppgAAAABJRU5ErkJggg==);
        mask-size: 100% 100%;
        -webkit-mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAkBAMAAAAdqzmBAAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMAr3DvEM8wgCBA379gj5//tJBPAAAAnUlEQVRIx2NgAAM27fj/tAO/xBsYkIHyf9qCT8iWMf6nNQhAsk2f5rYheY7Dnua2/U+A28ZEe8v+F9Ax2v7/F4DbxkUH2wzgtvHTwbYPo7aN2jZq26hto7aN2jZq25Cy7Qvctnw62PYNbls9HWz7S8/G6//PsI6H4396gAUQy1je08W2jxDbpv6nD4gB2uWp+J9eYPsEhv/0BPS1DQBvoBLVZ3BppgAAAABJRU5ErkJggg==);
        -webkit-mask-size: 100% 100%;
        border-width: 0 !important;
        height: 30px;
        line-height: 32px;
        //transition: all 0.2s;
    }
    .tab-title-2{
        padding: 0px 13px;
    }
}
// 浅色调遮罩
.tab-style-mask-light{
    .tab-title:hover{
        background-color: var(--t-light-color);
    }
    .tab-native{
        background-color: var(--t-light-color) !important;
        color: var(--menu-active-bg-color) !important;
    }
}

</style>
