<template>
  <div class="app-container">
    <el-descriptions class="box" border>
      <el-descriptions-item label="作业名称" min-width="100">{{
        jobInfo.name || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="开始时间">
        {{ jobInfo.beginTime || "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="截止时间">
        {{ jobInfo.submitEndTime || "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="发布对象" min-width="100">
        共{{ jobInfo.stuNum || 0 }}人
      </el-descriptions-item>
      <el-descriptions-item label="试卷名称" min-width="100">
        {{ jobInfo.paperName || "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="试卷总分">
        {{ jobInfo.totalScore || 0 }}
      </el-descriptions-item>
      <el-descriptions-item label="作业内容">
        {{ jobInfo.content || "-" }}
      </el-descriptions-item>
    </el-descriptions>
    <div class="box">
      <div class="nav">
        <el-radio-group v-model="active" size="large" @change="handleChange">
          <el-radio-button label="整体情况" :value="0" />
          <el-radio-button label="学生个人情况" :value="1" />
          <el-radio-button label="知识点" :value="2" />
        </el-radio-group>
      </div>
      <div v-if="jobId" class="situation">
        <Whole
          v-if="active === 0"
          :jobId="jobId"
          :answerData="answerData"
          :submission="submission"
          :levelData="levelData"
          :avgData="avgData"
          :classList="classList"
          @refresh="onRefresh"
        ></Whole>
        <Single
          v-else-if="active === 1"
          :jobId="jobId"
          :totalScore="jobInfo.totalScore"
          :classList="classList"
        ></Single>
        <Knowledge
          v-else-if="active === 2"
          :jobId="jobId"
          :subjectId="jobInfo.subjectId"
          :classList="classList"
        ></Knowledge>
      </div>
    </div>
  </div>
</template>

<script setup>
import Filter from "@/components/Filter/index.vue";
import Table from "@/components/Table/index.vue";
import Whole from "./components/Whole.vue";
import Single from "./components/Single.vue";
import Knowledge from "./components/Knowledge.vue";
import { useRoute } from "vue-router";
import { onMounted } from "vue";
import { getJobById, getJobAnalysisById, getJobClassList } from "@/api";

const route = useRoute();
const jobId = ref("");
const jobInfo = ref({});

const active = ref(0);
function handleChange(type) {
  getAnalysis();
}

// 提交情况
const submission = ref([]);
// 作答情况
const answerData = ref([]);
// 作答水平
const levelData = ref([]);
// 平均情况
const avgData = ref({
  avgScore: 0,
  avgScoreRate: 0,
});

async function init() {
  const res = await getJobById(jobId.value);
  jobInfo.value = res.data;
}

async function getAnalysis(data) {
  const res = await getJobAnalysisById({
    id: jobId.value,
    ...data,
  });
  submission.value = res.data.submitStatisticsList.map((i) => i.stuNum);
  answerData.value = res.data.answerStatisticsList;
  levelData.value = res.data.answerLevelStatisticsList;
  avgData.value = {
    avgScore: res.data.avgScore,
    avgScoreRate: res.data.avgScoreRate,
  };
}

// 查询班级
const classList = ref([]);
function initClassList() {
  getJobClassList({ jobId: jobId.value }).then((res) => {
    classList.value = res.data;
  });
}

onMounted(() => {
  jobId.value = route.query.id;
  if (!jobId.value) return;
  init();
  getAnalysis();
  initClassList();
});

function onRefresh(data) {
  getAnalysis(data);
}
</script>
<style scoped lang="scss">
.app-container {
  position: relative;
  form {
    margin: 0 auto;
  }
  .box {
    background: #fff;
    padding: 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    .nav {
      text-align: center;
    }
  }
}

.select-type {
  text-align: center;
}
.select-btns {
  display: inline-flex;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid #0079fe;
  .select-btn {
    width: 200px;
    height: 30px;
    text-align: center;
    line-height: 28px;
    color: #0079fe;
    cursor: pointer;
    font-weight: bold;
    &.active {
      background-color: #0079fe;
      color: #fff;
    }
  }
}
</style>
