<template>
  <el-tabs v-model="activeName" class="res-el-tab" @tab-change="handleTabChange">
    <el-tab-pane label="智能审核" name="zero">
      <tab0Pane v-if="activeName === 'zero'" />
    </el-tab-pane>
    <el-tab-pane label="审核方案" name="one">
      <tab1Pane v-if="activeName === 'one'" />
    </el-tab-pane>
    <el-tab-pane label="规则清单" name="two">
      <tab2Pane v-if="activeName === 'two'" />
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import tab0Pane from './components/list/Tab0Pane.vue'
import tab1Pane from './components/list/Tab1Pane.vue'
import tab2Pane from './components/list/Tab2Pane.vue'

const router = useRouter()
const route = useRoute()
const activeName = ref('zero')

// 初始化时从路由参数读取 activeName
onMounted(() => {
  if (route.query.tab) {
    activeName.value = route.query.tab as string
  }
  setTimeout(()=> {
    handleTabChange(activeName.value)
  })
})

// 切换 tab 时更新路由参数
const handleTabChange = (tabName: string) => {
  router.push({
    query: {
      ...route.query,
      tab: tabName
    }
  })
}

</script>
<style scoped lang="scss">

</style>