<template>
  <el-dialog :visible.sync="openDialog" :title="title" width="780px">
    <!--  模糊查询-->
    <el-form :model="form" ref="form" size="small" inline>
      <el-form-item prop="teacherName" label="值班人">
        <el-input v-model.trim="form.teacherName" clearable placeholder="请输入值班人"
                  @keyup.enter.native="search"></el-input>
      </el-form-item>
      <el-form-item prop="teacherTel" label="联系电话">
        <el-input v-model.trim="form.teacherTel" clearable placeholder="请输入联系电话"
                  @keyup.enter.native="search"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="search" type="primary" icon="el-icon-search" size="mini">搜索</el-button>
        <el-button @click="reset" icon="el-icon-refresh" size="mini">重置</el-button>
      </el-form-item>
    </el-form>
    <!--  列表数据-->
    <el-table
      ref="tableList"
      v-loading="loading"
      :data="userList"
      @selection-change="selectionChange"
      @row-click="rowClick"
    >
      <el-table-column type="selection" align="center"></el-table-column>
      <el-table-column prop="teacherName" label="值班人姓名" align="center"></el-table-column>
      <el-table-column prop="teacherTel" label="联系电话" align="center"></el-table-column>
    </el-table>
    <!--  分页-->
    <pagination
      v-show="total > 0"
      :total="total"
      :limit.sync="form.pageSize"
      :page.sync="form.pageNum"
      @pagination="search"
    ></pagination>
    <!--  底部-->
    <el-row class="footer">
      <el-col :span="2">
        <el-button :disabled="!selectUser || disableState " @click="submit" type="primary" size="small">确 定
        </el-button>
      </el-col>
      <el-col :span="2">
        <el-button @click="quit" size="small">取 消</el-button>
      </el-col>
    </el-row>









  </el-dialog>
</template>

<script>
import {listInform} from "@/api/smartSchool/teacherManage/teacherInforManage";

export default {
  name: "SelectDutyUser",
  props: {
    open: {
      type: Boolean,
      require: true
    },
    title: {
      type: String,
      default: '选择值班人'
    },
    width: {
      type: [Number, String],
      default: '80%'
    }
  },
  data() {
    return {
      disableState: true,
      form: {
        teacherName: '',
        teacherTel: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      loading: false,
      userList: [],
      selectUser: null
    }
  },
  computed: {
    openDialog: {
      get() {
        return this.open;
      },
      set(value) {
        this.$emit('update:open', value);
      }
    }
  },
  watch: {
    open(value) {
      if (value) {
        this.$nextTick(() => {
          this.reset();
        })
      }
    }
  },
  created() {
    this.search();
  },
  methods: {
    /** 搜索（交给子组件维护，当然也可以把接口交给父组件处理） */
    async search() {
      try {
        this.loading = true;
        const response = await listInform(this.form);
        this.userList = response.rows || [];
        this.total = response.total;
        this.loading = false;
      } catch (exception) {
        this.loading = false;
        throw new Error(exception);
      }
    },
    /** 重置表单 */
    reset() {
      this.form = {
        teacherName: '',
        teacherTel: '',
        pageNum: 1,
        pageSize: 10
      };
      this.resetForm('form');
      this.search();
    },
    /** 选项选中发生变化 */
    selectionChange(selections) {

      this.disableState = selections.length != 1

      this.selectUser = selections[0];
    },
    /** 点击选中、取消 */
    rowClick(row, column) {
      this.$refs['tableList'].clearSelection();
      this.$refs['tableList'].toggleRowSelection(row, true);
    },
    /** 提交选中 */
    submit() {
      this.$emit('select', {
        id: this.selectUser.id,
        name: this.selectUser.teacherName,
        tel: this.selectUser.teacherTel
      });
      this.quit();
    },
    /** 取消 */
    quit() {
      this.openDialog = false;
    }
  }
}
</script>

<style scoped>
.footer {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
</style>
