<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?.scoreRate),
          }"
        >
          {{ row?.avgScore }} / {{ row?.scoreRate / 100 }} %</span
        >
      </template>
      <template #status="{ row }">
        <span
          :style="{
            color: statusColorType[row.status],
          }"
        >
          {{ statusType[row.status] }}
        </span>
      </template>
    </Table>
  </div>
</template>

<script setup>
import Filter from "@/components/Filter/index.vue";
import Table from "@/components/Table/index.vue";
import { getJobStuList, getJobKnowledge } 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: "",
  },
  subjectId: {
    type: [String, Number],
    default: "",
  },
  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({
  type: 0,
}); //过滤
const filterConfig = computed(() => [
  {
    comName: "el-select",
    label: "水平",
    prop: "type",
    clearable: false,
    options: [
      { label: "薄弱", value: 0 },
      { label: "合格", value: 1 },
      { label: "良好", value: 2 },
      { label: "优秀", value: 3 },
    ],
    showAll: false,
    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: [
    { prop: "knowledgeName", label: "知识点" },
    { prop: "titleScore", label: "满分" },
    {
      slot: "score",
      label: "平均得分",
    },
  ],
  tableData: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 90,
  },
});
/** 查询列表 */
function getList() {
  xbTable.value.loading = true;
  getJobKnowledge({
    ...xbTable.value.pagination,
    ...filterData.value,
    subjectId: props.subjectId,
    sourceType: 1,
    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();
}

function onRefresh() {
  getList();
}

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