<template>
  <el-dialog
    class="preview-task-student page-dialog"
    :visible.sync="modalIsShow"
    title="考试对象学生"
    top="10px"
    width="800px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    @close="modalClose"
    @open="visibleChange"
  >
    <div class="part-box part-box-filter" style="padding-bottom: 5px">
      <el-form ref="FilterForm" label-position="left" label-width="0" inline>
        <el-form-item label="行政班：">
          <el-select v-model="filter.className" placeholder="行政班" clearable>
            <el-option
              v-for="item in classes"
              :key="item"
              :value="item"
              :label="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教学班：">
          <el-select
            v-model="filter.teachClassName"
            placeholder="教学班"
            clearable
          >
            <el-option
              v-for="item in teacherClasses"
              :key="item"
              :value="item"
              :label="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名/学号：">
          <el-input
            v-model.trim="filter.studentNameCode"
            placeholder="姓名/学号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label-width="0px">
          <el-button type="primary" @click="toPage(1)">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table ref="TableList" :data="dataList">
      <el-table-column type="index" label="序号" width="70"></el-table-column>
      <el-table-column prop="studentName" label="姓名" min-width="80">
      </el-table-column>
      <el-table-column prop="studentCode" label="学号" width="140">
      </el-table-column>
      <el-table-column
        prop="className"
        label="行政班"
        min-width="120"
      ></el-table-column>
      <el-table-column prop="teachClassName" label="教学班" min-width="120">
      </el-table-column>
      <el-table-column
        v-if="editable"
        class-name="action-column"
        label="操作"
        width="80px"
      >
        <template slot-scope="scope">
          <el-button
            :class="scope.row.enable ? 'btn-danger' : 'btn-primary'"
            type="text"
            @click="toEnable(scope.row)"
            >{{ scope.row.enable ? "禁用" : "启用" }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="part-page">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :pager-count="5"
        :current-page="current"
        :total="total"
        :page-size="size"
        @current-change="toPage"
        @size-change="pageSizeChange"
      >
      </el-pagination>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "preview-task-student",
  props: {
    studentList: {
      type: Array,
      default() {
        return [];
      },
    },
    editable: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      modalIsShow: false,
      dataList: [],
      current: 1,
      size: this.GLOBAL.pageSize,
      total: 0,
      filter: {
        className: "",
        teachClassName: "",
        studentNameCode: "",
      },
      classes: [],
      teacherClasses: [],
    };
  },
  methods: {
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    visibleChange() {
      this.getClasses();
      this.toPage(1);
    },
    getClasses() {
      this.classes = Array.from(
        new Set(this.studentList.map((item) => item.className))
      );
      this.teacherClasses = Array.from(
        new Set(this.studentList.map((item) => item.teachClassName))
      );
    },
    getList() {
      let datas = this.studentList;
      if (this.filter.className) {
        datas = datas.filter(
          (item) => item.className === this.filter.className
        );
      }

      if (this.filter.teachClassName) {
        datas = datas.filter(
          (item) => item.teachClassName === this.filter.teachClassName
        );
      }
      if (this.filter.studentNameCode) {
        const escapeRegexpString = (value = "") =>
          String(value).replace(/[|\\{}()[\]^$+*?.]/g, "\\$&");
        const reg = new RegExp(
          escapeRegexpString(this.filter.studentNameCode),
          "i"
        );
        datas = datas.filter(
          (item) => reg.test(item.studentName) || reg.test(item.studentCode)
        );
      }

      this.total = datas.length;
      const startIndex = this.size * (this.current - 1);
      const endIndex = this.size * this.current;
      this.dataList = datas.slice(startIndex, endIndex);
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    toEnable(row) {
      if (
        this.studentList.filter((item) => item.enable).length === 1 &&
        row.enable
      ) {
        this.$message.error("只剩最后一名学生了，不能再禁用学生了。");
        return;
      }
      row.enable = !row.enable;
    },
    modalClose() {
      this.$emit("close");
    },
  },
};
</script>
