<template>
  <div class="demo-auto-complete-remote">
    <ui-auto-complete
      :value="value"
      :support-value-empty-string="false"
      :remote-method="remoteMethod"
      @change="changeHandler">
      <div
        slot="option"
        slot-scope="props">
        {{ props.label }}
      </div>
    </ui-auto-complete>
  </div>
</template>
<script>
import { AutoComplete } from "amumu-ui"

const DATA = [
  {
    value: "1",
    label: "FIRST",
  },
  {
    value: "2",
    label: "SECOND",
  },
  {
    value: "3",
    label: "THIRD",
  },
  {
    value: "4",
    label: "FOURTH",
  },
  {
    value: "5",
    label: "FIFTH",
  },
  {
    value: "6",
    label: "SIXTH",
  },
]

export default {
  components: {
    "ui-auto-complete": AutoComplete,
  },
  data() {
    return {
      data: [],
      value: "",
      loading: false,
    }
  },
  methods: {
    remoteMethod(val) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve(
            DATA.map(item => ({
              value: item.value + val,
              label: item.label + val,
            }))
          )
        }, 2000)
      })
    },
    changeHandler(event, value, option) {
      this.value = option.value
    },
  },
}
</script>
