<template>
  <a-select
    :size="size"
    :value="bizUserSnVal"
    :placeholder="placeholder"
    style="width: 100%"
    :filter-option="false"
    :not-found-content="fetching ? undefined : null"
    :dropdownMatchSelectWidth="false"
    @change="handleChange"
    allowClear
    :disabled="disabled"
    notFoundContent="暂无数据"
  >
    <a-spin v-if="fetching" slot="notFoundContent" size="small" />
    <a-select-option v-for="item in customerData" :key="item.id" :value="item.bizUserSn">
      {{ item.userName }}
    </a-select-option>
  </a-select>
</template>
<script>
import { queryUnderlingKf } from '@/api/bizuser'
export default {
  props: {
    value: {
      type: [String, Array],
      defatut: ''
    },
    size: {
      type: String,
      default: 'default'
    },
    placeholder: {
      type: String,
      default: '请选择客服名称'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      customerData: [],
      bizUserSnVal: this.value,
      fetching: false
    }
  },
  mounted () {
    this.getListData()
  },
  watch: {
    value (newValue, oldValue) {
      this.bizUserSnVal = newValue
    }
  },
  methods: {
    getListData () {
      queryUnderlingKf({}).then(res => {
        this.customerData = res.data ? res.data : []
        this.$store.state.app.isShowCustomerSearch = res.data && res.data.length > 0
      })
    },
    handleChange (value) {
      this.bizUserSnVal = value
      this.$emit('change', value)
      this.$emit('input', value)
    },
    resetForm () {
      this.bizUserSnVal = undefined
    }
  }
}
</script>
