<template>
  <div class="router-travel"  ref="routeTravelDom"  >
    <div class="route-list" ref="routeListDom"  @wheel="horizontalScroll">
      <div
        :class="[
          'route',
          useRouterTravel.currentRoute?.path === item.path ? 'active' : ''
        ]"
        v-for="(item, index) in useRouterTravel.history"
        :key="item.path"
        @click="onChangeRoute(item)"
      >
      <a-space>
        <span :style="{textAlign: index === 0 ? 'center' : 'right'}"  >{{item.name}}</span>
        <ReloadIconTsx
          :loading="loading"
          v-if="useRouterTravel.currentRoute?.path === item.path"
          :reload="reloadPage"
        />
        <CloseOutlined v-if="index != 0" @click="delRouter(item.path)" />
      </a-space>
      </div>
    </div>
    <div class="expend-button" ref="expendButtonDom" >
      <a-space>
        <a-dropdown>
          <a class="ant-dropdown-link" @click.prevent>
            <MoreOutlined style="font-size: 24px;" />
          </a>
          <template #overlay>
            <a-menu>
              <a-menu-item>
                <a href="javascript:;" @click="useRouterTravel.closeOtherPage">关闭其他页</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;" @click="reloadPage">刷新当前页</a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </a-space>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouterTravelStore } from '@/store'
import { ReloadIconTsx } from '@/components/MicroComponents'
import { CloseOutlined, MoreOutlined } from '@ant-design/icons-vue'
import { useSchedulerOnce } from '@/hooks'

const useRouterTravel = useRouterTravelStore()

const loading = ref<boolean>(false)

const routeTravelDom = ref<HTMLElement>()

const routeListDom = ref<HTMLElement>()

const expendButtonDom = ref<HTMLElement>()

const onChangeRoute = (item) => useRouterTravel.setCurrentRoute(item)

const reloadPage = () => {
  loading.value = true
  useRouterTravel.keyCount++
  useSchedulerOnce(() => {
    loading.value = false
  }, 300)
}

const delRouter = (path: string) => {
  console.log('path:', path)
  event?.stopPropagation()
  useRouterTravel.del(path)
}

const horizontalScroll = (event) => {
  const x = event.deltaY > 0 ? 100 : -100
  routeTravelDom.value!.scrollBy(x, 0)
  event.preventDefault()
}

</script>

<style lang="less" scoped >
@import '~@/styles/theme.less';
.router-travel {
  width: 100%;
  height: 46px;
  background-color: #fff;
  overflow: hidden;
  overflow-x: scroll;
  border:  1px solid rgba(5, 5, 5, 0.06);
  margin-left: -1px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  position: relative;
  .route-list {
    width: 100%;
    min-width: 1200px;
    padding-left: 12px;
    display: flex;
    margin-top: 5px;
    overflow: hidden;
    position: absolute;
    left: 0;
    .route {
      height: 40px;
      line-height: 40px;
      border-radius: 8px 8px 0px -0px;
      border: 1px solid rgba(5, 5, 5, 0.06);
      background: rgba(0, 0, 0, 0.02);
      cursor: pointer;
      margin-right: 4px;
      padding: 0 8px;
      box-sizing: border-box;
      transition: all 0.2s;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      white-space: nowrap;
    }

    .active {
      color: @primary-color;
      background-color: #fff;
    }
  }

  .router-list ::-webkit-scrollbar {
    background: transparent;
    width: 0 !important;
    height: 0;
  }

  .expend-button {
    height: 43px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    z-index: 1;
    position: fixed;
    right: 0px;
    background-color: #fff;
    box-shadow: 0 0px 4px rgba(0,21,41,.12);
    padding: 0 12px;
    box-sizing: border-box;
  }
}

.router-travel::-webkit-scrollbar {
    background: transparent;
    width: 0 !important;
    height: 0;
  }
</style>
