<template>
  <div class="select-simple-teacher">
    <el-form ref="FilterForm" label-position="left" inline label-width="0px">
      <el-form-item>
        <org-select v-model="filter.orgId" placeholder="选择学院"></org-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" :disabled="!canSearch" @click="getList"
          >查询</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="realName"
        label="姓名"
        min-width="120"
      ></el-table-column>
      <el-table-column
        prop="code"
        label="用户名/工号"
        min-width="120"
      ></el-table-column>
      <el-table-column
        prop="orgName"
        label="所在机构"
        min-width="120"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { courseTeachTeacherQuery } from "../../api";

export default {
  name: "select-simple-teacher",
  props: {
    value: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      filter: {
        orgId: "",
      },
      dataList: [],
      multipleSelection: [],
    };
  },
  computed: {
    canSearch() {
      return this.filter.orgId;
    },
  },
  methods: {
    async getList() {
      if (!this.canSearch) return;

      this.multipleSelection = [];
      this.emitChange();
      const data = await courseTeachTeacherQuery(this.filter.orgId);
      this.dataList = data || [];
    },
    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>
