<script setup name="tagsView">
import { watch, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import store from '@/store'
const route = useRoute(),
  router = useRouter(),
  clickFn = ({ props: { name }}) => {
    router.push({
      name: name,
      query: store.appStore.tagNavList.find(i => i.path === name).query || {},
      params: store.appStore.tagNavList.find(i => i.path === name).params || {}
    })
  },
  removeTab = (path) => {
    store.appStore.removeTag(path)
  },
  acvtie = ref(route.path.split('/')[route.path.split('/').length - 1])
watch(
  route,
  (val) => {
    acvtie.value = route.path.split('/')[route.path.split('/').length - 1]
  },
  { immediate: true, deep: true }
)
</script>

<template>
  <div class="scroll-outer">
    <div class="scroll-body">
      <el-tabs
        v-model="acvtie"
        type="card"
        class="demo-tabs"
        :closable="store.appStore.tagNavList.length!=1"
        @tab-remove="removeTab"
        @tab-click="clickFn"
      >
        <el-tab-pane
          v-for="tag in store.appStore.tagNavList"
          :key="tag.path"
          :data="JSON.stringify(tag)"
          :label="tag.name"
          :name="tag.path"
        /></el-tabs>
    </div>
  </div>
</template>

<style scoped lang="less">
.scroll-outer {
  padding: 5px 0px 0px 20px;
  width: calc(100vw - 200px);
  .scroll-body {
    overflow: visible;
    white-space: nowrap;
    :deep(.el-tabs__header){
      margin: 0px;
    }
  }
}
</style>

