<template>
  <a-select
    show-search
    label-in-value
    :value="dealerName"
    :mode="mode"
    placeholder="请输入编码搜索"
    style="width: 100%"
    :filter-option="false"
    :not-found-content="fetching ? undefined : null"
    @search="fetchUser"
    @change="handleChange"
    allowClear
  >
    <a-spin v-if="fetching" slot="notFoundContent" size="small" />
    <a-select-option v-for="item in data" :key="item.productSn" :value="item.productSn">
      {{ item.code }}
    </a-select-option>
  </a-select>
</template>
<script>
import debounce from 'lodash/debounce'
import { productCodeQueryList } from '@/api/productUniversalCode'
export default {
  props: {
    mode: {
      type: String,
      default: 'default'
    },
    id: {
      type: String,
      default: ''
    }
  },
  data () {
    this.lastFetchId = 0
    this.fetchUser = debounce(this.fetchUser, 800)
    return {
      data: [],
      dealerName: undefined,
      fetching: false,
      lastData: []
    }
  },
  methods: {
    fetchUser (dealerName) {
      console.log('fetching user', dealerName)
      if (dealerName == '') return
      this.lastFetchId += 1
      const fetchId = this.lastFetchId
      if (this.dealerName) {
        this.lastData = JSON.parse(JSON.stringify(this.dealerName))
      }
      this.data = []
      this.fetching = true
      productCodeQueryList({ 'productCode': dealerName, pageNo: 1, pageSize: 20 }).then(res => {
        if (fetchId !== this.lastFetchId) {
          return
        }
        this.data = res.data && res.data.list ? res.data.list : []
        this.fetching = false
      })
    },
    getRow (cur) {
      const _this = this
      const ind = _this.data.findIndex(item => item.productSn == cur.key)
      cur.row = ind != -1 ? _this.data[ind] : undefined
      return cur
    },
    handleChange (value) {
      const _this = this
      if (this.mode == 'default') { //  单选
        if (value && value.key) {
          const ind = _this.data.findIndex(item => item.productSn == value.key)
          value.row = ind != -1 ? _this.data[ind] : undefined
        }
      } else if (this.mode == 'multiple') { //  多选
        // 新增
        if (this.lastData.length < value.length) {
          if (value.length <= 5) {
            const ret = this.getRow(value[value.length - 1])
            value = [...this.lastData, ret]
          } else {
            this.$message.info('最多选择5个通用编码')
            return false
          }
        } else {
          // 删除
          value.map(item => {
            const r = this.lastData.find(k => k.key == item.key)
            if (r) {
              item.row = r.row
            }
          })
        }
      }
      Object.assign(this, {
        dealerName: value,
        data: [],
        fetching: false
      })
      if (this.dealerName) {
        this.lastData = JSON.parse(JSON.stringify(this.dealerName))
      }
      this.$emit('change', value || { key: undefined }, this.id)
    },
    resetForm () {
      this.dealerName = undefined
    },
    setDufaultVal (itemSn) {
      this.fetchUser(itemSn)
      this.setData({ key: itemSn })
    },
    setData (value) {
      Object.assign(this, {
        dealerName: value,
        data: [],
        fetching: false
      })
    }
  }
}
</script>
