<template>
  <div class="audit-paper">
    <div class="part-box">
      <h2 class="part-box-title">试卷审核</h2>
      <el-tabs v-model="activeName" @tab-click="tabChange">
        <el-tab-pane label="待审核列表" name="wait" lazy>
          <audit-paper-wait ref="AuditPaperWait"></audit-paper-wait>
        </el-tab-pane>
        <el-tab-pane label="我审核的记录" name="audited" lazy>
          <audit-paper-audited ref="AuditPaperAudited"></audit-paper-audited>
        </el-tab-pane>
        <el-tab-pane label="我提交的审核" name="apply" lazy>
          <audit-paper-apply ref="AuditPaperApply"></audit-paper-apply>
        </el-tab-pane>
        <el-tab-pane label="待提交的试卷" name="unsubmit" lazy>
          <audit-paper-unsubmit ref="AuditPaperUnsubmit"></audit-paper-unsubmit>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import AuditPaperApply from "../components/AuditPaperApply.vue";
import AuditPaperAudited from "../components/AuditPaperAudited.vue";
import AuditPaperWait from "../components/AuditPaperWait.vue";
import AuditPaperUnsubmit from "../components/AuditPaperUnsubmit.vue";

export default {
  name: "AuditPaper",
  components: {
    AuditPaperWait,
    AuditPaperAudited,
    AuditPaperApply,
    AuditPaperUnsubmit,
  },
  data() {
    return {
      activeName: "wait",
    };
  },
  methods: {
    tabChange(tab) {
      const tabName = tab.name[0].toUpperCase() + tab.name.substr(1);
      const compName = `AuditPaper${tabName}`;
      this.$refs[compName] && this.$refs[compName].getList();
    },
  },
};
</script>
