<template>
  <div class="div_">
    <el-scrollbar ref="scrollbar" :vertical="false" class="scrollbar_" @wheel.native.prevent="handleScroll">
      <el-tag
        size="large"
        v-for="(item, index) in routerHistory"
        :key="index"
        :closable="true"
        :type="nowRouter == item.path ? '' : 'info'"
        @close="removeTag(item.path)"
        @click="tagClick(item.path, index)"
      >
        {{ item.title }}
      </el-tag>
    </el-scrollbar>
  </div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { ref, watch, onMounted, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user.js'
const userStore = useUserStore() //store对象
const { routerHistory } = storeToRefs(userStore) //路由记录
const { nowRouter } = storeToRefs(userStore) //当前路由路径
const route = useRoute() //当前路由对象
const router = useRouter() //路由对象
const scrollbar = ref(null)
// 监听路由变动
watch(
  () => router.currentRoute.value,
  (newValue, oldValue) => {
    // 变动后更新路由
    nowRouter.value = newValue.path
    userStore.setNowRouter(newValue.path)
  },
  { immediate: true },
)
onMounted(() => {
  let nowRouterIndex = routerHistory.value.findIndex(item => item.path == nowRouter)
  //在页面渲染完成后调用计算滚动条位置
  nextTick(() => {
    countSroll(nowRouterIndex)
  })
})

// 移除标签的事件
const removeTag = routerPath => {
  if (routerHistory.value.length == 1) {
    return
  }
  // 删除tag返回新路由历史数组并存入vuex
  let newArr = routerHistory.value.filter(item => item.path !== routerPath)
  userStore.setRouterHistory(newArr)
  // 如果删除的路由是当前路由，路由跳转至目前路由历史数组最后一个路由
  if (route.path == routerPath) {
    router.push({
      path: newArr[newArr.length - 1].path,
    })
  }
}
// 点击标签的事件
const tagClick = (path, index) => {
  countSroll(index)
  router.push(path)
}
// 标签滚定的事件
const countSroll = index => {
  // // 获取tag宽度
  // let tagWidth = this.$refs['tag' + index][0].$el.offsetWidth;
  // // 获取tag距离右边宽度
  // let tagMargin = this.$refs['tag' + index][0].$el.offsetLeft;
  // // 获取sroll宽度
  // let srollWidth = this.$refs.scrollbar.$el.offsetWidth;
  // // 如果tag距离右边+tag宽度+20左右已经大于sroll宽度，表示tag已经到了尽头了
  // if ((tagMargin + tagWidth + 20) > srollWidth) {
  //    scrollbar.wrap.scrollLeft = tagMargin
  // } else {
  //  scrollbar.wrap.scrollLeft = 0
  // }
}
const handleScroll = e => {
  const eventDelta = e.wheelDelta || -e.deltaY * 40
  scrollbar.scrollLeft = scrollbar.scrollLeft + eventDelta / 4
}
</script>
<style lang="scss" scoped>
.div_ {
  height: 48px;
  padding: 0 15px;
  background-color: #242a2f;
  box-sizing: content-box;
  padding-bottom: 10px;

  .scrollbar_ {
    height: 100%;
    width: 100%;
    white-space: nowrap;

    :deep(.el-scrollbar__view) {
      height: 100%;
      display: flex;
      align-items: center;
    }
  }
}

.el-tag {
  margin-left: 10px;
  cursor: pointer;
}

:first-child {
  margin: 0;
}
</style>
