/**
* author: Louie Butch
* date: 2020/11/2
* email: 844089357@qq.com
* desc: 导航
*/
<template>
<div class="hd-tab-link">
    <el-tabs v-model="activeTab" closable @tab-click="handleClick" @tab-remove="tabRemove">
        <el-tab-pane :name="item.index" v-for="(item) in linkItemList" :key="item.index">
            <span slot="label" class="item-label">{{item.label}}</span>
        </el-tab-pane>
    </el-tabs>
    <el-dropdown v-if="linkItemList.length>0" size="mini" trigger="click" placement="bottom-end"
                 @command="handleCommand">
            <span class="el-dropdown-link"><i class="el-icon-arrow-down el-icon--right"></i></span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="clearAll"><span style="padding-left: 18px;color: #096db6">关闭所有</span></el-dropdown-item>
                <el-dropdown-item v-for="(item) in linkItemList" :key="item.index" :command="item">
                    <i v-if="item.index === activeTab" class="el-icon-check"
                       style="font-weight: 600;font-size: 13px;"></i>
                    <span class="labelTxt" :style="item.index=== activeTab ? {paddingLeft: '0'}:{paddingLeft: '18px'}">{{item.label}}</span>
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
</div>
</template>

<script>
export default {
    name: 'hd-tab-link',
    data(){
        return {
            linkItemList: [],
            activeTab: ''
        }
    },
    computed: {
        tabLinkList() {
            return JSON.parse(JSON.stringify(this.$store.getters.tabLinkList));
        },
        curTab() {
            return this.$store.getters.activeTab;
        }
    },
    watch: {
        tabLinkList: {
            handler(newVal, oldVal) {
                this.linkItemList = newVal;
            },
            deep: true
        },
        curTab(newVal, oldVal) {
            this.activeTab = newVal;
        }
    },
    created() {
        this.linkItemList = this.$store.getters.tabLinkList;
        this.activeTab = this.$store.getters.activeTab;
    },
    methods: {
        /**
         * @param tab 当前点击tab的实例
         */ 
        handleClick(tab) {
            let tabItem = this.linkItemList[tab.index * 1];
            this.routerChange(tabItem);
        },
        /**
         * 根据index查找出对应的tabitem
         * @param index
         */
        getTabItem(index) {
            let curTabItem = this.linkItemList.find((item) => item.index === index || item.fullPath === index);

            return curTabItem || null;
        },

        tabRemove(tabItem, nextRouter){
            let tabLinkItem = this.getTabItem(tabItem);

            let tabs = this.linkItemList;

            let newTabs = tabs.filter((tab) => tab.index !== tabLinkItem.index);

            let curTab = tabs.find((item) => item.index === this.activeTab);

            if (curTab && curTab.index === tabLinkItem.index) {
                tabs.forEach((tab, index) => {
                    if (tab.index === tabLinkItem.index) {
                        let nextTab = tabs[index + 1] || tabs[index - 1];

                        if (!nextTab || nextRouter) {
                            curTab = null;
                        } else {
                            curTab = nextTab || null;
                        }
                    }
                });
            }

            if (curTab) {
                this.$store.commit('setActiveTab', curTab.index);
            } else {
                this.$store.commit('setActiveTab', '');
            }

            this.$store.commit('setTabLinkList', newTabs);

            if (!curTab || !curTab.index) {
                if (nextRouter) {
                    this.$router.replace(nextRouter);
                } else {
                    let homeRouterName = this.$route.matched[0].name;
                    this.$router.replace({name: homeRouterName});
                }
            } else {
                this.routerChange(curTab);
            }
        },

        handleCommand(command){
            if (command === 'clearAll') {
                this.$store.commit('setActiveTab', '');
                this.$store.commit('setTabLinkList', []);
                let homeRouterName = this.$route.matched[0];
                this.$router.replace({name: homeRouterName});
            } else {
                this.routerChange(command);
            }
        },

        routerChange(curTab) {
            if (this.$route.fullPath !== curTab.fullPath) {
                let routerInfo = {
                    name: curTab.routerName,
                    params: curTab.params,
                    query: curTab.query
                };

                this.$router.replace(routerInfo);
            }
        }
    }
};
</script>

<style scoped lang="scss">
      .hd-tab-link /deep/ {
          width: 100%;
          height: 100%;
          display: -webkit-flex;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .el-tabs {
              width: -webkit-calc(100% - 30px);
              width: calc(100% - 30px);
          }

          .el-tabs__header {
              margin: 0;
          }

          .el-tabs__active-bar {
              display: none;
          }

          .el-tabs--top .el-tabs__item.is-top:last-child,
          .el-tabs--top .el-tabs__item.is-bottom:last-child,
          .el-tabs--bottom .el-tabs__item.is-top:last-child,
          .el-tabs--bottom .el-tabs__item.is-bottom:last-child {
              padding-right: 10px;
          }

          .el-tabs--top .el-tabs__item.is-top:nth-child(2),
          .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
          .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
          .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2) {
              padding-left: 10px;
          }

          .el-tabs__item {
              height: 32px;
              line-height: 32px;
              font-size: 12px;
              padding: 0 10px;
              /*display: flex;*/
              /*justify-content: space-between;*/
              /*align-items: center;*/

              &:hover {
                  background-color: #eef3fb;
              }

              &.is-active {
                  background-color: #eef3fb;
              }

              .el-icon-close {
                  font-size: 18px;
                  margin-left: 6px;
                  vertical-align: text-top;
              }
          }

          .el-tabs__nav-wrap::after {
              display: none;
          }

          .el-tabs__nav-next, .el-tabs__nav-prev {
              line-height: 32px;
              font-size: 14px;
              width: 20px;
              text-align: center;
          }


          .el-dropdown {
              width: auto;
              display: block;
          }

          .el-popper {
              width: auto;
              min-width: 180px;
          }

          .el-dropdown-menu--mini .el-dropdown-menu__item span {
              display: inline-block;
              padding-left: 17px;
              box-sizing: border-box;
              min-width: 140px;
          }

      }
</style>