<template>
  <isp-data-load :loading="loading" :empty="false">
    <view class="page white-bg-content">
      <view class="situation-item">
        <view class="situation-item-title">学科选择</view>
        <view>
          <wd-tabs v-model="currentSubjectId" :map-num="30" custom-class="subject-tabs">
            <wd-tab
              v-for="course in subjectList"
              :key="course.value"
              :title="course.name"
              :name="course.value + ''"
            />
          </wd-tabs>
        </view>
      </view>
      <view v-if="currentSubjectId > 0">
        <StudyTime :subjectId="currentSubjectId" :userId="studentInfo.userId" />
        <VideoTime :subjectId="currentSubjectId" :userId="studentInfo.userId" />
        <KnowledgeChart :subjectId="currentSubjectId" :userId="studentInfo.userId" />
        <ExerciseStatistics :subjectId="currentSubjectId" :userId="studentInfo.userId" />
        <LanguageStatistics :show="Number(currentSubjectId) === 3" :userId="studentInfo.userId" />
      </view>

      <!-- <view v-if="currentSubjectId > 0">
            <study-situation-report-content />
            <video-study-summary />
            <knowledge-atlas />
            <review-questions-summary />
            <language-sense-learning-statistics />
        </view> -->
    </view>
  </isp-data-load>
</template>

<script setup lang="ts">
import { inject, provide, ref, watchEffect } from 'vue';
// import StudySituationReportContent from '@/pages/inspector/student-detail/components/study-situation-report-content.vue';
// import VideoStudySummary from '@/pages/inspector/student-detail/components/study-situation-report/video-study-summary.vue';
// import KnowledgeAtlas from '@/pages/inspector/student-detail/components/study-situation-report/knowledge-atlas.vue';
// import ReviewQuestionsSummary from '@/pages/inspector/student-detail/components/study-situation-report/review-questions-summary.vue';
// import LanguageSenseLearningStatistics from '@/pages/inspector/student-detail/components/study-situation-report/language-sense-learning-statistics.vue';
import { getSubjectListByGrade } from '@/api/inspector/student-detail';

import StudyTime from '@/pages/academicReport/components/studyTime.vue';
import VideoTime from '@/pages/academicReport/components/videoTime.vue';
import KnowledgeChart from '@/pages/academicReport/components/knowledgeChart.vue';
import ExerciseStatistics from '@/pages/academicReport/components/exerciseStatistics.vue';
import LanguageStatistics from '@/pages/academicReport/components/languageStatistics.vue';
import '@/pages/academicReport/index.scss';
const studentInfo = inject('studentInfo', null);
// 学科列表
const subjectList = ref<any[]>([]);
// 当前学科id
const currentSubjectId = ref<number>(0);
const loading = ref(true);
provide('studySituationParam', {
  subjectId: currentSubjectId,
  userId: studentInfo.value.userId,
});

const querySubjectList = async () => {
  loading.value = true;
  try {
    const { data } = await getSubjectListByGrade(studentInfo.value.gradeId);
    subjectList.value = data.map((item: any) => ({
      name: item.name,
      value: item.subjectId,
    }));
    currentSubjectId.value = data[0].subjectId;
  } finally {
    loading.value = false;
  }
};

watchEffect(() => {
  if (studentInfo.value.gradeId) {
    querySubjectList();
  }
});
</script>

<style scoped lang="scss">
:deep(.load-view-loading) {
  min-height: 0;
}
.situation-item {
  margin-bottom: 30rpx;

  &-title {
    color: #333;
    font-size: 34rpx;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 30rpx;
  }
}

.subject-tabs {
  height: 80rpx;
  :deep(.wd-tabs__body) {
    min-height: 0 !important;
  }
  :deep(.uni-scroll-view) {
    padding-bottom: 20rpx;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
    }
  }

  :deep(.wd-tabs__line) {
    display: none;
  }

  :deep(.wd-tabs__nav-item) {
    border-radius: 10rpx;
    background: #f9f9fb;
    margin-right: 16rpx;
    height: 66rpx;
    line-height: 66rpx;
    flex-shrink: 0;

    color: #333;

    text-align: center;
    font-size: 30rpx;
    font-style: normal;
    font-weight: 500;

    &.is-active {
      background-color: #615dff;
      color: white;
      position: relative;

      &:after {
        content: '';
        position: absolute;
        width: 20rpx;
        height: 20rpx;
        transform: rotate(45deg);
        background-color: #615dff;
        bottom: -10rpx;
        left: calc(50% - 10rpx);
      }
    }
  }
}
.page {
  padding: 30rpx;
  margin-bottom: 20rpx;
  :deep(.single_box) {
    padding: 30rpx 0 !important;
  }
  :deep(.exercise_statistics) {
    .study_situation2 {
      .item {
        width: 196rpx;
      }
    }
  }
}
</style>
