<template>
  <Select
    v-model="sels"
    style="width:150px"
    @on-change="onchange"
    clearable
    transfer
    :multiple="isMulti"
    :placeholder="placeHolder"
  >
    <Option v-for="item in transdatas" :value="item.value" :key="item.value">{{ item.label }}</Option>
  </Select>
</template>
<script>
import { refQuery } from "@/api/meta";
export default {
  name: "remoteselects",
  components: {},
  model: {
    prop: "value",
    event: "change"
  },
  props: ["labelField","valueField","value","refModel","placeHolder","isMulti"],
  data() {
    return {
      sels: this.value? this.value:[],
      datasource: []
    };
  },
  watch: {
    value(nv, ov) {
      this.sels = nv;
    }
  },
  computed:{
    transdatas(){
       if(this.labelField && this.valueField){
           let mrtn= this.datasource.map(item=>{
              return {
                value:item[this.valueField],
                label:item[this.labelField]
              }
          })
          return mrtn
       }else{
         return this.datasource
       }
    }
  },
  methods: {
    onchange(v) {
      console.log("=============", v);
      this.$emit("change", this.sels);
    },
    initDataSource(slike) {
      // this.datasource=[]
      let query = {};
      let p=this.refModel.split(".").join("/")
      let url = "/web/" + p + "Ctl/refQuery";
      query.fields = [this.labelField, this.valueField];
      query.likestr = slike;
      query.refwhere = this.refwhere ? this.refwhere : {};
      refQuery(url, query).then(r => {
        console.log(">>>>>>>>>>>>>>>>>>>>..==================")
        if(r.data){
          this.datasource=r.data;
        }
      });
    }
  },
  created() {
    this.initDataSource();
  },
  mounted() {}
};
</script>

<style>
</style>
