<script setup lang="ts">
import user from '~/store/user';
const router = useRouter()
const route = useRoute()
let list = $ref([{ title: '首页', route: 'teacher_home' }]);
// #ifdef PROD
await request({
  url: '/dyaw/xlfw_pbgl/index',
  data: {
    user_id: user.user_id
  }
}).then(res => {
  if (res.code === '1') {
    if (res.data.page_data?.length === 1) {
      list.push(
        { title: '咨询页面', route: 'teacher_consult' },
        { title: '学生档案', route: 'teacher_archives' })
    }
  }
})
// #endif


// #ifdef DEV
list = [
  { title: '首页', route: 'teacher_home' },
  { title: '咨询页面', route: 'teacher_consult' },
  { title: '学生档案', route: 'teacher_archives' }
]
// #endif

function routerPush(name: string) {
  router.push({ name })
}
</script>

<template>
  <div class="w-1400px h-640px flex flex-col">
    <div class="flex flex-none space-x-12 text-lg h-50px">
      <div v-for="item in list" class="cursor-pointer relative mb-22px" @click="routerPush(item.route)"
        :class="route.name === item.route && 'selected'">{{
  item.title
        }}</div>
    </div>
    <div class="flex-auto">
      <router-view></router-view>
    </div>
  </div>
</template>

<style scoped lang="scss">
.selected {
  color: #007DFF;

  &::after {
    content: '-';
    color: transparent;
    position: absolute;
    left: -5px;
    right: -5px;
    bottom: -4px;
    height: 15px;
    background: rgba(0, 125, 255, 0.30);
    border-radius: 8px;
  }
}
</style>
