<template>
  <div>
    <!-- Select -->
    <Select
      v-if="info.form.type==='Select'"
      v-model="info.defaultValue"
      :clearable="info.form.clearable"
      :disabled="info.form.disabled||!info.isNew"
      :filterable="info.form.filterable"
      :multiple="info.form.multiple"
      :size="size"
      :placeholder="info.form.placeholder">
      <Option
        :value="item.value"
        v-for="item in info.form.options.staticList"
        :key="item.id">
        {{item.label}}
      </Option>
    </Select>
    <!-- 远程搜索 -->
     <Select
      v-else
      v-model="info.defaultValue"
      :clearable="info.form.clearable"
      :disabled="info.form.disabled||!info.isNew"
      filterable
      :remote-method="remoteMethod"
      :loading="loading"
      :multiple="info.form.multiple"
      :size="size"
      :placeholder="info.form.placeholder">
      <Option
        :value="item.label"
        v-for="item in options"
        :key="item.id">
        {{item.value}}
      </Option>
    </Select>
   <span v-if="info.form.type==='SelectRemote'" class="tips">无法接入远程数据，此数据为模拟数据(美国城市)</span>
  </div>
</template>
<script>
import { baseComponentMixins } from '../mixins'
export default {
  name: 'BaseSelect',
  mixins: [ baseComponentMixins ],
  data() {
    return {
      options: [],
      loading: false,
      list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming'],
    }
  },
  watch: {
    'info.form.multiple'(v) {
      if (v) {
        this.info.defaultValue = []
      } else {
        this.info.defaultValue = null
      }
    },
  },
  methods: {
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          const list = this.list.map(item => {
            return {
              value: item,
              label: item,
            }
          })
          this.options = list.filter(item =>
            item.label.toLowerCase().indexOf(query.toLowerCase()) > -1)
        }, 200)
      } else {
        this.options = []
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.tips{
  color:#999;
  font-size: 10px;
}
</style>