<template>
  <a-select
    :value="value"
    :placeholder="placeholder"
    :default-active-first-option="false"
    :show-arrow="true"
    :filter-option="false"
    :not-found-content="null"
    show-search
    allowClear
    @search="handleSearch"
    @popupScroll="handleScroll"
    @change="handleChange"
  >
    <a-select-option v-for="item in dictSearchData" :key="item.value">{{item.text}}</a-select-option>
  </a-select>
</template>

<script>

import {getAction} from "@/api/manage";

export default {
  name: 'JOnlineSearchSelect',
  props : {
    placeholder : {
      type : String,
      default : "",
      required : false
    },
    value : {
      type : String,
      required : false
    },
    sql : {
      type : String,
      default : "",
      required : false
    },
    dict : {
      type : Boolean,
      default : false,
      required : false
    }
  },
  data : function() {
    this.handleSearch = this.$Jdebounce(this.handleSearch, 800);
    return {
      selected : this.value ? this.value : [],
      dictSearchData : [],
      pageSize : 10
    };
  },
  watch : {
    value : function(obj) {
      this.selected = obj ? this.value : [];
    },
    sql : {
      immediate : true,
      handler : function() {
        this.dictSearchData = [];
        this.loadSearchData();
      }
    }
  },
  methods : {
    loadSearchData : function(keyword) {
      let self = this;
      let param = {};
      let url = "";
      if (this.dict) {
        param = {
          pageSize : this.pageSize,
          keyword : keyword || ""
        };
        url = "/sys/dict/loadDict/".concat(this.sql);
      } else {
        param = {
          sql : this.sql,
          keyword : keyword
        };
        url = "/online/cgreport/api/getReportDictList";
      }
      getAction(url, param).then(function(data) {
        if (data.success) {
          if (data.result && data.result.length > 0) {
            self.dictSearchData = data.result;
          } else {
            self.dictSearchData = [];
          }
        } else {
          self.$message.warning(data.message);
        }
      });
    },
    handleScroll : function(event) {
    },
    handleSearch : function(obj) {
      this.loadSearchData(obj);
    },
    handleChange : function(obj) {
      this.$emit("change", obj);
      if (!(obj && obj !== "")) {
        this.dictSearchData = [];
        this.loadSearchData();
      }
    }
  },
  model : {
    prop : "value",
    event : "change"
  }
}
</script>

<style scoped>

</style>