<template>
  <div class="app-container">
    <Filter
      v-model="filterData"
      :config="filterConfig"
      @handleAction="handleFilterData"
    />
    <!-- 表格 -->
    <Table
      :xbTable="xbTable"
      @tablePageChange="handleTablePageChange"
      :autoScroll="false"
    >
      <template #score="{ row }">
        <span
          :style="{
            color: getScoreColor(
              (((row.autoMarkScore || 0) + (row.manualMarkScore || 0)) /
                totalScore) *
                10000
            ),
          }"
          >{{ (row.autoMarkScore || 0) + (row.manualMarkScore || 0) }} /
          {{ row.scoreRate || "0%" }}</span
        >
      </template>
      <template #status="{ row }">
        <span
          :style="{
            color: statusColorType[row.status],
          }"
        >
          {{ statusType[row.status] }}
        </span>
      </template>
      <template #operation="{ row }">
        <el-button
          v-if="[1, 2, 3].includes(row.status)"
          link
          :type="[1, 2].includes(row.status) ? 'warning' : 'primary'"
          :icon="[1, 2].includes(row.status) ? 'Edit' : 'View'"
          @click="handleView(row)"
          >{{ [1, 2].includes(row.status) ? "批改" : "查看" }}</el-button
        >
        <el-button type="primary" link @click="handleMore(row)">更多</el-button>
      </template>
    </Table>
    <CorrectDia
      v-bind="correctDia"
      v-model="correctDia.show"
      @onRefresh="onRefresh"
    ></CorrectDia>
  </div>
</template>

<script setup>
import Filter from "@/components/Filter/index.vue";
import Table from "@/components/Table/index.vue";
import CorrectDia from "./CorrectDia/index";
import { getJobStuList, getJobClassList } from "@/api";
import { getAuthToken } from "@/api/login";
import { useRouter } from "vue-router";
import { onMounted } from "vue";
import { getScoreColor, newPage } from "@/utils";

const props = defineProps({
  jobId: {
    type: String,
    default: "",
  },
  totalScore: {
    type: Number,
    default: 0,
  },
  classList: {
    type: Array,
    default: () => [],
  },
});

const statusType = {
  0: "未提交",
  1: "超时提交",
  2: "未批改",
  3: "已批改",
};
const statusColorType = {
  0: "#F56C6C",
  1: "#F56C6C",
  2: "#409EFF",
  3: "#67C23A",
};
const router = useRouter();
const filterData = ref({}); //过滤
const filterConfig = computed(() => [
  {
    comName: "el-select",
    label: "状态",
    prop: "status",
    clearable: true,
    options: [
      { label: "未提交", value: 0 },
      { label: "超时提交", value: 1 },
      { label: "未批改", value: 2 },
      { label: "已批改", value: 3 },
    ],
    selectConfig: {
      label: "label",
      value: "value",
    },
  },
  {
    comName: "el-select",
    label: "班级",
    prop: "classId",
    clearable: true,
    options: props.classList,
    showAll: props.classList.length > 1,
    selectConfig: {
      label: "className",
      value: "id",
    },
  },
]);

const xbTable = ref({
  loading: false,
  columns: [
    { type: "index", label: "序号", width: 80 },
    { prop: "className", label: "班级" },
    { prop: "stuName", label: "姓名" },
    { prop: "costTimeInfo", label: "答题时长", sortable: true },
    {
      prop: "markScore",
      label: "得分 / 得分率",
      slot: "score",
      sortable: true,
    },
    { prop: "status", label: "状态", slot: "status", sortable: true },
    { label: "操作", slot: "operation" },
  ],
  tableData: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 70,
  },
});
/** 查询列表 */
function getList() {
  xbTable.value.loading = true;
  getJobStuList({
    ...xbTable.value.pagination,
    ...filterData.value,
    jobId: props.jobId,
  }).then((res) => {
    xbTable.value.tableData = res.rows;
    xbTable.value.loading = false;
    xbTable.value.pagination.total = res.total;
  });
}
// 过滤按钮
function handleFilterData(type) {
  switch (type.value) {
    case "search":
      getList();
      break;
    case "reset":
      xbTable.value.pagination.pageNum = 1;
      getList();
      break;
  }
}

// 表格分页
function handleTablePageChange(val) {
  xbTable.value.pagination.pageSize = val.limit;
  xbTable.value.pagination.pageNum = val.page;
  getList();
}

const correctDia = reactive({
  show: false,
  jobId: "",
  stuId: "",
  scoreRate: 0,
  status: 0,
});

// 查看/批改试卷
function handleView(row) {
  correctDia.show = true;
  correctDia.jobId = props.jobId;
  correctDia.stuId = row.stuId;
  correctDia.scoreRate = row.scoreRate.replace("%", "") * 100;
  correctDia.status = row.status;
}

function onRefresh() {
  getList();
}

const token = ref("");
async function handleMore(row) {
  if (!token.value) {
    const res = await getAuthToken();
    token.value = res.data;
  }
  newPage(
    `${import.meta.env.VITE_CLIENT_HOST}/system/homeWork/reports/${
      props.jobId
    }?token=${token.value}&stuId=${row.stuId}`
  );
}

onMounted(() => {
  getList();
  if (props.classList.length === 1) {
    filterData.value.classId = props.classList[0].id;
  }
});
</script>
