<template>
  <div class="select-simple-student">
    <el-form ref="FilterForm" label-position="left" inline>
      <el-form-item>
        <el-select v-model="filter.clazzId" placeholder="教学班级" filterable>
          <el-option
            v-for="item in clazzList"
            :key="item.id"
            :value="item.id"
            :label="item.clazzName"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :disabled="!canSearch" @click="toPage"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <div class="box-justify mb-2">
      <p>
        全部共<span class="mlr-1">{{ dataList.length }}</span
        >人
      </p>
      <p>
        已选<span class="mlr-1">{{ multipleSelection.length }}</span
        >人
      </p>
    </div>
    <el-table
      ref="TableList"
      :data="dataList"
      border
      max-height="440px"
      @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="name" label="姓名"></el-table-column>
      <el-table-column prop="code" label="学号"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { unitQueryByType, basicTeachClazzListPage } from "../../api";

export default {
  name: "select-simple-student",
  props: {
    value: {
      type: Array,
      default() {
        return [];
      },
    },
    examId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      filter: {
        clazzId: "",
      },
      clazzList: [],
      dataList: [],
      multipleSelection: [],
    };
  },
  computed: {
    canSearch() {
      return this.filter.clazzId;
    },
  },
  watch: {
    examId: {
      immediate: true,
      handler(val, oldval) {
        if (val !== oldval) this.getClazzList();
      },
    },
  },
  methods: {
    async getClazzList() {
      if (!this.examId) return;
      const datas = {
        examId: this.examId,
      };

      const data = await basicTeachClazzListPage(datas);
      this.clazzList = data || [];
    },
    async getList() {
      const datas = {
        ...this.filter,
      };
      const data = await unitQueryByType(datas, "STUDENT");
      this.dataList = data || [];
    },
    toPage() {
      if (!this.canSearch) return;

      this.getList();
      this.multipleSelection = [];
      this.emitChange();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map((item) => item.id);
      this.emitChange();
    },
    emitChange() {
      this.$emit("input", this.multipleSelection);
      this.$emit("change", this.multipleSelection);
    },
    clearSelection() {
      this.$refs.TableList.clearSelection();
    },
  },
};
</script>
