<script lang="ts" setup>
import { ref } from 'vue'

import { AnalysisOverview } from '@vben/common-ui'
import { createIconifyIcon } from '@vben/icons'

import {
  listGradeFile,
  listResourceFile,
  listSubjectFile,
  listTextbookFile,
} from '#/api/modules/question'

const TeacherIcon = createIconifyIcon('noto-v1:woman-teacher')
const TopIcon = createIconifyIcon('fluent-emoji-flat:top-arrow')
const AverageIcon = createIconifyIcon('icon-park:pie-seven')

const resourceData = ref()
const gradeData = ref([])
const subjectData = ref([])
const textbookData = ref([])

// 定义卡片显示的文件相关指标
const overviewFileItems = ref([
  {
    icon: createIconifyIcon('vscode-icons:file-type-word'),
    title: '文档总数',
    value: 0,
  },
  {
    icon: TeacherIcon,
    title: '参与老师',
    value: 0,
  },
  {
    icon: TopIcon,
    title: '个人最高',
    value: 0,
  },
  {
    icon: AverageIcon,
    title: '每人平均',
    value: 0,
  },
] as any[])

// 定义卡片显示的题目相关指标
const overviewQuestionItems = ref([
  {
    icon: createIconifyIcon('healthicons:i-exam-multiple-choice-outline'),
    title: '题目总数',
    value: 0,
    totalValue: 0,
  },
  {
    icon: TeacherIcon,
    title: '参与老师',
    value: 0,
    totalValue: 0,
  },
  {
    icon: TopIcon,
    title: '个人最高',
    value: 0,
  },
  {
    icon: AverageIcon,
    title: '每人平均',
    value: 0,
  },
] as any[])

const activeName = ref('resource')
const loadingGradeFile = ref(false)
const loadingSubjectFile = ref(false)
const loadingTextbookFile = ref(false)
const loadingResourceFile = ref(false)

async function initGradeFile() {
  if (gradeData.value?.length || loadingGradeFile.value) return
  loadingGradeFile.value = true
  try {
    const grade = await listGradeFile()
    gradeData.value = grade
  } finally {
    loadingGradeFile.value = false
  }
}

async function initSubjectFile() {
  if (subjectData.value?.length || loadingSubjectFile.value) return
  loadingSubjectFile.value = true
  try {
    const subject = await listSubjectFile()
    subjectData.value = subject
  } finally {
    loadingSubjectFile.value = false
  }
}

async function initTextbookFile() {
  if (textbookData.value?.length || loadingTextbookFile.value) return
  loadingTextbookFile.value = true
  try {
    const textbook = await listTextbookFile()
    textbookData.value = textbook
  } finally {
    loadingTextbookFile.value = false
  }
}

async function initResourceFile() {
  if (resourceData.value?.fileCount || loadingResourceFile.value) return
  loadingResourceFile.value = true
  try {
    const resource = await listResourceFile()
    resourceData.value = resource

    // 更新数据
    overviewFileItems.value[0].value = resourceData.value.fileCount
    overviewFileItems.value[0].totalValue = resourceData.value.fileCount
    overviewFileItems.value[1].value = resourceData.value.fileTeacherCount
    overviewFileItems.value[1].totalValue = resourceData.value.fileTeacherCount
    overviewFileItems.value[2].value = resourceData.value.fileMaxCount
    overviewFileItems.value[2].totalValue = resourceData.value.fileMaxCount
    overviewFileItems.value[3].value = resourceData.value.fileAvgCount
    overviewFileItems.value[3].totalValue = resourceData.value.fileAvgCount

    overviewQuestionItems.value[0].value = resourceData.value.questionCount
    overviewQuestionItems.value[0].totalValue = resourceData.value.questionCount
    overviewQuestionItems.value[1].value =
      resourceData.value.questionTeacherCount
    overviewQuestionItems.value[1].totalValue =
      resourceData.value.questionTeacherCount
    overviewQuestionItems.value[2].value = resourceData.value.questionMaxCount
    overviewQuestionItems.value[2].totalValue =
      resourceData.value.questionMaxCount
    overviewQuestionItems.value[3].value = resourceData.value.questionAvgCount
    overviewQuestionItems.value[3].totalValue =
      resourceData.value.questionAvgCount
  } finally {
    loadingResourceFile.value = false
  }
}

watch(
  () => activeName.value,
  async () => {
    switch (activeName.value) {
      case 'grade': {
        await initGradeFile()
        break
      }
      case 'resource': {
        await initResourceFile()
        break
      }
      case 'subject': {
        await initSubjectFile()
        break
      }
      case 'textbook': {
        await initTextbookFile()
        break
      }
      // No default
    }
  },
  { immediate: true },
)

onMounted(() => {
  initResourceFile()
  initTextbookFile()
  initGradeFile()
  initSubjectFile()
})
</script>

<template>
  <el-tabs v-model="activeName" class="demo-tabs">
    <el-tab-pane
      label="资源上传情况"
      name="resource"
      class="res-container"
      v-loading="loadingResourceFile"
    >
      <AnalysisOverview :items="overviewFileItems" />
      <div class="divider"></div>
      <AnalysisOverview :items="overviewQuestionItems" />
    </el-tab-pane>
    <el-tab-pane label="年级上传情况" name="grade" v-loading="loadingGradeFile">
      <el-table :data="gradeData">
        <el-table-column prop="gradeName" label="年级" />
        <el-table-column prop="fileCount" label="文件数" />
        <el-table-column prop="fileTeacherName" label="最多老师" />
        <el-table-column prop="questionCount" label="题目数" />
        <el-table-column prop="questionTeacherName" label="最多老师" />
        <el-table-column prop="questionAuditCount" label="审核数" />
        <el-table-column prop="questionReviewerCount" label="复核数" />
        <el-table-column prop="questionRepeatCount" label="重复数" />
        <el-table-column prop="questionRejectCount" label="拒绝数" />
      </el-table>
    </el-tab-pane>
    <el-tab-pane
      label="学科上传情况"
      name="subject"
      v-loading="loadingSubjectFile"
    >
      <el-table :data="subjectData">
        <el-table-column prop="subjectName" label="学科" />
        <el-table-column prop="fileCount" label="文件数" />
        <el-table-column prop="fileMaxGrade" label="最多年级" />
        <el-table-column prop="fileMinGrade" label="最少年级" />
        <el-table-column prop="fileTeacherName" label="最多老师" />
        <el-table-column prop="questionCount" label="题目数" />
        <el-table-column prop="questionMaxGrade" label="最多年级" />
        <el-table-column prop="questionMinGrade" label="最少年级" />
        <el-table-column prop="questionTeacherName" label="最多老师" />
      </el-table>
    </el-tab-pane>
    <el-tab-pane
      label="题目总数"
      name="textbook"
      v-loading="loadingTextbookFile"
    >
      <el-table :data="textbookData">
        <el-table-column prop="subjectName" label="学科" />
        <el-table-column prop="grade3ActualCount" label="三年级" />
        <el-table-column prop="grade4ActualCount" label="四年级" />
        <el-table-column prop="grade5ActualCount" label="五年级" />
        <el-table-column prop="grade6ActualCount" label="六年级" />
        <el-table-column prop="grade7ActualCount" label="七年级" />
        <el-table-column prop="grade8ActualCount" label="八年级" />
        <el-table-column prop="grade9ActualCount" label="九年级" />
        <el-table-column prop="grade10ActualCount" label="高一" />
        <el-table-column prop="grade11ActualCount" label="高二" />
        <el-table-column prop="grade12ActualCount" label="高三" />
      </el-table>
    </el-tab-pane>
  </el-tabs>
</template>

<style lang="scss" scoped>
.demo-tabs {
  padding: 16px;

  .res-container {
    display: flex;
    flex-direction: column;
    gap: 16px;

    .divider {
      height: 1px;
      background-color: #ccc;
    }
  }

  :deep(.el-table) {
    width: 100%;
    height: 100%;
    border-radius: 8px;

    .cell {
      text-align: center;
    }

    .el-table__header {
      .cell {
        color: #000;
      }
    }
  }
}
</style>
