<template>
  <el-select
    v-model="inputValue"
    v-bind="$attrs"
    style="width: 100%"
    :placeholder="placeholder"
    :filterable="true"
    :remote="true"

    :remote-method="remoteMethod"
    :loading="loading">
    <el-option
      v-for="item in options"
      :key="item[props.key]"
      :label="item[props.label]"
      :value="item[props.value]">
      <span style="float:left;">{{ item[dropConfigKeys.leftKey] }}</span>
      <span style="float:right;">{{ item[dropConfigKeys.rightKey] }}</span>
    </el-option>
  </el-select>
</template>

<script>
import { CmsFormSelectRemoteMixin } from './CmsFormSelectRemoteMixin'

export default {
  name: "CmsFormSelectRemote",
  mixins: [ CmsFormSelectRemoteMixin ],
  computed: {
    inputValue: {
      get() {
        return this.value;
      },
      set(val) {
        console.log('------value-- >>>>', val);
        this.$emit("input", val);
      },
    },
  },
  methods: {
    // remoteMethod(queryString) {
    //   this.loading = true;
    //   // this.queryString = queryString;
    //   // this.inputValue = queryString;
    // },
    remoteMethod(query) {
      if (query !== '') {
        this.queryString = query;
        this.loading = true;
        setTimeout(() => {
          this.defaultLoadData();
        }, 200);
      } else {
        this.options = [];
      }
    },
    handleChange(value) {
      console.log('----handleChange:', value)
    },
    loadAll() {
      this.$message.success('111111111')
      this.defaultLoadData();
    },
    defaultLoadData() {
      console.log('----', this.filterFields);
      const queryParams = {};
      if (this.filterFields && this.filterFields.length > 0) {
        this.filterFields.forEach(field => {
          queryParams[field] = this.queryString;
        })
      }
      const params = Object.assign({}, queryParams, this.extraData || {});
      if (this.dataSource) {
        if (typeof this.dataSource === "function") {
          this.dataSource({ ...params }, { loading: false }).then(result => {
            const { code, rows, total, msg } = result
            this.loading = false;
            console.log(code, rows, total, msg);
            this.options = this.options.concat(rows);
          }).catch(() => {
            this.loading = false;
          })
        }
      }
      this.inputValue = this.queryString;
    }
  },
  data() {
    return {
      resultData: [],
      options: [],
      loading: false,
      queryString: undefined,
      states: ["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"]
    }
  },
  mounted() {
    this.list = this.states.map(item => {
      return { value: `value:${item}`, label: `label:${item}` };
    });
  },
}

</script>

<style scoped>

</style>