<script>
// vue2中script setup无法监听router，需要使用optionalAPI
import {
  Dropdown,
  DropdownItem,
  DropdownMenu,
} from '@jinglun/view-design'
import { useTabStore } from '@/store/tab-store'
import { vHoverSelf } from '@/directives/hover'
import { constToText, getImageUrl, parseUrl } from '@/utils'
import { getRoute } from '@/utils/router'

const props = {
  excludeList: {
    type: Array,
    default: () => [],
  },
}

export default {
  components: {
    Dropdown,
    DropdownItem,
    DropdownMenu,
  },
  directives: {
    hoverSelf: vHoverSelf,
  },
  props,
  setup() {
    const tabStore = useTabStore()
    // 活跃的tab是不需要border的，需要判断
    const needBorder = index => {
      return (
        tabStore.tabList[index].path !== getRoute().path &&
        tabStore.tabList[index + 1]?.path !== getRoute().path
      )
    }
    return { tabStore, needBorder, getImageUrl }
  },
  watch: {
    $route: {
      async handler(route) {
        if (this.excludeList.includes(route.path)) {
          return
        }
        if (!route.meta?.title) {
          throw new Error(
            '请为路由设置meta.title，如果不想加入tab-manager中，请加入exclude',
          )
        }
        const query = route.query
        this.tabStore.addTab({
          active: true,
          tabName: route.meta.title,
          path: route.path,
          query,
        })
        setTimeout(() => {
          try {
            const tabs = this.$refs.tab
            const lastTab = tabs[tabs.length - 1]
            const distance = lastTab.getBoundingClientRect().right
            if (distance > document.body.offsetWidth) {
              this.tabStore.delTab(1)
            }
          } catch (e) {}
        }, 200)
      },
      immediate: true,
    },
  },
}
</script>

<template>
  <Vuescroll
    class="auto admin-page !h-48px"
    :ops="{ scrollPanel: { scrollingX: true, scrollingY: false } }"
  >
    <div class="tab-box">
      <div
        v-for="(tab, index) in tabStore.tabList"
        :key="tab.path + JSON.stringify(tab.query || '')"
        @click="tabStore.switchTab(tab)"
      >
        <Dropdown trigger="contextMenu" transfer>
          <div
            ref="tab"
            class="tab"
            :class="{
              'tab-active': tab.active,
              'tab-border': needBorder(index),
              'tab-home':
                tab.path.indexOf('/admin/home') > -1 && tab.active,
              'tab-white':
                tab.path.indexOf('/admin/home') === -1 && tab.active,
            }"
          >
            <span class="tab-title" :title="tab.tabName">{{
              tab.tabName
            }}</span>
            <img
              v-if="
                tabStore.tabList.length >= 2 &&
                tab.path !== tabStore.indexPath
              "
              v-hover-self="
                $route.path === tab.path
                  ? getImageUrl('ico/标签页-关闭-悬停.png')
                  : getImageUrl('ico/标签页-关闭-悬停.png')
              "
              style="display: inline-block"
              :src="
                $route.path === tab.path
                  ? getImageUrl('ico/标签页-关闭-悬停.png')
                  : getImageUrl('ico/标签页-关闭-悬停.png')
              "
              class="tab-icon"
              @click.stop="tabStore.delTab(index)"
            />
          </div>
          <DropdownMenu slot="list">
            <DropdownItem
              :disabled="tabStore.tabList.length === 1"
              @click.native="tabStore.delTab(index)"
              >关闭</DropdownItem
            >

            <DropdownItem
              @click.native="tabStore.delOtherTab(index)"
              :disabled="tabStore.tabList.length === 1"
              >关闭其他</DropdownItem
            >
            <!-- <DropdownItem @click.native="tabStore.delAllTab"
              >关闭全部</DropdownItem
            > -->
          </DropdownMenu>
        </Dropdown>
      </div>
    </div>
  </Vuescroll>
</template>

<style lang="scss" scoped>
@import '../../styles/variable';

.tab-box {
  display: flex;
  align-items: center;
  height: 48px;
  white-space: nowrap;
  border-bottom: 1px solid $tab-bottom;
}

.tab {
  padding: 14px 16px;
  cursor: pointer;

  .tab-icon {
    max-width: unset;
    vertical-align: middle;
  }

  .tab-title {
    @apply truncate;
    margin-right: 3px;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
    display: inline-block;

    max-width: 130px;
  }

  &:hover {
    color: $tab-text-hover;
  }
}

.tab-active {
  color: white;
  background: $tab-bg;

  .tab-icon {
    color: white;
  }

  &:hover {
    color: white;

    .tab-icon {
      color: white;
    }
  }
}

.tab-home {
  background-color: #eff6ff !important;
}

.tab-white {
  background-color: #fff !important;
  border-bottom: none !important;
}

.admin-page {
  :deep(.menu) {
    color: #333 !important;
    background: #e5f1ff !important;
  }

  :deep(.menu .menu-item) {
    position: relative;
    height: 36px !important;
    margin: 4px 8px;

    &:hover {
      color: #333 !important;
    }

    &:first-child {
      margin-top: 8px;
    }
  }

  :deep(.menu .menu-item.ivu-menu-item-active) {
    color: white !important;
    background-color: #219fff !important;
    border-radius: 5px;
  }

  :deep(.tab-box) {
    align-items: flex-end;
    padding-left: 12px;
    background: #d4e8ff;
    border-bottom: 1px solid #b2d4ff !important;
  }

  :deep(.tab) {
    height: 32px;
    padding: 0 16px;
    margin: 0 3px 0 0;
    font-size: 12px;
    line-height: 32px;
    background: #c9e1fc;
    border-radius: 8px 8px 0 0;

    &:hover {
      color: #333;
      background-color: #b8d7fb;
    }
  }

  :deep(.tab-active) {
    height: 38px;
    margin-bottom: -1px;
    font-size: 14px;
    font-weight: bold;
    line-height: 38px;
    color: $primary;
    background: #eff6ff;
    border: 1px solid #b2d4ff;
    border-bottom: none 0;
    border-bottom: 1px solid #f1f7ff;
    border-radius: 8px 8px 0 0;

    &:hover {
      color: $primary;
      background-color: #eff6ff;
    }
  }
}
</style>
