<template>
  <div class="app-container">
    <div class="box">
      <FilterGroup class="box" v-model="filter" :options="options" />
      <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="info" icon="Star" @click="handleRemove(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 { getSelectDownData } from "@/utils/dropDownData";
import { getPersonReportApi } from "@/api/smartCampus/index";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  getPaperTypeList,
  getSubjectPaperList,
  updateSubjectPaperCollect,
} from "@/api";
import { useRouter } from "vue-router";
import FilterGroup from "@/components/FilterGroup";
import { onMounted, watchEffect } from "vue";
import usePaperStore from "@/store/modules/paper";
import { storeToRefs } from "pinia";

// const { proxy } = getCurrentInstance()
const router = useRouter();
const { search } = storeToRefs(usePaperStore());

const options = reactive([
  {
    label: "类型",
    optional: true,
    children: [],
  },
]);
const filter = reactive([[]]);

const filterData = ref({}); //过滤
const filterConfig = computed(() => {
  return [
    {
      comName: "el-input",
      label: "关键字",
      prop: "name",
      placeholder: "请输入",
      clearable: true,
    },
  ];
});

const xbTable = ref({
  loading: false,
  columns: [
    { prop: "name", label: "标题" },
    { prop: "subjectName", label: "学科" },
    { prop: "typeName", label: "试卷类型" },
    { label: "操作", slot: "operation" },
  ],
  tableData: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
  },
});
/** 查询列表 */
function getList() {
  xbTable.value.loading = true;
  getSubjectPaperList({
    ...xbTable.value.pagination,
    ...filterData.value,
    stagePid: search.value.stagePid,
    subjectId: search.value.subjectId,
    collectPageFlag: 1,
    type: filter[0][0],
  }).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}`);
}

// 取消收藏
async function handleRemove(row) {
  await updateSubjectPaperCollect({
    stagePid: row.stagePid,
    subjectId: row.subjectId,
    paperId: row.id,
  });
  getList();
}

async function init() {
  if (!search.value.stagePid || !search.value.subjectId) return;
  const res = await getPaperTypeList({
    pid: 0,
    stagePid: search.value.stagePid,
    subjectId: search.value.subjectId,
    category: 0,
  });
  filter[0] = [];
  options[0].children = res.data
    .filter((i) => !!i)
    .map((i) => ({
      id: i.type,
      label: i.typeName,
      value: i.type,
    }));
  getList();
}

watch(
  () => filter[0][0],
  () => getList()
);

watchEffect(() => {
  init();
});

onMounted(() => {
  getList();
});
</script>
<style scoped lang="scss">
.app-container {
  &-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 16px;
  }
  .box {
    background: #fff;
    padding: 0 16px;
    margin-bottom: 16px;
    border-radius: 4px;
  }
}
</style>
