<script setup lang="ts">
import Table from "@/components/Table/index.vue";
import { getCorrectionHistory } from "@/api";
import { getScoreColor } from "@/utils";
import { onMounted } from "vue";
import { throttle } from "lodash-es";

const props = defineProps<{
  modelValue: boolean;
  jobId: string;
}>();
const emit = defineEmits(["update:modelValue", "check"]);
const show = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  },
});
const xbTable = ref({
  loading: false,
  columns: [
    // { prop: "className", label: "班级" },
    // { prop: "stuName", label: "姓名" },
    // { prop: "titleNo", label: "题号" },
    // { slot: "score", label: "分数" },
    // { prop: "manualMarkTime", label: "批改时间" },
    {
      slot: "info",
      label: "信息",
    },
    { slot: "answer", label: "学生答案" },
  ],
  tableData: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
  },
});
function handleOpen() {
  getData();
  document
    .querySelector(
      "#correction-history-table .el-scrollbar .el-scrollbar__wrap"
    )
    ?.addEventListener("scroll", handleScroll);
}

function handleClose() {
  document
    .querySelector(
      "#correction-history-table .el-scrollbar .el-scrollbar__wrap"
    )
    ?.removeEventListener("scroll", handleScroll);
}

const listData = ref([]);
const height = window.innerHeight - 100 + "px";
const pageNum = ref(1);
async function getData() {
  const res = await getCorrectionHistory({ jobId: props.jobId });
  listData.value = res.data;
  pageNum.value = 1;
  xbTable.value.tableData = listData.value.slice(0, 10);
}
function handleView(row) {
  show.value = false;
  emit("check", row);
}

const handleScroll = throttle(function (event) {
  const { scrollTop, scrollHeight, clientHeight } = event.target;
  if (scrollTop + clientHeight >= scrollHeight - 100) {
    loadMoreData();
  }
}, 500);

function loadMoreData() {
  if (
    pageNum.value * xbTable.value.pagination.pageSize >=
    listData.value.length
  ) {
    return;
  }
  pageNum.value++;
  xbTable.value.tableData = [
    ...xbTable.value.tableData,
    ...listData.value.slice(
      (pageNum.value - 1) * xbTable.value.pagination.pageSize,
      pageNum.value * xbTable.value.pagination.pageSize
    ),
  ];
}
</script>
<template>
  <el-dialog
    title="批改记录"
    v-model="show"
    fullscreen
    destroy-on-close
    close-on-click-modal
    append-to-body
    @open="handleOpen"
    @closed="handleClose"
  >
    <Table :xbTable="xbTable" :height="height" id="correction-history-table">
      <!-- <template v-slot:score="scope">
        {{ scope.row.answerScore }} / {{ scope.row.titleScore }}
      </template> -->
      <template v-slot:info="scope">
        <div style="font-size: 16px">
          <p>班级：{{ scope.row.className }}</p>
          <p>姓名：{{ scope.row.stuName }}</p>
          <p>题号：{{ scope.row.titleNo }}</p>
          <p>
            分数：<span
              :style="{
                color: getScoreColor(
                  (scope.row.answerScore / scope.row.titleScore) * 10000
                ),
              }"
              >{{ scope.row.answerScore }}</span
            >
            / {{ scope.row.titleScore }}
          </p>
          <p>批改时间：{{ scope.row.manualMarkTime }}</p>
          <el-button
            size="large"
            link
            type="primary"
            @click="handleView(scope.row)"
            >修正</el-button
          >
        </div>
      </template>
      <template v-slot:answer="scope">
        <el-image
          v-if="scope.row.submitAnswerPic"
          style="width: 100%; height: auto"
          :src="scope.row.submitAnswerPic?.split(',')[0]"
          fit="cover"
          preview-teleported
          lazy
          :preview-src-list="scope.row.submitAnswerPic?.split(',')"
        />
      </template>
    </Table>
  </el-dialog>
</template>
<style lang="scss" scoped>
#correction-history-table {
  :deep(.el-table) {
    --el-table-border-color: #000;
  }
}
</style>
