<script setup>
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

// #region (props)
// 
// #endregion

function handleTabChange(name) {
  router.push({ name })
}

const activeName = ref(route.name)

</script>

<template>
  <div class="w-full h-full flex flex-col">
    <div class="card mb-2">
      <el-tabs v-model="activeName" @tab-change="handleTabChange">
        <el-tab-pane label="课程选课详情" name="-STXKGL-KCXKGL-DETAIL-INDEX"></el-tab-pane>
        <el-tab-pane label="选课情况" name="-STXKGL-KCXKGL-DETAIL-XKQK"></el-tab-pane>
        <el-tab-pane label="课程评价" name="-STXKGL-KCXKGL-DETAIL-KCPJ-INDEX"></el-tab-pane>
        <el-tab-pane label="上课点名" name="-STXKGL-KCXKGL-DETAIL-SKDM-INDEX"></el-tab-pane>
        <el-tab-pane label="作业管理" name="-STXKGL-KCXKGL-DETAIL-ZYGL-INDEX"></el-tab-pane>
      </el-tabs>
    </div>

    <router-view />
  </div>
</template>
