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

import { AnalysisChartCard } from '@vben/common-ui'

import { taskMgrService } from '#/api/service/question-bank/task-mgr'

import ResponseStatus from './ResponseStatus.vue'
import ViewStudents from './viewStudents.vue'
import WholeAnswer from './whole-Answer.vue'
import WholeSales from './whole-sales.vue'
import WholeScore from './whole-score.vue'

const { resourceId } = defineProps({
  resourceId: {
    type: String,
    default: '',
  },
  paperId: {
    type: String,
    default: '',
  },
})

const wholeSituation = ref<any>({})

const viewType = ref('table')

const studentDialogVisible = ref(false)
const studentList = ref<any[]>([])
const studentTitle = ref('查看')

async function getWholeSituationFun(classId: string = '') {
  const res = await taskMgrService.getListRecord(resourceId, classId)
  wholeSituation.value = res || []
}

function isEmptyCount(val: any) {
  return val === undefined || val === null || val === ''
}

async function openStudentDialog(title: string, status: number) {
  const res = await taskMgrService.getListRecordStudentInfo(resourceId, status)
  const list = Array.isArray(res) ? res : (res?.rows ?? res?.data ?? [])
  studentTitle.value = title
  studentList.value = list || []
  studentDialogVisible.value = true
}

onMounted(async () => {
  await getWholeSituationFun()
  // 获取作答情况
  // await getWholeSituationFun(filterData.value.classId)
})

defineExpose({
  getWholeSituationFun,
})
</script>
<template>
  <div class="title">
    <el-radio-group v-model="viewType" size="large" fill="#409eff">
      <el-radio-button label="表格" value="table" />
      <el-radio-button label="图表" value="chart" />
    </el-radio-group>
  </div>

  <!-- 班级筛选 -->

  <el-card shadow="never" class="detail-card" v-if="viewType === 'table'">
    <el-descriptions :column="3" border>
      <el-descriptions-item label="平均得分">
        {{ wholeSituation?.avgScore ?? '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="优秀学生数">
        <el-link
          :disabled="isEmptyCount(wholeSituation?.level1Count)"
          :underline="false"
          type="primary"
          @click="openStudentDialog('优秀学生', 1)"
        >
          {{ wholeSituation?.level1Count ?? '-' }}
        </el-link>
      </el-descriptions-item>
      <el-descriptions-item label="良好学生数">
        <el-link
          :disabled="isEmptyCount(wholeSituation?.level2Count)"
          :underline="false"
          type="primary"
          @click="openStudentDialog('良好学生', 2)"
        >
          {{ wholeSituation?.level2Count ?? '-' }}
        </el-link>
      </el-descriptions-item>
      <el-descriptions-item label="及格学生数">
        <el-link
          :disabled="isEmptyCount(wholeSituation?.level3Count)"
          :underline="false"
          type="primary"
          @click="openStudentDialog('及格学生', 3)"
        >
          {{ wholeSituation?.level3Count ?? '-' }}
        </el-link>
      </el-descriptions-item>

      <el-descriptions-item label="不及格学生数">
        <el-link
          :disabled="isEmptyCount(wholeSituation?.level4Count)"
          :underline="false"
          type="primary"
          @click="openStudentDialog('不及格学生', 4)"
        >
          {{ wholeSituation?.level4Count ?? '-' }}
        </el-link>
      </el-descriptions-item>
      <el-descriptions-item label="得分率">
        {{ `${(wholeSituation?.scoreRate * 100).toFixed(2)}%` || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="未提交学生数">
        <el-link
          :disabled="isEmptyCount(wholeSituation?.status0Count)"
          :underline="false"
          type="primary"
          @click="openStudentDialog('未提交学生', 5)"
        >
          {{ wholeSituation?.status0Count ?? '-' }}
        </el-link>
      </el-descriptions-item>
      <el-descriptions-item label="提交学生数">
        <el-link
          :disabled="isEmptyCount(wholeSituation?.status1Count)"
          :underline="false"
          type="primary"
          @click="openStudentDialog('提交学生', 6)"
        >
          {{ wholeSituation?.status1Count ?? '-' }}
        </el-link>
      </el-descriptions-item>
      <el-descriptions-item label="批改学生数">
        <el-link
          :disabled="isEmptyCount(wholeSituation?.status2Count)"
          :underline="false"
          type="primary"
          @click="openStudentDialog('批改学生', 7)"
        >
          {{ wholeSituation?.status2Count ?? '-' }}
        </el-link>
      </el-descriptions-item>
      <el-descriptions-item label="总学生数">
        {{ wholeSituation?.totalCount ?? '-' }}
      </el-descriptions-item>
    </el-descriptions>
  </el-card>

  <el-card shadow="never" class="detail-card" v-if="viewType === 'chart'">
    <div class="detail-chart">
      <AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" title="提交情况">
        <WholeSales :chart-detail="wholeSituation" />
      </AnalysisChartCard>
      <AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" title="答作水平">
        <WholeAnswer :chart-detail="wholeSituation" />
      </AnalysisChartCard>
      <AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" title="得分情况">
        <WholeScore :chart-detail="wholeSituation" />
      </AnalysisChartCard>
    </div>
  </el-card>
  {{ id }}

  <!-- 作答情况 -->
  <ResponseStatus
    :response-status="wholeSituation.answerStatisticsList"
    :paper-id="paperId"
  />

  <ViewStudents
    v-model="studentDialogVisible"
    :title="studentTitle"
    :students="studentList"
  />
</template>
<style scoped>
.title {
  width: 100%;
  margin-top: 24px;
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.detail-chart {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
