<template>
  <div v-if="pluginSlot">
    <el-tooltip
      v-test-id="'tooltip'"
      :disabled="!pluginSlotDisabled"
      :content="disabledMessage"
      placement="top">
      <div :class="{'u-mb2 el-form-item--rg': true, 'u-inline-block': pluginSlotDisabled}">
        <el-autocomplete
          v-test-id="'autocomplete'"
          v-for="(input, index) in inputs"
          v-model="inputValues[index]"
          :key="index"
          :disabled="pluginSlotDisabled"
          :fetch-suggestions="querySearch"
          :placeholder="input.placeholder"
          :prefix-icon="input.prefixIcon"
          :suffix-icon="input.suffixIcon"
          :trigger-on-focus="!!input.triggerOnFocus"
          class="u-block"
          @select="handleSelect"/>
      </div>
    </el-tooltip>
  </div>
</template>

<script>
import { PluginSlotMixin } from './mixins.js'

export default {
  name: 'AutoCompleteInput',
  mixins: [PluginSlotMixin],
  data () {
    return {
      inputs: [],
      inputValues: []
    }
  },
  methods: {
    getSlotExposedMethods () {
      return {}
    },
    initializeSlot (options) {
      this.inputs = options.inputs
      this.inputValues = Array(10).join(',').split(',')
      this.handleResponseName = options.handleResponse
      this.handleErrorName = options.handleError
    },
    querySearch (queryString, cb) {
      this.pluginIframeConnection.promise.then(async iframe => {
        const result = await iframe.querySearch(queryString, this.context)
        cb(result)
      })
    },
    handleSelect (item) {
      this.pluginIframeConnection.promise.then(iframe => {
        iframe.handleSelect(item, this.context)
      })
    }
  }
}
</script>
