<template>
  <div class="tabs-container">
    <el-tabs
      v-model="tabsStore.activeTab"
      type="card"
      @tab-click="handleTabClick"
      @tab-remove="handleTabRemove"
    >
      <el-tab-pane
        v-for="item in tabsStore.tabs"
        :key="item.path"
        :label="item.title"
        :name="item.path"
        :closable="!item.fixed"
      >
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { useTabsStore } from '@/stores/tabs'
import { watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const tabsStore = useTabsStore()

// 添加标签页
watch(() => route, (newRoute) => {
  if (newRoute.meta?.title && !newRoute.meta?.noTab) {
    const fromMenu = newRoute.query.fromMenu || false
    tabsStore.addTab({
      ...newRoute,
      meta: {
        ...newRoute.meta,
        fromMenu
      }
    })
  }
}, { immediate: true, deep: true })

// 标签页点击事件
const handleTabClick = (tab) => {
  tabsStore.switchTab(tab.props.name)
}

// 关闭标签页事件
const handleTabRemove = (targetPath) => {
  tabsStore.removeTab(targetPath)
}
</script>

<style lang="scss" scoped>
.tabs-container {
  background: #fff;
  padding: 6px 6px 0;
  // border-radius: 0px;
}
</style>
