<template>
  <div class="app-container">
    <el-dialog width="1100px" :visible.sync="open" :modal="modal" :title="title" @close="handleClose">
      <el-form ref="refqueryForm" @submit.native.prevent :model="queryForm" label-width="100px" inline>
        <el-form-item label="学生姓名：">
          <el-input v-model="queryForm.studentName" @keyup.enter.native="handleQuery" placeholder="请输入学生姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索
          </el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table ref="refStudentTable" highlight-current-row stripe v-loading="loading" :data="studentList"
                @row-click="handleRowClick" @selection-change="handleSelectChange" width="100%">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column header-align="center" align="center" prop="studentName" label="姓名"></el-table-column>
        <el-table-column header-align="center" align="center" prop="gradeName" label="年级">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.Grade" :value="scope.row.gradeValue"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" prop="classValue" label="班级">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.Class" :value="scope.row.classValue"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" prop="schoolNo" label="注册序号"></el-table-column>
      </el-table>
      <ExPagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryForm.pageNum"
        :limit.sync="queryForm.pageSize"
        @pagination="getList"
      ></ExPagination>
      <div slot="footer">
        <el-button type="primary" size="mini" @click="handleSelect" :disabled="!isSimple">确 定</el-button>
        <el-button @click="handleClose" size="mini">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'StudentInfoSelect',
  dicts: ['Grade', 'Class'],
  components: {},
  props: {
    // 打开对话框
    openSelect: {
      required: true,
      type: Boolean,
      default: false
    },
    // 标题
    title: {
      required: true,
      type: String,
      default: '学生选择'
    },
    // 是否展示遮罩层
    modal: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      // 查询参数
      queryForm: {
        pageNum: 1,
        pageSize: 10,
      },
      // 学生信息列表
      studentList: [],
      // 限制只能选中一条记录
      obtainData: null,
      // 是否为单个
      isSimple: false,
      // 选中项
      selectedItem: {},
    };
  },
  watch: {},
  computed: {
    open: {
      get() {
        return this.openSelect;
      },
      set(value) {
        this.$emit('update:openSelect', value);
      }
    }
  },
  methods: {

    /** 列表查询 */
    getList() {
      this.loading = true;
      this.$emit('getStudentList', this.queryForm, (rows = [], total = 0) => {
        this.studentList = rows;
        this.total = total;
        this.loading = false;
      });
    },

    /** 模糊查询 */
    handleQuery() {
      this.throttle(() => {
        this.getList();
      })
    },

    /** 重置表单 */
    resetQuery() {
      this.queryForm = {
        pageNum: 1,
        pageSize: 10,
        studentName: '',
      };
      this.isSimple = false;
      this.handleQuery();
    },

    /** 处理列表选中数据 */
    handleSelectChange(selections) {
      this.selectedItem = selections[0];
      this.isSimple = selections.length === 1;
    },

    /** 单击行选中 */
    handleRowClick(row, column, event) {
      this.$refs.refStudentTable.clearSelection();
      this.$refs.refStudentTable.toggleRowSelection(row, true);
    },
    /** 确定 */
    handleSelect() {
      this.$emit('setStudentInfo', this.selectedItem);
      this.handleClose();
    },

    /** 关闭 */
    handleClose() {
      this.queryForm = {
        pageNum: 1,
        pageSize: 10,
        studentName: '',
      };
      this.open = false;
      this.isSimple = false;
      this.selectedItem = {};
    }
  },
  created() {
    // this.getList();
    this.resetQuery();
  },
  mounted() {
  }
};
</script>
<style scoped lang="less">
</style>
