<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, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
let title = ref('综合检查');
const tabs = [
  {
    label: '待处理隐患',
    value: 'dclyh'
  },
  {
    label: '隐患台账',
    value: 'yhtz',
  },
  {
    label: '隐患统计',
    value: 'yhtj'
  },
  {
    label: '隐患排查治理报告',
    value: 'yhpczlbg'
  },
  {
    label: '隐患趋势分析',
    value: 'yhqsfx'
  }]
const route = useRoute();
const router = useRouter();

const currentCom = ref('dclyh');
const activeTab = ref('dclyh');
// 【新增】根据路由路径设置激活的标签页
const setActiveTabFromRoute = () => {
  const path = route.path;
  if (path.includes('/dclyh')) {
    activeTab.value = 'dclyh';
    title.value = '待处理隐患';
  } else if (path.includes('/yhtz')) {
    activeTab.value = 'yhtz';
    title.value = '隐患台账';
  } else if (path.includes('/yhtj')) {
    activeTab.value = 'yhtj';
    title.value = '隐患统计';
  } else if (path.includes('/yhpczlbg')) {
    activeTab.value = 'yhpczlbg';
    title.value = '隐患排查治理报告';
  } else if (path.includes('/yhqsfx')) {
    activeTab.value = 'yhqsfx';
    title.value = '隐患趋势分析';
  }
  // 加载对应的组件
  currentCom.value = defineAsyncComponent(() => import(`./${activeTab.value}.vue`));
};
const onTabClick = (e) => {
  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();
  displayMode.value = 'card';
})

const displayMode = ref(true);
const toggleMode = (mode) => {
  displayMode.value = mode

}
watch(() => route.query.tabtype, (newPath) => {
  if (newPath === '69') {
    activeTab.value = 'yhtz';
  }

}, { immediate: true });
</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>