<template>
  <el-dialog :visible.sync="openDialog" :title="title" :width="width" @close="dialogClose">
    <!--  模糊查询-->
    <el-form :model="form" ref="form" size="small" inline>
      <el-form-item prop="teacherName" label="姓名">
        <el-input v-model.trim="form.teacherName" placeholder="请输入姓名" clearable @keyup.enter.native="search"></el-input>
      </el-form-item>
      <el-form-item prop="teacherTel" label="联系电话">
        <el-input v-model.trim="form.teacherTel" placeholder="请输入联系电话" clearable @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 v-if="execute === 'leaderList'" key="avatar" prop="avatar" label="头像" align="center">
        <template slot-scope="scope">
          <el-image :src="baseURL + scope.row.avatar" :preview-src-list="[baseURL + scope.row.avatar]"
            class="custom-image radius-image">
            <template slot="error">
              {{ }}
            </template>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column v-if="execute != 'leaderList'" key="teacherCode" prop="teacherCode" label="教师编号"
        align="center"></el-table-column>
      <el-table-column key="teacherName" prop="teacherName" label="姓名" align="center"></el-table-column>
      <el-table-column key="teacherTel" prop="teacherTel" label="联系电话" align="center"></el-table-column>
      <el-table-column key="sex" prop="sex" label="性别" align="center">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"></dict-tag>
        </template>
      </el-table-column>
    </el-table>
    <!--  分页-->
    <pagination v-show="total > 0" :total="total" :limit.sync="form.pageSize" :page.sync="form.pageNum"
      @pagination="search"></pagination>
    <!--  底部-->
    <div slot="footer">
      <el-button :disabled="!selectUser" @click="submit" type="primary" size="small">确 定</el-button>
      <el-button @click="quit" size="small">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>

import {

  getLeaderList,//获取校领导下拉框
} from "@/api/smartSchool/personWork/auditoriumReservation";
export default {
  name: "SelectUser",
  dicts: ['sys_user_sex'],
  props: {
    open: {
      type: Boolean,
      require: true
    },
    title: {
      type: String,
      default: ''
    },
    width: {
      type: [Number, String],
      default: '50%'
    },
    execute: {
      type: [String]
    },
    // 选择级部、处室主任
    id: {
      type: [Number, String]
    }
  },
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      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();
        })
      }
    }
  },

  methods: {
    /** 搜索（交给子组件维护，当然也可以把接口交给父组件处理） */
    async search() {
      if (isNaN(Number(this.id))) {
        console.error('Invalid ID');
        return;
      }

      try {
        this.loading = true;
        const response = await this[this.execute]({ applyOrgid: this.id, ...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.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;
    },



    /** 分管领导、主要领导 */
    leaderList(form) {
      return getLeaderList(form);
    },
    dialogClose() {
      this.userList = []
    }
  }
}
</script>

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

.radius-image {
  border-radius: 40px;
}
</style>
