<template>
  <el-dialog
    class="page-dialog"
    :visible.sync="modalIsShow"
    title="分配班级"
    top="10vh"
    width="800px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    @opened="visibleChange"
  >
    <div class="part-box part-box-pad">
      <el-form ref="FilterForm" label-position="left" label-width="85px" inline>
        <el-form-item>
          <el-input
            v-model.trim="filterLabel"
            placeholder="请输入班级名称"
            clearable
            @change="labelChange"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="primary" @click="toPage(1)">查询</el-button>
        </el-form-item> -->
      </el-form>
      <el-table
        ref="TableList"
        :data="dataList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column width="55" align="center">
          <template slot="header">
            <el-checkbox
              v-model="checkAll"
              @change="checkAllChagne"
            ></el-checkbox>
          </template>
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.checked"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="clazzName" label="教学班"></el-table-column>
        <el-table-column prop="teachers" label="当前分配人"></el-table-column>
      </el-table>
    </div>
    <div slot="footer">
      <el-button type="primary" :loading="loading" @click="submit"
        >确认</el-button
      >
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { teacherSimpleCourseQuery, teacherSimpleAssignCourse } from "../../api";

export default {
  name: "select-dimension-dialog",
  props: {
    teacher: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      orignDataList: [],
      dataList: [],
      filterLabel: "",
      loading: false,
    };
  },
  methods: {
    async getList() {
      const data = await teacherSimpleCourseQuery({
        examId: this.teacher.examId,
        courseCode: this.teacher.courseCode,
      });
      this.orignDataList = (data || []).map((item) => {
        if (item.teacherList && item.teacherList.length) {
          item.teachers = item.teacherList.map((t) => t.name).join("，");
          item.checked = item.teacherList.some((t) => t.id === this.teacher.id);
        } else {
          item.teachers = "公共班级";
          item.checked = false;
        }
        return item;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map((item) => item.clazzId);
    },
    checkAllChagne(checked) {
      this.dataList.forEach((item) => {
        item.checked = checked;
      });
    },
    labelChange() {
      const escapeRegexpString = (value = "") =>
        String(value).replace(/[|\\{}()[\]^$+*?.]/g, "\\$&");
      const reg = new RegExp(escapeRegexpString(this.filterLabel), "i");

      this.dataList = this.orignDataList.filter((item) =>
        reg.test(item.clazzName)
      );
    },
    visibleChange() {
      this.getList();
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async submit() {
      const clazzIdList = this.orignDataList
        .filter((item) => item.checked)
        .map((item) => item.clazzId);

      if (!clazzIdList.length) {
        this.$message.error("请选择班级");
        return;
      }

      if (this.loading) return;
      this.loading = true;
      const res = await teacherSimpleAssignCourse({
        examId: this.teacher.examId,
        courseCode: this.teacher.courseCode,
        teacherId: this.teacher.id,
        clazzIdList,
      });
      this.loading = false;
      if (!res) return;
      this.$message.success("保存成功！");
      this.cancel();
    },
  },
};
</script>