<script setup lang="ts">
import dayjs from 'dayjs'
import Analyse from './components/Analyse.vue'
import Detail from './components/Detail.vue'
import Knowledge from './components/Knowledge.vue'
import { useRoute } from 'vue-router'
import homeWorkApi from '@/api/system/homeWork'

const route = useRoute()

const params = {
  id: route.params.id,
  stuId: route.query?.stuId || '',
}

// 侧边栏
const activeType = ref('1')
const sidebarConfig = ref<anyObj[]>([])
const isDeadline = ref(false)

const jobAnalyse = ref<anyObj>({})
async function getJobAnalyse() {
  const { data: res } = await homeWorkApi.getJobAnalyse(params)
  jobAnalyse.value = res.data
  isDeadline.value = dayjs().isAfter(jobAnalyse.value.jobReportVo.submitEndTime)
  const detailCmp = { id: '1', name: '答题详情', c: markRaw(Detail) }
  if (isDeadline.value) {
    sidebarConfig.value = [
      { id: '0', name: '整体分析', c: markRaw(Analyse) },
      detailCmp,
      { id: '2', name: '知识点分析', c: markRaw(Knowledge) },
    ]
    activeType.value = '0'
  } else {
    sidebarConfig.value = [detailCmp]
    activeType.value = '1'
  }
}

const COMPONENT = computed(() => {
  return sidebarConfig.value.find(i => i.id === activeType.value)?.c
})

const pageLoading = ref(false)
onMounted(async () => {
  pageLoading.value = true
  try {
    await getJobAnalyse()
  } catch {}
  pageLoading.value = false
})

defineOptions({
  name: 'HomeWorkReports',
})
</script>
<template>
  <div class="reports">
    <div class="top">
      <BackBar :leftText="(route.query?.name as string) || ' '" />
    </div>
    <div v-if="!pageLoading" class="main">
      <div class="main-sidebar">
        <Sidebar v-model="activeType" :config="sidebarConfig"></Sidebar>
      </div>
      <div class="main-box">
        <KeepAlive>
          <component
            :is="COMPONENT"
            :params="params"
            :jobAnalyse="jobAnalyse"
            :isDeadline="isDeadline"
          ></component>
        </KeepAlive>
      </div>
    </div>
    <Empty v-else class="empty" :type="pageLoading ? 'loading' : 'network'"></Empty>
  </div>
</template>
<style scoped lang="scss">
.reports {
  @include main_bg;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;

  .top {
    padding: 3vh 64px 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  .main {
    height: calc(100% - 130px);
    padding-left: 64px;
    padding-right: 64px;
    position: relative;
    &-sidebar {
      position: absolute;
      left: 64px;
      top: 3.67vh;
      height: calc(100% - 66px);
      width: 272px;
    }
    &-box {
      width: 1482px;
      height: 86.67vh;
      margin-left: 310px;
      overflow: hidden;
      :deep(.empty) {
        height: calc(100% - 150px);
      }
    }
  }
}
</style>
