<template>
  <div class="xd-select-remote">
    <el-select remote 
      class="_select_list"
      filterable
      clearable
      :placeholder="placeholder"
      :loading="loading"
      :remote-method="remoteMethod"
      :value="value"
      collapse-tags
      :multiple="multiple"
      @input="handlerInput">
      <el-option
        v-for="item in dataList"
        :key="item.id"
        :label="item[label_key]"
        :value="item[value_key]">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data(){
    return {
      loading: false,
      dataList: []
    }
  },
  props: {
    label_key: {
      type: String,
      default: 'label'
    },
    value_key: {
      type: String,
      default: 'value'
    },
    getDataList: Function,
    defaultList: Array,
    value: [String, Number, Array],
    placeholder: String,
    multiple: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    defaultList:{
      handler(n){
        console.log("watch select remote data", n);
        this.dataList = n;
      },
      immediate: true
    }
  },
  methods: {
    async remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        let list = await this.getDataList(query);
        this.loading = false;
        this.dataList = list;
      } else {
        this.options = [];
      }
    },
    handlerInput(str){
      console.log('handler input', str);
      this.$emit("input", str);
    }
  }
}
</script>

<style lang="scss" scoped>
.xd-select-remote{
  width: 100%;
  ._select_list{
    width: 100%;
  }
}
</style>