<template>
  <div>
    <el-select
      v-model="testerIds"
      @change="_selMultiUser"
      :filter-method="_queryChangeMethod"
      multiple
      size="small"
      filterable
      placeholder="请选择人员，可多选"
      style="width: 100%;">
      <el-option
        v-for="item in userList"
        :key="item.userId"
        :label="item.realname"
        :value="item.userId"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
/* （1）查询科室下的所有人，默认展示20条数据
    （2）根据科室（多个科室）选择科室下面的人（有参数 isGroupIds）
      用这个组件人员需要跟科室有关
  * */
export default {
  props: {
    isGroupIds: null // 是否显示某几个科室下的人员
  },
  data() {
    return {
      userList: [],
      testerIds: [],
      keyword: '',
      groupIds: []
    }
  },
  methods: {
    // 所有科室下的人员
    _open(data) {
      this.keyword = '' // 清空搜索字
      if (data) {
        this.testerIds = data
      } else {
        this.testerIds = []
      }
      this._page()
    },
    // 查询某几个科室下的人员(多个科室)
    _openUserByGroup(ids, testerIds) {
      this.groupIds = ids
      this.testerIds = testerIds || []
      this.keyword = '' // 清空搜索字
      this._pageByGroup()
    },
    _pageByGroup() {
      this.$store
        .dispatch('LmsUserGroup/getUserByGroupIds', this._searchParams())
        .then(() => {
          this.userList = this.$store.state.LmsUserGroup.userPage.records
        })
    },
    // 科室下的人员
    _page() {
      this.$store
        .dispatch('LmsMarshalManage/userPage', this._searchParams())
        .then(() => {
          this.userList = this.$store.state.LmsMarshalManage.userPage.records
        })
    },
    _searchParams() {
      const data = {
        page: 1,
        rows: 20
      }
      if (this.keyword) {
        data.realname = this.keyword
      }
      if (this.isGroupIds !== undefined) {
        data.groupIds = this.groupIds ? this.groupIds.join(',') : ''
      }
      // 这个查询条件是为了将某个人设置为第一个
      if (this.testerIds && this.testerIds.length > 0) {
        data.userId = this.testerIds[0]
      }
      return data
    },
    _queryChangeMethod(query) {
      this.keyword = query
      if (this.isGroupIds !== undefined) {
        this._pageByGroup()
      } else {
        this._page()
      }
    },
    _selMultiUser() {
      if (this.testerIds.length === 0) {
        this.keyword = ''
        if (this.isGroupIds !== undefined) {
          this._pageByGroup()
        } else {
          this._page()
        }
      }
      this.$emit('on-result-change', this.testerIds)
    }
  }
}
</script>
