var tmpl=`
 <el-row style="width:400px">
   <el-col :span="8">
       <gsb-select key="one" refModel="regionarea" v-model="onevalue"  level="1" :levelfield="levelfield"   @change="ononechange" :labelField="labelField" :valueField="valueField"></gsb-select>
    </el-col>
   <el-col :span="8">
       <gsb-select key="two" v-if="level==2 || level==3"  autoComplete="true"  isFilter  refModel="regionarea" v-model="twovalue"  :parentcode="parentcode1" :parentfield="parentfield"  level="2" :levelfield="levelfield"   @change="ontwochange" :labelField="labelField" :valueField="valueField"></gsb-select>
   </el-col>
   <el-col :span="8"  v-if="level==3">
       <gsb-select key="three" autoComplete="true"  isFilter refModel="regionarea" v-model="threevalue" :parentcode="parentcode2" :parentfield="parentfield"  level="3" :levelfield="levelfield"   @change="onthreechange" :labelField="labelField" :valueField="valueField"></gsb-select>
   </el-col>
 </el-row>
`
  
module.exports=
`{
   template:'${tmpl}',
   model:{
    prop: 'value',
    event: 'change'
   },
   props:["value","refModel","labelField","valueField","levelfield","parentfield","level"],
   data:function(){
     return {
       sels:this.value,
       onevalue:"",
       twovalue:"",
       threevalue:"",
       parentcode1:null,
       parentcode2:null,
     };
   },
   mounted:function(){
     /*检查sels的求值*/
     console.log(this.sels, "--------------------this.sels");
     if(this.sels){
         var selcodes=this.sels.split("_");
         if(selcodes.length>=0){
             this.onevalue=selcodes[0];
             this.parentcode1=this.onevalue;
             this.$nextTick(()=>{
                if(selcodes.length>=1){
                    this.twovalue=selcodes[1];
                    if(selcodes.length==3){
                         this.parentcode2= this.twovalue;
                         this.$nextTick(()=>{
                             this.threevalue=selcodes[2];
                         });
                    }
                    
                }
             });
         }
     }
   },
   watch:{
     value:function(v){
       console.log(v, "--------------------- watch -------------- ");
        this.sels=v;

        this.onevalue = "";
        this.twovalue = "";
        this.threevalue = "";
        this.parentcode1 = null;
        this.parentcode2 = null;

        if(this.sels){
          var selcodes=this.sels.split("_");
          if(selcodes.length>=0){
            this.onevalue=selcodes[0];
            this.parentcode1=this.onevalue;

            this.$nextTick(()=>{
              if(selcodes.length>=1 && selcodes[1]){
                this.twovalue = selcodes[1];
                this.parentcode2= this.twovalue;

                if(selcodes.length > 2 && selcodes[2]){
                  this.$nextTick(()=>{
                      this.threevalue=selcodes[2];
                  });
                }
              }
            });
          }
        }
     },
   },
   created:function(){
     
   },
   computed:{
       
   },
   methods:{
     ononechange:function(curval){
        this.twovalue="";
        this.threevalue="";
        this.parentcode1=curval;
        this.$emit("change",this.buildAreaCode());
     },
     ontwochange:function(curval){
         this.threevalue="";
        this.parentcode2=curval;
        this.$emit("change",this.buildAreaCode());
     },
     onthreechange:function(curval){
        this.$emit("change",this.buildAreaCode());
     },
     buildAreaCode(){
         return this.onevalue+"_"+this.twovalue+"_"+this.threevalue;
     }
   },
   vname:"gsb-cascadeselect"
}`

