<template>
  <el-select
    v-model="userId"
    v-select-load-more="loadStaff"
    filterable
    :clearable="clearable"
    :placeholder="placeholder"
    default-first-option
    size="small"
    @change="handleSelect"
  >
    <el-option
      v-for="item in staffList"
      :key="item.userId"
      :label="item.nickName"
      :value="item.userId"
    >
<!--      <div>-->
<!--        <div class="inline-block item">-->
<!--          <span class="title">姓名:</span>-->
<!--          <span class="option">{{ item.teacherName}}</span>-->
<!--        </div>-->
<!--        <div class="inline-block item">-->
<!--          <span class="title">联系电话:</span>-->
<!--          <span class="option">{{ item.phonenumber }}</span>-->
<!--        </div>-->
<!--      </div>-->
    </el-option>
  </el-select>
</template>
<script>
import { teacherSelect } from '@/api/columns/teacher'
export default {
  props: {
    deptId: {
      type: String,
      default: undefined
    },
    clearable: {
      type: Boolean,
      default: false
    },
    teacher: {
      type: String,
      default: undefined
    },
    placeholder: {
      type: String,
      default: '选择员工'
    },
    value: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      userId: this.value,
      staffList: [],
      pageNum: 1,
      hasMoreData: false
    }
  },
  watch: {
    value: {
      handler(newValue, oldValue) {
        this.userId = newValue
      },
      immediate: true
    },
    deptId: {
      handler(newValue, oldValue) {
        if (newValue === oldValue && newValue === undefined) {
          return
        }
        this.loadStaff()
      },
      immediate: true
    }
  },
  created() {
    this.loadStaff()
  },
  methods: {
    loadStaff: function() {

      teacherSelect({
        deptId: this.deptId
      }).then(response => {
          if (response.code === 200) {
            this.staffList = response.data
          } else {
            this.msgError(response.msg)
          }
        })

    },
    handleSelect: function(val) {
      this.$emit('input', val)
      this.$emit('change', val)
    }
  }
}
</script>
<style ref="stylesheet/scss" lang="scss" scoped>
  .option{
    padding-right: 15px;
    color: #333;
    font-weight: normal;
  }
</style>
