var tmpl=`
 <div>
     <el-select @focus="onfocus" ref="elselect"  style="width:100%" allow-create="true" :value="value" @change="onchange"   v-model="sels" :clearable="false"
       :placeholder="placeHolder"
       :default-first-option="isFirstDefault"
       :filterable="isFilter"
       autocomplete="off"
       :multiple="isMulti"
       :remote="autoComplete"
       :reserve-keyword="autoComplete"
       :remote-method="remoteMethod"
       automatic-dropdown="false"
       :loading="loading">
       <template v-if="!isGrouped">
           <el-option
            v-for="item in dataSouce"
            :key="valueFieldM(item)"
            :label="labelFieldM(item)"
            :value="valueFieldM(item)"
            :disabled="item.isDisabled">
           </el-option>
       </template>
       <template v-else>
           <el-option-group
             v-for="group in dataSouce"
             :key="group.title"
             :label="group.title">
             <el-option
               v-for="item in group.options"
               :key="valueFieldM(item)"
               :label="labelFieldM(item)"
               :value="valueFieldM(item)">
             </el-option>
           </el-option-group>
       </template>
     </el-select>
 </div>
`
module.exports=
`{
   template:'${tmpl}',
   model:{
    prop: 'value',
    event: 'change'
   },
   props:["value","refMethod","dicKey","refModel","placeHolder","autoComplete","isGrouped","isFirstDefault","isFilter","isMulti","labelField","valueField"],
   data:function(){
     return {
       dataSouce:[],
       loading:false,
       sels:this.value,
     };
   },
   mounted:function(){
     $(".el-input__suffix-inner").css("display","block");
     $(".el-input__suffix-inner").css("left","0");
     $(".el-input__suffix-inner").css("top","0");
     $(".el-input__suffix-inner").css("width","300px");
     $(".el-input__suffix-inner").css("height","40px");
     $(".el-input__suffix-inner").css("background-color","red");
     $(".el-input__suffix-inner").css("background","transparent");
     $(".el-input__suffix-inner").click(()=>{
        this.$refs.elselect.focus();
     });
   },
   watch:{
     value:function(v){
        this.sels=v;
     }
   },
   created:function(){
     if(!this.autoComplete){
         this.fetchData();
     }
   },
   computed:{

   },
   methods:{
     onfocus:function(){

     },
     labelFieldM:function(item){
       return item[this.labelField];
     },
     valueFieldM:function(item){
       return item[this.valueField];
     },
     buildQuery:function(){
       var qc={};
       qc.selects=[this.labelField,this.valueField];
       return qc;
     },
     fetchData:function(slike){
       if(this.dicKey){
         this.$root.getReq("/web/metaCtl/getDicConfig",{"dicKey":this.dicKey}).then(cfg=>{
            console.log(JSON.stringify(cfg.data));
            Object.keys(cfg.data).forEach(key=>{
               this.dataSouce.push({"label":cfg.data[key],"value":key});
            });
         });
         return;
       }else{
         var query={};
         query.fields=[this.labelField,this.valueField];
         query.likestr=slike;
         var method="refQuery";
         if(this.refMethod){
           method=this.refMethod;
         }
         var url="/web/"+this.refModel+"Ctl/"+method;
         this.loading=true;
         this.$root.postReq(url,query).then(d=>{
             this.dataSouce=d.data;
             this.loading=false;
         });
       }
     },
     onchange:function(curval){
        this.$emit("change",curval);
     },
     remoteMethod(query) {
       if(query !== ''){
         this.fetchData(query);
       } else {
         this.options4 = [];
       }
    },
    oninput:function(e){
      console.log(e);
      this.$emit("input",e);
    }
   },
   vname:"gsb-select2"
}`
