var tmpl=`
 <div>
     <el-select style="width:200px" size="small" :value="value" @change="onchange"  v-model="sels" clearable
       :placeholder="placeHolder"
       :default-first-option="isFirstDefault"
       :filterable="isFilter"
       :multiple="isMulti"
       :remote="autoComplete"
       :reserve-keyword="autoComplete"
       :remote-method="remoteMethod"
       :disabled="isDisabled"
       :allow-create="allowcreatedata"
       :loading="loading">
       <template v-if="!isGrouped">
  <el-option
    v-for="item in dataSouce"
    :key="valueFieldM(item)"
    :label="labelFieldM(item)"
    :value="valueFieldM(item)"
  ></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:["refwhere2","parentcode","parentfield","level","levelfield","value","refMethod","dicKey","refModel","placeHolder","autoComplete","isGrouped","isFirstDefault","isFilter","isMulti","labelField","valueField", "isDisabled","allowcreate"],
   data:function(){
     return {
       dataSouce:[],
       loading:false,
       sels:this.value?this.value:[],
       allowcreatedata:this.allowcreate?true:false,
       refwhere:this.refwhere2?this.refwhere2:{},
     };
   },
   mounted:function(){

   },
   watch:{
     value:function(v){
        if(v && this.autoComplete){
            var k=this.valueField?this.valueField:"id";
            this.refwhere={};
            this.refwhere[k]=v;
            this.fetchData();
        }else{
            this.refwhere={};
        }
        if(v){
          this.sels=v;
        }else{
          this.sels=[];
        }
        
     },
     parentcode:function(v){
        this.fetchData();
     },
   },
   created:function(){
     if(!this.autoComplete){
        if(this.dicKey || this.refModel){
           this.fetchData();
        }
     }
   },
   computed:{

   },
   methods:{
     setrefwhere2(v){
       this.refwhere=v;
       this.fetchData();
     },
     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={};
         if(this.level && this.levelfield){
           
           query.levelinfo={
             level:this.level,
             levelfield:this.levelfield,
           };
         }
         if(this.parentcode && this.parentfield){
            query.parentinfo={
             parentcode:this.parentcode,
             parentfield:this.parentfield,
           };
         }
         query.fields=[this.labelField,this.valueField];
         query.likestr=slike;
         query.refwhere=this.refwhere?this.refwhere:{};
         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-select"
}`
