<template>
  <div>
    <el-dialog
      class="clazz-simple-student-manage page-dialog"
      :visible.sync="modalIsShow"
      :title="title"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      fullscreen
      destroy-on-close
      @open="visibleChange"
      @close="closed"
    >
      <div class="part-box part-box-filter part-box-flex">
        <el-form
          ref="FilterForm"
          label-position="left"
          label-width="85px"
          inline
        >
          <el-form-item label="学生：">
            <el-input
              v-model.trim="filter.studentInfo"
              placeholder="请输入姓名或者学号"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="toPage(1)">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="part-box-action">
          <el-button
            type="danger"
            icon="el-icon-circle-plus-outline"
            @click="toBatchDelete"
            >批量删除</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="toAdd"
            >新增学生</el-button
          >
        </div>
      </div>

      <div class="part-box part-box-pad">
        <el-table
          ref="TableList"
          :data="studentList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            fixed="left"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column
            type="index"
            label="序号"
            width="70"
            :index="indexMethod"
          ></el-table-column>
          <el-table-column prop="studentName" label="姓名"> </el-table-column>
          <el-table-column prop="studentCode" label="学号"> </el-table-column>
          <el-table-column prop="belongOrgName" label="院系"> </el-table-column>
          <el-table-column prop="majorName" label="专业"> </el-table-column>
          <el-table-column prop="clazzName" label="班级"> </el-table-column>
          <el-table-column class-name="action-column" label="操作" width="80">
            <template slot-scope="scope">
              <el-button
                class="btn-danger"
                type="text"
                @click="toDelete(scope.row)"
                >移除</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>
      </div>
    </el-dialog>

    <!-- ModifyStudentSimple -->
    <modify-student-simple
      ref="ModifyStudentSimple"
      :clazz="clazz"
      @modified="getList"
    ></modify-student-simple>
  </div>
</template>

<script>
import { studentSimpleListQuery, deleteStudentSimple } from "../../api";
import ModifyStudentSimple from "./ModifyStudentSimple.vue";

export default {
  name: "clazz-simple-student-manage",
  components: { ModifyStudentSimple },
  props: {
    clazz: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      filter: {
        teachClazzId: "",
        studentInfo: "",
      },
      current: 1,
      size: this.GLOBAL.pageSize,
      total: 0,
      multipleSelection: [],
      studentList: [],
      curStudent: {},
    };
  },
  computed: {
    title() {
      return `学生管理-${this.clazz.teachClazzName}`;
    },
  },
  methods: {
    visibleChange() {
      this.filter.teachClazzId = this.clazz.id;

      this.toPage(1);
    },
    closed() {
      this.$emit("modified");
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async getList() {
      const datas = {
        ...this.filter,
        pageNumber: this.current,
        pageSize: this.size,
      };
      const data = await studentSimpleListQuery(datas);
      this.studentList = data.records;
      this.total = data.total;
    },
    toPage(page) {
      this.multipleSelection = [];
      this.current = page;
      this.getList();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map((item) => item.id);
    },
    toAdd() {
      this.$refs.ModifyStudentSimple.open();
    },
    toDelete(row) {
      this.$confirm(`确定要移除学生【${row.studentName}】吗?`, "提示", {
        type: "warning",
      })
        .then(async () => {
          await deleteStudentSimple([row.id]);
          this.$message.success("操作成功！");
          this.deletePageLastItem();
        })
        .catch(() => {});
    },
    toBatchDelete() {
      if (!this.multipleSelection.length) {
        this.$message.error("请选择要删除的学生");
        return;
      }

      this.$confirm(`确定要删除选中的这些学生吗?`, "提示", {
        type: "warning",
      })
        .then(async () => {
          await deleteStudentSimple(this.multipleSelection);
          this.$message.success("操作成功！");
          this.deletePageLastItem(this.multipleSelection.length);
          this.multipleSelection = [];
        })
        .catch(() => {});
    },
  },
};
</script>
