<template>
  <div class="exam-report">
    <div class="exam-report-head">
      <h1>考情综合报表分析</h1>
      <div class="part-filter-form">
        <el-form ref="FilterForm" label-position="left" inline>
          <el-form-item>
            <el-select
              v-model="filter.examId"
              placeholder="请选择批次"
              @change="examChange"
            >
              <el-option
                v-for="item in examBatchs"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="filter.roomCode"
              placeholder="请选择考场"
              clearable
            >
              <el-option
                v-for="item in examRooms"
                :key="item.id"
                :value="item.roomCode"
                :label="item.roomName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="filter.courseCode"
              placeholder="请选择科目"
              clearable
            >
              <el-option
                v-for="item in examCourses"
                :key="item.courseCode"
                :value="item.courseCode"
                :label="item.courseName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model.trim="filter.name"
              placeholder="姓名"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model.trim="filter.identity"
              placeholder="证件号"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
        <!-- <div class="part-filter-form-action">
          <el-button type="primary" icon="icon icon-download" @click="toExport"
            >导出统计报表</el-button
          >
        </div> -->
      </div>
      <div class="exam-report-tabs">
        <el-button
          size="medium"
          v-for="item in tabs"
          :key="item.key"
          :type="item.key === curTab.key ? 'primary' : 'default'"
          round
          @click="selectTab(item)"
          >{{ item.name }}</el-button
        >
      </div>
    </div>
    <div class="exam-report-body">
      <component
        :is="curComponent"
        :filter="filter"
        ref="ReportDetail"
      ></component>
    </div>
  </div>
</template>

<script>
import { examBatchList, examActivityRoomList } from "@/api/invigilation";
import ReportOverview from "./ReportOverview";
import ReportStatistics from "./ReportStatistics";
import ReportAbsent from "./ReportAbsent";
import ReportException from "./ReportException";
import ReportReexam from "./ReportReexam";
import ReportBreach from "./ReportBreach";
import ReportCancalBreach from "./ReportCancalBreach";
import { mapState, mapActions, mapMutations } from "vuex";

export default {
  name: "exam-report",
  components: {
    ReportOverview,
    ReportStatistics,
    ReportAbsent,
    ReportException,
    ReportReexam,
    ReportBreach,
    ReportCancalBreach,
  },
  data() {
    return {
      filter: {
        examId: "",
        roomCode: "",
        courseCode: "",
        name: "",
        identity: "",
      },
      examBatchs: [],
      examActivities: [],
      examRooms: [],
      examCourses: [],
      curTab: { key: "" },
      tabs: [
        {
          key: "overview",
          name: "考试概况",
        },
        {
          key: "statistics",
          name: "情况统计",
        },
        {
          key: "absent",
          name: "缺考名单",
        },
        {
          key: "exception",
          name: "异常处理明细",
        },
        {
          key: "reexam",
          name: "重考处理明细",
        },
        {
          key: "breach",
          name: "违纪名单",
        },
        {
          key: "cancal-breach",
          name: "撤销违纪名单",
        },
      ],
    };
  },
  computed: {
    ...mapState("invigilation", ["selectedExamId"]),
    curComponent() {
      return this.curTab.key ? `report-${this.curTab.key}` : null;
    },
  },
  mounted() {
    this.initData();
  },
  methods: {
    ...mapActions("invigilation", ["updateSelectedExamId"]),
    ...mapMutations("invigilation", ["setSelectedExamId"]),
    async initData() {
      await this.getExamBatchList();
      if (!this.examBatchs.length) return;
      this.updateSelectedExamId({
        exams: this.examBatchs,
        selectedExamId: this.selectedExamId,
      });
      this.filter.examId = this.selectedExamId;
      // this.filter.examId = this.examBatchs[0] && this.examBatchs[0].id;
      this.getExamActivityRoomList();
      this.curTab = { ...this.tabs[0] };
    },
    search() {
      this.setSelectedExamId(this.filter.examId);
      this.$refs.ReportDetail.getData();
    },
    selectTab(tab) {
      this.curTab = { ...tab };
    },
    async getExamBatchList() {
      const res = await examBatchList();
      this.examBatchs = res.data.data;
    },
    async getExamActivityRoomList() {
      if (!this.filter.examId) return;
      const res = await examActivityRoomList(this.filter.examId);
      this.examActivities = res.data.data.examActivitys;
      this.examRooms = res.data.data.examRooms;
      this.examCourses = res.data.data.examCourses;
    },
    examChange() {
      this.filter.examActivityId = null;
      this.filter.roomCode = null;
      this.filter.courseCode = null;
      this.getExamActivityRoomList();
    },
    toExport() {},
  },
};
</script>

<style lang="scss" scoped>
.exam-report-head {
  background: #fff;
  margin: -30px -30px 30px -30px;
  padding: 30px;

  > h1 {
    font-size: 18px;
    font-weight: 600;
    color: #202b4b;
    line-height: 25px;
    height: 45px;
    border-bottom: 1px solid #f0f4f9;
    margin: 0;
  }
  .part-filter-form {
    border-bottom: 1px solid #f0f4f9;
    padding: 20px 0 10px;
  }
  .exam-report-tabs {
    padding-top: 20px;

    .el-button--default {
      background: #f0f4f9;
      color: #626a82;
      border-color: #f0f4f9;

      &:hover {
        color: #202b4b;
      }
    }

    button:focus {
      border: none;
      outline: none;
    }
  }
}
</style>
