<script setup lang="ts">
import StudyTime from './components/StudyTime.vue'
import VideoTime from './components/VideoTime.vue'
import KnowledgeChart from './components/KnowledgeChart.vue'
import TopicChart from './components/TopicChart.vue'
import WordChart from './components/WordChart.vue'
import ReadData from './components/ReadData.vue'
import { userStore } from '@/stores'
import { useRoute } from 'vue-router'
import { storeToRefs } from 'pinia'
import { getSubjectsByGrade } from '../../api/subject/config'
import studyAnalysisApi from '@/api/studyAnalysis'

const { userInfo } = storeToRefs(userStore())

const route = useRoute()
// const { subject } = subjectStore()
const subjectId = route.query.subjectId
const subjectName = route.query.subjectName
const activeNav = ref(0) // 激活的侧边栏
const grade = ref(userInfo.value.learnGradeId)
const loading = ref(false) // 加载loading
const windowWidth = ref(1920)
const dataList = ref<
  {
    subjectId: number
    name: string
    subject: string
    pictureUrl: null | string
  }[]
>([])

function init() {
  loading.value = true
  dataList.value = getSubjectsByGrade(grade.value)
  activeNav.value = Number(subjectId) || dataList.value[0].subjectId
}

function handleChange(item: anyObj) {}
defineOptions({
  name: 'StudyAnalysis',
})

const userId = computed(() => route.query.id || userInfo.value.userId)
const studentInfo = ref<anyObj>({})
async function initUser() {
  const id = route.query.id
  if (!id) return

  const res = await studyAnalysisApi.getUserInfoById(id)
  studentInfo.value = res
  grade.value = res.learnGradeId
}

onMounted(async () => {
  if (route.query.id) await initUser()
  init()
  windowWidth.value = window.innerWidth
})
</script>
<template>
  <div class="study_box">
    <div class="study_box_top">
      <BackBar :leftText="`${subjectId ? `【${subjectName}】` : ''}学情分析`" class="backBar" />
      <div v-if="!subjectId" class="nav_list">
        <SelectTab
          v-model="activeNav"
          :dataList="dataList"
          :format="{ label: 'subject', value: 'subjectId' }"
          @change="handleChange"
        ></SelectTab>
      </div>
    </div>
    <board-bg class="study_box_banner">
      <user-figure-big
        v-if="route.query.id"
        class="user"
        :reverse-level="true"
        :user-info="studentInfo"
        show-name
      />
      <div v-if="1" class="content hidden_scroll">
        <!-- 单词统计 -->
        <WordChart
          v-if="activeNav === dataList[0]?.subjectId"
          :windowWidth="windowWidth"
          :subjectId="activeNav"
          :userId="userId"
        ></WordChart>
        <!-- 阅读统计 -->
        <ReadData v-if="activeNav === dataList[0]?.subjectId" title="阅读统计"> </ReadData>
        <!-- 语感统计 -->
        <TopicChart
          v-if="activeNav === dataList[0]?.subjectId"
          :windowWidth="windowWidth"
          :subjectId="activeNav"
          :userId="userId"
          isEnglish
        >
        </TopicChart>
        <StudyTime
          :isEnglish="activeNav === dataList[0]?.subjectId"
          :windowWidth="windowWidth"
          :subjectId="activeNav"
          :userId="userId"
        ></StudyTime>
        <VideoTime :windowWidth="windowWidth" :subjectId="activeNav" :userId="userId"></VideoTime>
        <KnowledgeChart
          :windowWidth="windowWidth"
          :subjectId="activeNav"
          :userId="userId"
        ></KnowledgeChart>
        <!-- 练习统计 -->
        <ReadData :subjectId="activeNav" :userId="userId" title="练习统计"> </ReadData>
        <!-- 刷题统计 -->
        <TopicChart :windowWidth="windowWidth" :subjectId="activeNav" :userId="userId">
        </TopicChart>
      </div>
      <div v-else class="empty">
        <Empty type="goods" content="暂未生成数据，快去学习吧~"></Empty>
      </div>
    </board-bg>
  </div>
</template>

<style lang="scss" scoped>
.study_box {
  width: 100%;
  height: 100%;
  @include main_bg;
  .study_box_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.67vh $space-6;
    .nav_list {
      :deep(.select-list) {
        display: flex;

        .data-item {
          width: auto;
          flex: 0 0 auto;
          padding: 0 32px;
        }
      }
    }
  }
  .study_box_banner {
    // background-color: #e5f5fe;
    background-size: 100%;
    border-radius: 3.33vh;
    width: 1824px;
    height: 86vh;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: 8vh 24px 2.5vh 24px;
    position: relative;
    $title_w: 300px;
    &::before {
      content: '*今日数据，每天0点更新';
      position: absolute;
      top: 4.33vh;
      width: $title_w;
      // right: calc(50% - $title_w / 2);
      right: 20px;
      font-family: $font-text;
      text-align: center;
      font-size: 2vh;
      font-weight: 400;
      line-height: 3vh;
      text-align: center;
      color: #1f9993;
    }

    .user {
      position: absolute;
      top: 0;
      left: 0;
    }

    .content {
      flex: 1;
      // height: $content_h;
      border-radius: 2.5vh;

      :deep(.data-content) {
        margin-top: 1.67vh;
        padding: 2.67vh 72px;
        // background-color: #fff;
        border-radius: 1.67vh;
        // box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        &:first-child {
          margin-top: 0;
        }
        .data-title {
          font-family: $font-special;
          font-size: 4vh;
          line-height: 4.67vh;
          text-align: center;
        }
        .x-icon {
          margin-left: 10px;
        }
      }
    }
    .empty {
      height: 100%;
      overflow-y: scroll;
    }
  }
}
</style>
