<template>
  <div class="app-container" v-loading="loading">
    <div class="box">
      <Filter
        v-model="filterData"
        :config="filterConfig"
        @handleAction="handleFilterData"
      />
    </div>
    <!-- 表格 -->
    <Table :xbTable="xbTable" @tablePageChange="handleTablePageChange">
      <template v-slot:operation="scope">
        <el-button
          link
          type="primary"
          icon="View"
          @click="handleView(scope.row)"
          >查看</el-button
        >
        <el-button
          link
          type="primary"
          icon="Edit"
          @click="handleEdit(scope.row)"
          >编辑</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 {
  getSubjectPaperList,
  delMyPaperById,
  getSubjectPaperById,
} from "@/api";
import { nextTick, onMounted } from "vue";
import { useRouter } from "vue-router";
import { formatTitleToPaper } from "@/utils";
import usePaperStore from "@/store/modules/paper";
import { storeToRefs } from "pinia";

const router = useRouter();
const { search } = storeToRefs(usePaperStore());
const { clearPaper, addQuestions } = usePaperStore();

const filterData = ref({}); //过滤
const filterConfig = computed(() => {
  return [
    {
      comName: "el-input",
      label: "关键字",
      prop: "name",
      placeholder: "请输入",
      clearable: true,
    },
    {
      comName: "el-date-picker",
      label: "组卷日期",
      type: "daterange",
      prop: "date",
      startPlaceholder: "开始日期",
      endPlaceholder: "结束日期",
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD",
    },
  ];
});

const xbTable = ref({
  loading: false,
  columns: [
    { prop: "name", label: "标题" },
    { prop: "subjectName", label: "学科" },
    { prop: "paperScore", label: "总分" },
    { prop: "createTime", label: "组卷时间" },
    { label: "操作", slot: "operation" },
  ],
  tableData: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
  },
});
/** 查询列表 */
function getList() {
  xbTable.value.loading = true;
  getSubjectPaperList({
    category: 4,
    ...xbTable.value.pagination,
    ...filterData.value,
    startTime: filterData.value.date?.[0],
    endTime: filterData.value.date?.[1],
  }).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();
}

// 查看试卷
function handleView(row) {
  router.push(`/paper/details?id=${row.id}`);
}
// 编辑试卷
const loading = ref(false);
async function handleEdit(row) {
  await ElMessageBox.confirm(
    "将清空现有试题篮并将该组卷的所有试题加试题篮",
    "提示",
    { type: "warning" }
  );
  loading.value = true;
  try {
    const { data: res } = await getSubjectPaperById(row.id);
    const questions = [];
    res.contentDetails.forEach((i) =>
      questions.push(...formatTitleToPaper(i.titleList))
    );
    search.value.stagePid = res.stagePid;
    search.value.subjectId = res.subjectId;
    clearPaper(false);
    await nextTick();
    await addQuestions(questions);
    router.push("/paper/combinationCenter");
  } catch (err) {
    console.log(err);
  } finally {
    loading.value = false;
  }
}
// 删除试卷
async function handleDelete(row) {
  await ElMessageBox.confirm("是否确认删除", "提示", { type: "warning" });
  await delMyPaperById(row.id);
  getList();
  // await ElMessageBox.alert('该组卷已在作业中使用，不可修改', '删除提示')
}

onMounted(() => {
  getList();
});
</script>
<style lang="scss" scoped>
.box {
  background: #fff;
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 4px;
  :deep(.el-form-item) {
    margin-bottom: 0;
  }
}
</style>
