<template>
  <div class="app-container">
    <Filter
      class="box"
      v-model="filterData"
      :config="filterConfig"
      @handleAction="handleFilterData"
    />
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd"
          >新增作业</el-button
        >
      </el-col>
    </el-row>
    <!-- 表格 -->
    <Table :xbTable="xbTable" @tablePageChange="handleTablePageChange">
      <template v-slot:stuNum="scope">
        <span style="color: #409eff">{{ scope.row.unMarkTitleNum }} </span>
      </template>
      <template v-slot:avgScoreRate="scope">
        <span :style="{ color: getScoreColor(scope.row.avgScoreRate) }"
          >{{ scope.row.avgScoreRate / 100 }}%</span
        >
      </template>
      <template v-slot:operation="scope">
        <!-- <el-button
          link
          type="primary"
          icon="View"
          @click="handleView(scope.row)"
          >查看</el-button
        > -->
        <el-button
          link
          type="primary"
          :icon="scope.row.needAuditFlag === '1' ? 'Edit' : 'View'"
          @click="handleView(scope.row)"
          >{{ scope.row.needAuditFlag === "1" ? "批改" : "查看" }}</el-button
        >
        <el-button
          link
          type="danger"
          icon="Delete"
          @click="handleDelete(scope.row)"
          >删除</el-button
        >
      </template>
    </Table>
  </div>
</template>

<script setup name="PersonageReport">
import Filter from "@/components/Filter/index.vue";
import Table from "@/components/Table/index.vue";
import { ElMessageBox } from "element-plus";
import { getJobList, getSubjectPaperList, delJob } from "@/api";
import { onMounted } from "vue";
import { useRouter } from "vue-router";
import useUserStore from "@/store/modules/user";
import { getScoreColor } from "@/utils";
// const { proxy } = getCurrentInstance()

const router = useRouter();
const userStore = useUserStore();
const filterData = ref({}); //过滤
const filterConfig = computed(() => {
  return [
    {
      comName: "el-input",
      label: "关键字",
      prop: "keyword",
      placeholder: "请输入",
      clearable: true,
    },
    {
      comName: "el-date-picker",
      label: "发布时间",
      type: "datetimerange",
      prop: "publishTime",
      startPlaceholder: "开始时间",
      endPlaceholder: "结束时间",
      format: "YYYY-MM-DD HH:mm",
      valueFormat: "YYYY-MM-DD HH:mm",
      defaultTime: [
        new Date(2000, 1, 1, 0, 0, 0),
        new Date(2000, 1, 1, 23, 59, 59),
      ],
    },
    {
      comName: "el-date-picker",
      label: "开始时间",
      type: "datetimerange",
      prop: "beginTime",
      startPlaceholder: "开始时间",
      endPlaceholder: "结束时间",
      format: "YYYY-MM-DD HH:mm",
      valueFormat: "YYYY-MM-DD HH:mm",
      defaultTime: [
        new Date(2000, 1, 1, 0, 0, 0),
        new Date(2000, 1, 1, 23, 59, 59),
      ],
    },
    {
      comName: "el-date-picker",
      label: "截止时间",
      type: "datetimerange",
      prop: "endTime",
      startPlaceholder: "开始时间",
      endPlaceholder: "结束时间",
      format: "YYYY-MM-DD HH:mm",
      valueFormat: "YYYY-MM-DD HH:mm",
      defaultTime: [
        new Date(2000, 1, 1, 0, 0, 0),
        new Date(2000, 1, 1, 23, 59, 59),
      ],
    },
    {
      comName: "el-select",
      label: "组卷选择",
      prop: "paperId",
      clearable: true,
      options: paperOptions.value,
      selectConfig: {
        label: "label",
        value: "value",
      },
    },
    {
      comName: "el-select",
      label: "状态",
      prop: "needAuditFlag",
      clearable: true,
      options: [
        { label: "已批改", value: "0" },
        { label: "未批改", value: "1" },
      ],
      selectConfig: {
        label: "label",
        value: "value",
      },
    },
  ];
});
const paperOptions = ref([]);

const xbTable = ref({
  loading: false,
  columns: [
    { prop: "name", label: "作业名称" },
    { label: "待批改题目数", slot: "stuNum", width: 110 },
    { label: "平均得分率", slot: "avgScoreRate", width: 110 },
    { prop: "studentsName", label: "学员" },
    { prop: "createTime", label: "发布时间", width: 160 },
    { prop: "beginTime", label: "开始时间", width: 160 },
    { prop: "submitEndTime", label: "截止时间", width: 160 },
    { label: "操作", slot: "operation", width: 180 },
  ],
  tableData: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
  },
});
/** 查询列表 */
async function getList() {
  xbTable.value.loading = true;
  try {
    const res = await getJobList({
      ...xbTable.value.pagination,
      ...filterData.value,
      createUser: userStore.id,
      publishStartTime: filterData.value?.publishTime?.[0],
      publishEndTime: filterData.value?.publishTime?.[1],
      beginStartTime: filterData.value?.beginTime?.[0],
      beginEndTime: filterData.value?.endTime?.[1],
      submissionStartTime: filterData.value?.endTime?.[0],
      submissionEndTime: filterData.value?.endTime?.[1],
    });
    xbTable.value.tableData = res.rows;
    xbTable.value.loading = false;
    xbTable.value.pagination.total = res.total;
  } catch (err) {
    console.log(err);
  } finally {
    xbTable.value.loading = false;
  }
}
// 过滤按钮
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();
}

/*
 ** 操作
 */
// 新增作业
function handleAdd() {
  router.push("/jobRecords/jobAdd");
}

// 查看试卷
function handleView(row) {
  router.push(`/jobRecords/jobDetail?id=${row.id}`);
}

// 删除试卷
async function handleDelete(row) {
  await ElMessageBox.confirm("是否确认删除？", "提示", { type: "warning" });
  xbTable.value.loading = true;
  try {
    await delJob(row.id);
    getList();
  } catch (err) {
    console.log(err);
  } finally {
    xbTable.value.loading = false;
  }
}

// 初始化
async function init() {
  const res = await getSubjectPaperList({
    category: 4,
    pageNum: 1,
    pageSize: 10000,
  });
  paperOptions.value = res.rows.map((i) => ({
    label: i.name,
    value: i.id,
  }));
}

onMounted(() => {
  init();
  getList();
});
</script>

<style lang="scss">
.box {
  background: #fff;
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 4px;
}
</style>
