<template>
  <right-click-menu :mouse-position="mousePosition"
                    :config="opt"/>
  <div class="route_navigation_main" ref="tagRef">
    <div v-for="(item,index) in menuList"
         :class="index === currentIndex ? 'active_text item' :  'item'"
         :key="index"
         @contextmenu.prevent="contextmenuItem(item,index,$event)"
         @click="router.push(item.path)">
      {{ item?.title }}
      <el-icon @click.stop.prevent="closeRouter(index,item.path)">
        <Close/>
      </el-icon>
    </div>
    <div class="active_box" :style="selectedStyle"/>
  </div>
</template>

<script setup name='RouteNavigation'>
import {ref} from "vue";
import tabsHook from "@/layout/HeaderV2/tabs-hook";
import {useRouter} from "vue-router";
import RightClickMenu from "@/components/menu-item/RightClickMenu";

const router = useRouter()
const tagRef = ref(null)

const opt = [
  {
    name: '关闭', click: (data, index) => {
      closeRouter(index, data.path)
    }
  },
  {
    name: '关闭其他选项卡', click: (data, index) => {
      router.push(data.path)
      setLabel([data])
    }
  },
  {
    name: '关闭所有选项卡', click: (data, index) => {
      menuList.value = []
      menuKey = []
      backToTheHomepage()
    }
  },
  {
    name: '关闭左侧选项卡', click: (data, index) => {
      if (index === 0) return
      if (index > currentIndex) {
        router.push(data.path)
      }
      let temp = []
      for (let i = index; i < menuList.value.length; i++) {
        temp.push(menuList.value[i])
      }
      setLabel(temp)
    }
  },
  {
    name: '关闭右侧选项卡', click: (data, index) => {
      if (index + 1 === menuList.value.length) return
      if (index < currentIndex) {
        router.push(data.path)
      }
      let temp = []
      for (let i = 0; i < index + 1; i++) {
        temp.push(menuList.value[i])
      }
      setLabel(temp)
    }
  }
]


const mousePosition = ref()
const contextmenuItem = async (item, index, event) => {
  mousePosition.value = {
    event,
    data: item,
    index
  }
}

let menuList = ref([])
menuList.value = tabsHook.getItem()
let menuKey = $ref([])
menuKey = tabsHook.getItemKey();

let currentPath = $ref('')
let currentIndex = $ref(-1)

const closeRouter = (index, path) => {
  menuList.value.splice(index, 1)
  menuKey.splice(index, 1)

  if (menuList.value.length === 0) {
    let data = {
      path: '/dashboard',
      title: '首页',
    }
    menuList.value.push(data)
    menuKey.push(JSON.stringify(data))
    router.push('/dashboard')
  } else {
    if (router.currentRoute.value.path === path || router.currentRoute.value.meta.activeMenu === path) {
      let temp = index === menuList.value.length ? menuList.value.length - 1 : index
      router.push(menuList.value[temp]?.path)
    }
  }
}

// 设置标签
const setLabel = (data) => {
  menuList.value = data
  menuKey.value = []
  for (let i = 0, len = menuList.value.length; i < len; i++) {
    menuKey.value.push(JSON.stringify(menuList.value[i]))
  }
}

// 回到首页
const backToTheHomepage = () => {
  router.push('/dashboard')
}

// 设置滚动条位置
const handleScrolling = async (str) => {
  currentIndex = menuList.value.findIndex((item) => {
    return item.path === str.path
  })
  if (currentIndex === -1) return
  let itemData = tagRef.value.querySelectorAll('.item')
  let scroll = 0;
  for (let i = 0; i < currentIndex; i++) {
    let item = itemData[i]
    scroll += item.scrollWidth
  }
  selectedStyle = {
    width: itemData[currentIndex].clientWidth + 'px',
    transform: `translateX(${scroll}px)`
  }
  tagRef.value.scrollTo({top: 0, left: scroll, behavior: 'smooth'})
}

let selectedStyle = $ref({})


watch(() => menuList.value, () => {
  tabsHook.setItem(menuList.value)
  routingChanges(false)
}, {deep: true})

const createLabels = (str, data) => {
  if (menuKey.indexOf(str) > -1) return
  menuList.value.push(data)
  tabsHook.setItem(menuList.value)
  menuKey.push(str)
}

const routingChanges = (flag = true) => {
  let currentRoute = router.currentRoute.value
  currentPath = currentRoute.path
  let data = {
    path: currentRoute.path,
    title: currentRoute.meta.title
  }
  let str = JSON.stringify(data)

  if (currentRoute.meta.parentName && currentRoute.meta.activeMenu) {
    data.path = currentRoute.meta.activeMenu
    data.title = currentRoute.meta.parentName
    str = JSON.stringify(data)
    if (flag) {
      createLabels(str, data)
    }
  }
  nextTick(() => {
    handleScrolling(data)
  })
  // 不需要创建
  if (currentRoute.meta.hideTabs) return;
  if (flag) {
    createLabels(str, data)
  }
}

watch(() => router.currentRoute.value, () => {
  routingChanges()
}, {immediate: true})


</script>

<style scoped lang="scss">
$item-height: 40px;


.route_navigation_main {
  flex: 1;
  display: flex;
  height: 100%;
  width: 100%;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  margin-right: 16px;
}

.active_text {
  color: var(--xc-header-active-text-color);
  opacity: 1 !important;
}

.active_box {
  position: absolute;
  height: $item-height;
  border-radius: 4px;
  background-color: var(--xc-header-active-bg-color);
  box-shadow: var(--el-box-shadow-light);
  transition: all .2s;
  -webkit-transition: all .2s;
}

.route_navigation_main::-webkit-scrollbar {
  height: 4px;
  background-color: #eaeaea;
}

.route_navigation_main:hover ::-webkit-scrollbar-track-piece {
  /*鼠标移动上去再显示滚动条*/
  background-color: #fff;
  /* 滚动条的背景颜色 */
  border-radius: 6px;
  /* 滚动条的圆角宽度 */
}


.route_navigation_main:hover::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(28, 28, 28, 0.2);
  background: #919191;
}

.route_navigation_main::-webkit-scrollbar-track {
  background: white;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  cursor: pointer;
  z-index: 1;
  height: $item-height;
  user-select: none;
  transition: all .2s;
  white-space: nowrap;
  -webkit-transition: all .2s;
  opacity: .7;

  &:hover {
    opacity: 1;
  }

  i {
    padding: 2px;
    font-size: 12px;
    margin-left: 5px;
    color: rgb(0, 0, 0);

    &:hover {
      background-color: #0a84fd;
      color: white;
      border-radius: 50%;
    }
  }
}
</style>
