<template>
  <wd-tabs v-model="currentTab" custom-class="student-detail-tabs">
    <wd-tab v-for="tab in tabs" :key="tab.name" :title="tab.title" :name="tab.name">
      <component :is="tab.content" />
    </wd-tab>
  </wd-tabs>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import StudentInspectorReport from '@/pages/inspector/student-detail/components/student-inspector-report.vue';
import DataPlan from '@/pages/inspector/student-detail/components/data-plan.vue';
import StudySituationReport from '@/pages/inspector/student-detail/components/study-situation-report.vue';

const currentTab = ref(0);

const tabs = [
  {
    title: '学习计划',
    name: 'plan',
    content: DataPlan,
    noData: false,
  },
  {
    title: '督学报告',
    name: 'report',
    content: StudentInspectorReport,
    noData: false,
  },
  {
    title: '学情报告',
    name: 'study',
    content: StudySituationReport,
    noData: false,
  },
];
</script>

<style scoped lang="scss">
.student-detail-tabs {
  :deep(.wd-tabs__body) {
    min-height: 500rpx;
  }
}
</style>
