<template>
  <a-select v-bind="bindProps" @change="onChange" @search="onSearch"/>
</template>

<script lang="ts">
import { propTypes } from '/@/utils/propTypes'
import { defineComponent, ref, watch, computed } from 'vue'

// 可以输入的下拉框
export default defineComponent({
  name: 'JSelectInput',
  props: {
    options: propTypes.array.def(() => []),
  },
  emits: ['change', 'update:value'],
  setup(props, { emit, attrs }) {
    // 内部 options 选项
    const options = ref<any[]>([])
    // 监听外部 options 变化，并覆盖内部 options
    watch(() => props.options, () => {
      options.value = [...props.options]
    }, { deep: true, immediate: true })
    // 合并 props 和 attrs
    const bindProps: any = computed(() => Object.assign({
      showSearch: true,
    }, props, attrs, {
      options: options.value,
    }))

    function onChange(...args: any[]) {
      deleteSearchAdd(args[0])
      emit('change', ...args)
      emit('update:value', args[0])
    }

    function onSearch(value) {
      // 是否找到了对应的项，找不到则添加这一项
      let foundIt = options.value.findIndex(option => {
        return option.value.toString() === value.toString()
      }) !== -1
      // !!value ：不添加空值
      if (!foundIt && !!value) {
        deleteSearchAdd(value)
        // searchAdd 是否是通过搜索添加的
        options.value.push({ value: value, searchAdd: true })
        //onChange(value,{ value })
      } else if (foundIt) {
        onChange(value)
      }
    }

    // 删除无用的因搜索（用户输入）而创建的项
    function deleteSearchAdd(value) {
      let indexes: any[] = []
      options.value.forEach((option, index) => {
        if (option.searchAdd) {
          if (option.value.toLocaleString() !== value.toLocaleString()) {
            indexes.push(index)
          }
        }
      })
      // 翻转删除数组中的项
      for (let index of indexes.reverse()) {
        options.value.splice(index, 1)
      }
    }

    return {
      bindProps,
      onChange,
      onSearch,
    }
  },
})
</script>

<style scoped>

</style>
