<script setup lang="ts">
import { userStore } from '@/stores'
import { storeToRefs } from 'pinia'
import homeWorkApi from '@/api/system/homeWork'
import Whole from './Whole.vue'
import SingleAnalysis from './SingleAnalysis.vue'
import { useRoute } from 'vue-router'

const OSS_URL = import.meta.env.VITE_OSS_URL

const route = useRoute()
let paramsStuId = route.query?.stuId || ''
const leftText = computed(() => route.query?.name || ' ')

const { userInfo } = storeToRefs(userStore())

const wholeAnalysis = ref<anyObj[]>([])
async function getAnalysis() {
  const { data: res } = await homeWorkApi.getStatisticalAnalysis({
    stuId: paramsStuId || userInfo.value.smartUserIdentifier,
  })

  if (res.code === 200) {
    wholeAnalysis.value = res.data
  }
}
// const { subjectList, getSubjectAllList } = subjectStore();
const activeClass = ref('')
const classList = ref([{ id: '', name: '整体' }])
async function getClassList() {
  const { data: res } = await homeWorkApi.getAnalyseSubjectList({
    stuId: paramsStuId || userInfo.value.smartUserIdentifier,
  })
  if (res.code === 200) {
    classList.value.push(...res.data)
  }
}

const singleAnalysis = ref<any>({})
async function getAnalysisSubject() {
  const { data: res } = await homeWorkApi.getStatisticalSubject({
    sourceType: 0,
    stuId: paramsStuId || userInfo.value.smartUserIdentifier,
    subjectId: activeClass.value,
  })
  if (res.code === 200) {
    singleAnalysis.value = res.data
  }
}

const type = ref(0)
const knowledgeAnalysis = ref<{ loading: boolean; table: anyObj[] }[]>([])
async function getKnowledgeSubject() {
  if (knowledgeAnalysis.value[type.value]?.loading) return
  if (Array.isArray(knowledgeAnalysis.value[type.value]?.table)) return
  const curType = type.value
  knowledgeAnalysis.value[curType] = {
    loading: true,
    table: [],
  }
  try {
    const { data: res } = await homeWorkApi.getKnowledgeSubject({
      sourceType: 0,
      stuId: paramsStuId || userInfo.value.smartUserIdentifier,
      subjectId: activeClass.value,
      size: 300,
      // orderByColumn: 'lostFrequency',
      // isAsc: 'asc',
      type: type.value,
    })
    if (res.code === 200) {
      knowledgeAnalysis.value[curType].table = res.rows || []
    }
  } catch {}
  knowledgeAnalysis.value[curType].loading = false
}
watch(type, () => getKnowledgeSubject())
watch(activeClass, () => {
  knowledgeAnalysis.value = []
  getKnowledgeSubject()
})

const loading = ref(false)
async function handleSelectClass(item: anyObj) {
  if (item.id === '') {
    getAnalysis()
  } else {
    loading.value = true
    try {
      await getAnalysisSubject()
    } catch {}
    loading.value = false
  }
}

onActivated(async () => {
  paramsStuId = route.query?.stuId || ''
  classList.value = [{ id: '', name: '整体' }]
  activeClass.value = ''
  getClassList()
  getAnalysis()
})
</script>
<template>
  <div class="homework_statistics">
    <div class="top">
      <BackBar :leftText="leftText" />
    </div>
    <div class="main">
      <div class="main_sidebar">
        <Sidebar
          v-model="activeClass"
          :config="classList"
          @handle-change="handleSelectClass"
        ></Sidebar>
      </div>
      <div
        class="main_book"
        :style="{ 'background-image': `url(${OSS_URL}/urm/homeWork/wrong_bg.svg)` }"
      >
        <template v-if="!loading">
          <Whole v-if="activeClass === ''" :wholeAnalysis="wholeAnalysis"></Whole>
          <SingleAnalysis
            v-else
            v-model:type="type"
            :data="singleAnalysis"
            :table="knowledgeAnalysis[type]?.table"
            :tableLoading="knowledgeAnalysis[type]?.loading"
          ></SingleAnalysis>
        </template>
        <Empty v-else type="loading" style="height: 900px"></Empty>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.homework_statistics {
  padding: 2.67vh 64px;
  @include main_bg;
  position: relative;
  width: 100vw;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  line-height: 1.5;
  .top {
    position: absolute;
    // top: 32;
    // left: 64;
  }
  .main {
    // margin-top: 66px;
    width: 100%;
    height: 100%;
    padding-top: 2.83vh;
    display: flex;
    &_sidebar {
      padding-top: 5.5vh;
      width: 275px;
      margin-right: 50px;
    }
    &_book {
      width: 1470px;
      height: 90.25vh;
      flex-shrink: 0;
      background-size: 100%;
      padding: 8.67vh 64px 3.17vh;
    }
  }
}
</style>
