<template>
  <div class="anquantr-container">
    <div class="tab-container tab-container-scope">
      <el-tabs v-model="activeTab" type="card" @tab-click="onTabClick">
        <el-tab-pane :label="item.label" :name="item.value" v-for="(item, i) in tabs" :key="i" />
      </el-tabs>
    </div>
    <div class="left" v-if="activeTab === 'yhtz'">
      <div class="mode-switch" :class="{ active: displayMode === 'card' }" @click="toggleMode('card')">卡片模式</div>
      <div class="divider">/</div>
      <div class="mode-switch" :class="{ active: displayMode === 'list' }" @click="toggleMode('list')">列表模式</div>
    </div>
  </div>
  <div>
    <component :is="currentCom" :isOpen="isOpen" :id="activeTab" :title="title" :displayMode="displayMode" />
  </div>
</template>
<script setup>
import { ref, onMounted, defineAsyncComponent } from "vue"
import { useRoute, useRouter } from "vue-router"
let title = ref("综合检查")
const tabs = [
  {
    label: "综合检查",
    value: "zhjc"
  },
  {
    label: "随机抽查",
    value: "sjcc"
  },
  {
    label: "检查台账",
    value: "jctz"
  },
  {
    label: "检查统计",
    value: "jctj"
  },
  {
    label: "排查计划",
    value: "pcjh"
  }
]
const route = useRoute()
const router = useRouter()
console.log(router, route.path, "router")
const currentCom = ref("zhjc")
const activeTab = ref("zhjc")
// 【新增】根据路由路径设置激活的标签页
const setActiveTabFromRoute = () => {
  const path = route.path
  if (path.includes("/zhjc")) {
    activeTab.value = "zhjc"
    title.value = "综合检查"
  } else if (path.includes("/sjcc")) {
    activeTab.value = "sjcc"
    title.value = "随机抽查"
  } else if (path.includes("/jctz")) {
    activeTab.value = "jctz"
    title.value = "检查台账"
  } else if (path.includes("/jctj")) {
    activeTab.value = "jctj"
    title.value = "检查统计"
  } else if (path.includes("/pcjh")) {
    activeTab.value = "pcjh"
    title.value = "排查计划"
  }

  // 加载对应的组件
  currentCom.value = defineAsyncComponent(() => import(`./${activeTab.value}.vue`))
}
const onTabClick = e => {
  console.log(e, "ee")

  const tabName = e.props.name
  activeTab.value = tabName
  // 使用当前路径，只清除查询参数
  router.replace({
    path: route.path, // 保持当前路径不变
    query: {} // 清除所有参数
  })
  currentCom.value = defineAsyncComponent(() => import(`./${e.props.name}.vue`))
  title.value = tabs.find(item => item.value === e.props.name).label
}

onMounted(() => {
  setActiveTabFromRoute()
  // currentCom.value = defineAsyncComponent(() => import(`./${activeTab.value}.vue`))
  displayMode.value = "card"
})

const displayMode = ref(true)
const toggleMode = mode => {
  displayMode.value = mode
}
</script>
<style scoped lang="scss">
@import "@/views/dutyBook/jgryandzz/talentPool/tabContainer.scss"; // 里面有 tab-container 样式


.anquantr-container {
  background-color: #fff;

  .tab-container-scope {
    border-bottom: 1px solid #ebeef5;
  }
}
</style>
