<template>
  <el-select
    ref="userSelect"
    v-model="value"
    :remote-method="querySearch"
    filterable
    default-first-option
    remote
    placeholder="请输入用户信息搜索"
    @change="change"
  >
    <el-option v-for="item in options" :key="item.id" :value="item" :label="item.nickName" />
  </el-select>
</template>

<script>

import { getUserList } from '@/api/system/user'

export default {
  name: 'UserSelect',
  props: {
    search: {}
  },
  data() {
    return {
      value: this.search,
      options: []
    }
  },
  methods: {
    querySearch(query) {
      if (query !== '') {
        const params = {
          blurry: query
        }
        getUserList(params).then(res => {
          this.options = res
        })
      } else {
        this.options = []
      }
    },
    change(val) {
      this.$emit('input', val.id)
      this.$emit('userInfo', val)
    }

  }
}
</script>

<style lang="scss" scoped>
</style>
