<template>
  <div>
    <el-select
      v-model="groupIds"
      @change="_selMultiUser"
      multiple
      size="small"
      style="width:100%"
      placeholder="请选择检测科室，可多选">
      <el-option v-for="item in groupData" :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select>
  </div>
</template>

<script>
/* 选择科室(或叫用户编组)，默认展示20条数据（多选） */
export default {
  props: {
    isGroupName: null // 是否显示名称
  },
  data() {
    return {
      groupData: [],
      groupIds: []
    }
  },
  mounted() {
    // this._page()
  },
  methods: {
    _open(groupIds) {
      if (groupIds) {
        this.groupIds = groupIds
      } else {
        this.groupIds = []
      }
    },
    // 科室下的人员
    _page() {
      this.$store.dispatch('LmsUserGroup/list').then(() => {
        this.groupData = this.$store.state.LmsUserGroup.list
      })
    },
    _selMultiUser() {
      if (this.isGroupName !== undefined) {
        // isGroupName 有值，需要显示name
        const ids = this.groupIds
        const groupNames = []
        for (let i = 0; i < ids.length; i++) {
          groupNames.push(
            this.groupData.find(item => {
              return item.id === ids[i]
            })
          )
        }
        this.$emit('on-result-change', groupNames)
      } else {
        this.$emit('on-result-change', this.groupIds)
      }
    }
  }
}
</script>
