<script setup lang="ts">
import ReportHistory from '@/page/urge/components/ReportHistory.vue'
import ReportPanel from '@/page/urge/components/ReportPanel.vue'
import urgeApi from '@/api/urge.ts'
import dayjs from 'dayjs'

const isLoading = ref(false)
const isReportStatLoading = ref(false)

const reportStat = ref()
const selectedReport = ref()
const tasks: Ref<anyObj[]> = ref([])

async function handleSelectReport(report: anyObj) {
  selectedReport.value = report

  isReportStatLoading.value = true
  try {
    const {
      data: { data: statRes },
    } = await urgeApi.getUserInspectorCourseReportInfo(report.inspectorCourseId)
    reportStat.value = statRes
    tasks.value = statRes.tasks.map((task: anyObj) => {
      const {
        subjectName,
        inspectorTimeEnd,
        inspectorTimeStart,
        chapterName,
        courseTimeName,
        finishedNum = 0,
        num,
        progress,
      } = JSON.parse(task.taskInfoJson)
      return {
        id: task.id,
        subject: subjectName,
        time:
          dayjs(inspectorTimeStart).format('HH:mm') + '-' + dayjs(inspectorTimeEnd).format('HH:mm'),
        title:
          task.taskType === 0 || task.taskType === 1
            ? '观看【' + chapterName + '】章节的【' + courseTimeName + '】知识点视频'
            : task.taskType === 2
              ? 'AI精准学' + num + '次'
              : task.taskType === 3
                ? '语感练习' + num + '次'
                : '',
        mode: ['自由学', '自由学', '精准学', '语感'][task.taskType] ?? '',
        completionRate: progress ?? 0,
        num,
        finishedNum,
        completed: progress === 1 || (finishedNum > 1 && finishedNum === num),
      }
    })
  } finally {
    isReportStatLoading.value = false
  }
}

const reports = ref([])
onBeforeMount(async () => {
  isLoading.value = true
  try {
    const {
      data: { data: res },
    } = await urgeApi.getUserInspectorCourseReportList()
    reports.value = res.map((item: anyObj) => {
      const date = dayjs(item.courseDate)
      return {
        day: date.format('YYYY-MM-DD'),
        inspectorCourseId: item.inspectorCourseId,
        inspectorPlanId: item.inspectorPlanId,
        week: '星期' + ['日', '一', '二', '三', '四', '五', '六'][date.day()],
      }
    })
  } finally {
    isLoading.value = false
  }
})

const historyStats = ref()
onBeforeMount(async () => {
  const {
    data: { data: res },
  } = await urgeApi.getUserHistoryStatisticsReportInfo()
  historyStats.value = res
})
</script>

<template>
  <div class="report">
    <div v-if="isLoading" class="loadincontainer">
      <Icon name="global_loading" loading :size="80"></Icon>
    </div>
    <template v-else>
      <div v-if="reports.length === 0" class="empty-tip">
        <img src="../../assets/empty-tip.svg" alt="empty" />
        <p>督学完成后，将自动生成督学报告哦 ~</p>
      </div>
      <template v-else>
        <section>
          <h2 class="fixed">
            <LineFont text="历史统计" />
          </h2>
          <ReportHistory
            :reports="reports"
            :stats="historyStats"
            @select-report="handleSelectReport"
          />
        </section>
        <section v-if="selectedReport">
          <h2>
            <LineFont text="督学报告" />
          </h2>
          <h3>{{ selectedReport.day }} 19:00-20:00 {{ selectedReport.week }}</h3>
          <ReportPanel :loading="isReportStatLoading" :stat="reportStat" :tasks="tasks" />
        </section>
      </template>
    </template>
  </div>
</template>

<style scoped lang="scss">
.loadincontainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
}

.empty-tip {
  color: #afbfcf;
  text-align: center;
  font-family: $font-special, sans-serif;
  font-size: 2.33vh;
  line-height: 3.5vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: -5.33vh;

  img {
    height: 26.67vh;
  }
}

.report {
  height: calc(100vh - 128px);
  overflow: auto;
  position: relative;
  padding-right: 64px;
  padding-bottom: 3.33vh;
}

h2 {
  text-align: center;

  &.fixed {
    position: fixed;
    top: 2.67vh;
    left: 50%;
    margin-left: 48px;
  }
}

h3 {
  text-align: center;
  color: $font-color;
  margin-top: 0.67vh;
  font-size: 2.67vh;
  line-height: 4vh;
}

section + section {
  margin-top: 6vh;
}

h2,
h3 {
  font-weight: 400;

  .title-outline {
    line-height: normal;
  }
}
</style>
