<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>
  <div>
    <component :is="currentCom" :id="activeTab" :title="title" />
  </div>
</template>
<script setup>
import { ref, onMounted, defineAsyncComponent } from "vue"
import { useRoute, useRouter } from "vue-router"
let title = ref("综合检查")
const tabs = [
  {
    label: "风险分级管控措施清单",
    value: "fxfjgk"
  },
  {
    label: "风险四色分布表",
    value: "fxssfb"
  },
]
const route = useRoute()
const router = useRouter()
console.log(router, route.path, "router")
const currentCom = ref("fxfjgk")
const activeTab = ref("fxfjgk")
// 【新增】根据路由路径设置激活的标签页
const setActiveTabFromRoute = () => {
  const path = route.path
  if (path.includes("/fxfjgk")) {
    activeTab.value = "fxfjgk"
    title.value = "风险分级管控措施清单"
  } else if (path.includes("/fxssfb")) {
    activeTab.value = "fxssfb"
    title.value = "风险四色分布表"
  }

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

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

})
</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>
