<template>
  <a-select
    v-model:value="tempValue"
    mode="multiple"
    allow-clear
    show-search
    :max-tag-count="1"
    @search="onSearch"
    @blur="onBlur"
  >
    <template v-for="(item, key, index) in $slots" :key="index" #[key]>
      <slot :name="key"></slot>
    </template>
  </a-select>
</template>

<script>
export default {
  props: {
    value: {
      type: [Array, String, Number],
      default: undefined,
    },
    mode: {
      type: String,
      default: '',
    },
    allowInputValue: {
      type: Boolean,
      default: true,
    },
    duChaTypes: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      searchText: '',
      tempValue: [],
    };
  },
  components: {},
  mounted() {},
  methods: {
    onSearch(val) {
      const text = val.trim();
      if (text) {
        this.searchText = text;
      }
    },
    onBlur() {
      if (this.allowInputValue && this.searchText) {
        this.tempValue.push(this.searchText);
      }
    },
  },
};
</script>

<style lang='less' scoped>
:deep(.ant-row) {
  width: 18%;
}
.data-screen {
  height: 500px;
  overflow: auto;
}
</style>
