<template>
  <el-select
    :value="value"
    filterable
    :clearable="clearable"
    remote
    :remote-method="handleSelectRemote"
    :loading="selectLoading"
    size="small"
    class="filter-item"
    @input="handleInput"
    @change="handleChange"
  >
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</template>
<script>
import { getOptions } from '@/api/options'
export default {
  name: 'TagSelectSimple',
  props: {
    value: {
      type: String,
      require: true,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      options: [],
      selectLoading: false,
    }
  },
  methods: {
    handleInput(value) {
      this.$emit('input', value)
    },
    handleSelectRemote(value) {
      if (value && value.length > 2) {
        this.selectLoading = true
        getOptions('DataCommTag', { tagOrDescription: value })
          .then((res) => {
            this.options = res.data.content
            this.selectLoading = false
          })
          .catch((err) => {
            this.options = []
            this.selectLoading = false
          })
      } else {
        this.options = []
        this.selectLoading = false
      }
    },
    handleChange(value) {
      this.$emit('change', this.options.find(a => a.value == value))
    }
  },
}
</script>
  
  