<template>
  <a-select
    show-search
    label-in-value
    :size="size"
    :value="dealerName"
    mode="combobox"
    placeholder="请输入客户名称搜索"
    style="width: 100%"
    :filter-option="false"
    :not-found-content="fetching ? undefined : null"
    :dropdownMatchSelectWidth="false"
    :defaultActiveFirstOption="false"
    @search="fetchUser"
    @change="handleChange"
    allowClear
  >
    <a-spin v-if="fetching" slot="notFoundContent" size="small" />
    <a-select-option v-for="item in data" :key="item.customerSn" :value="item.customerName" :disabled="(isValidateEnabled ? item.enabledFlag=='0' : false) || (dealerDisabled?item.dealerFlag==1:false)">
      {{ item.customerName }}
      <span v-if="isValidateEnabled && item.enabledFlag=='0'">(已禁用)</span>
    </a-select-option>
  </a-select>
</template>
<script>
import debounce from 'lodash/debounce'
import { custList } from '@/api/customer'
export default {
  props: {
    isValidateEnabled: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'default'
    },
    itemSn: {
      type: String || Number,
      default: undefined
    },
    notSn: {
      type: String || Number,
      default: ''
    },
    isEnabled: { // 是否只查启用状态
      type: Boolean,
      default: false
    },
    mainFlag: {
      type: Boolean,
      default: true
    },
    satelliteFlag: {
      type: Boolean,
      default: false
    },
    dealerDisabled: {
      type: Boolean,
      default: false
    },
    dealerFlag: { // 0不含下级，1 只是下级，all是全部
      type: String,
      default: 'all'
    }
  },
  data () {
    this.lastFetchId = 0
    this.fetchUser = debounce(this.fetchUser, 800)
    return {
      data: [],
      dealerName: undefined,
      fetching: false
    }
  },
  methods: {
    fetchUser (dealerName) {
      if (dealerName == '') return
      this.lastFetchId += 1
      const fetchId = this.lastFetchId
      this.data = []
      this.fetching = true
      const params = { pageNo: 1, pageSize: 20, mainFlag: this.mainFlag ? 1 : 0, dealerFlag: this.dealerFlag == 'all' ? undefined : this.dealerFlag }
      if (this.satelliteFlag) {
        params.satelliteFlag = 1
      }
      if (this.itemSn) {
        params.customerSn = this.itemSn
      } else {
        params.queryWord = dealerName.trim()
      }
      if (this.isEnabled) {
        params.enabledFlag = 1
      }
      custList(params).then(res => {
        if (fetchId !== this.lastFetchId) {
          return
        }
        this.data = res.data && res.data.list ? res.data.list : []
        this.data = this.data.filter(item => item.customerSn != this.notSn)
        this.fetching = false
      })
    },
    handleChange (value) {
      if (value && value.key) {
        value.key = value.key.trim()
        const ind = this.data.findIndex(item => item.customerName == value.key)
        value.row = ind != -1 ? this.data[ind] : undefined
      }

      Object.assign(this, {
        dealerName: value,
        data: [],
        fetching: false
      })
      this.$emit('input', value && value.key || undefined)
      this.$emit('change', value && value.key || undefined, value && value.row || undefined)
    },
    resetForm () {
      this.dealerName = undefined
      this.setData(undefined)
    },
    setData (value) {
      Object.assign(this, {
        dealerName: value,
        data: [],
        fetching: false
      })
    }
  },
  mounted () {
    if (this.itemSn) {
      this.fetchUser(this.itemSn)
      this.setData({ key: this.itemSn })
    }
  }
}
</script>
