<template>
  <el-form-item :label=relevant.label :prop=relevant.professor>
    <el-select v-model='input' filterable remote reserve-keyword :placeholder=relevant.placeholder :remote-method="remoteMethod"
      :loading="loading" :style="{ width: relevant.width }" @change='change(input)'>
      <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
  </el-form-item>
</template>

<script>
  export default {
    props: ['relevant'],
    data() {
      return {
        input: '',
        options4: [],
        value9: [],
        list: [],
        loading: false,
        states: ['Alabama', 'Alaska', 'Arizona',
          'Arkansas']
      }
    },
    mounted() {
      console.log(this.relevant)
      this.list = this.states.map(item => {
        return { value: item, label: item }
      })
    },
    methods: {
      change(value) {
        this.$emit(this.relevant.fun, value)
      },
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true
          setTimeout(() => {
            this.loading = false
            this.options4 = this.list.filter(item => {
              return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) > -1
            })
          }, 200)
        } else {
          this.options4 = []
        }
      }
    }
  }
</script>
