<template>
  <div class="mark-manage">
    <!-- 顶部标签导航 -->
    <el-tabs
      v-model="activeMenu"
      type="card"
      class="page-tab"
      @tab-click="handleTabClick"
    >
      <el-tab-pane v-for="tab in tabs" :key="tab.name" :name="tab.name">
        <template #label>
          <el-button :type="activeMenu === tab.name ? 'primary' : 'default'">{{
            tab.label
          }}</el-button>
        </template>
      </el-tab-pane>
    </el-tabs>

    <!-- 子页面内容区域 -->
    <router-view />
  </div>
</template>

<script setup lang="ts">
  import { ref, watch, onMounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';

  defineOptions({
    name: 'MarkManage',
  });

  const route = useRoute();
  const router = useRouter();

  // 标签页配置
  const tabs = [
    { name: 'GroupManage', label: '分组管理' },
    { name: 'MarkerManage', label: '评卷员管理' },
    { name: 'TrialManage', label: '试评管理' },
    { name: 'TaskManage', label: '任务管理' },
    { name: 'ArbitrationManage', label: '仲裁管理' },
    { name: 'QualityMonitor', label: '质量监控' },
  ];

  // 当前激活的菜单项
  const activeMenu = ref<string>('');

  // 标签点击处理
  function handleTabClick(tab: any) {
    const tabName = tab.paneName || tab.props.name;
    if (tabName !== route.name) {
      router.push({ name: tabName });
    }
  }

  // 监听路由变化，更新激活菜单
  watch(
    () => route.name,
    (newName) => {
      activeMenu.value = newName as string;
    },
    { immediate: true }
  );

  // 组件挂载时初始化
  onMounted(() => {
    // 如果当前路径是父路由，默认跳转到分组管理
    if (route.name === 'MarkManage') {
      router.replace({ name: 'GroupManage' });
    } else {
      activeMenu.value = route.name as string;
    }
  });
</script>
