<template>
  <div style="width:300px;" >
      <el-cascader
        :options="options"
        expand-trigger="hover"
        @active-item-change="handleItemChange"
        @change="handleChange"
        :props="props"
      style="width:530px;" ></el-cascader>
  </div>
</template>

<script>
import API from '@/api'
export default {
  name: 'area-select',
  data () {
    return {
        options:[],
        values:'',
        texts:'',
        props:{
            value: 'id',
            label:'name',
            children: 'cities'
        }
    }
  },
  created () {      
  },
  mounted(){
    let page = this; 
    page.getCNodes('根',[]);
  },
  methods: {
    getCNodes (parentid,currentIds) {
        // console.log('加载下级节点')
        let page = this; 
        let currentIdsSize = currentIds.length;
        // console.log(currentIdsSize)
        API.area.findChildren({
            tyear:2016,
            parentid:parentid
        }).then(function (res) {
            let cities = new Array();
            res.forEach(function(r){
                if(r.depth < 5){
                    cities.push({id:r.id,name:r.name,cities:[]});
                }else{
                    cities.push({id:r.id,name:r.name});
                }                
            });
            if(currentIdsSize === 0){
                page.options = cities;
            }else if(currentIdsSize === 1){
                page.options.forEach(function(r,index){
                    if(r.id === currentIds[0]){
                        page.options[index].cities = cities;
                    }
                });
            }else if(currentIdsSize === 2){
               page.options.forEach(function(r0,i0){
                    if(r0.id === currentIds[0]){
                        page.options[i0].cities.forEach(function(r1,i1){
                            if(r1.id === currentIds[1]){
                                page.options[i0].cities[i1].cities = cities;
                            }
                        });
                    }
               });
            }else if(currentIdsSize === 3){
               page.options.forEach(function(r0,i0){
                    if(r0.id === currentIds[0]){
                        page.options[i0].cities.forEach(function(r1,i1){
                            if(r1.id === currentIds[1]){
                                page.options[i0].cities[i1].cities.forEach(function(r2,i2){
                                    if(r2.id === currentIds[2]){
                                        page.options[i0].cities[i1].cities[i2].cities = cities;
                                    }
                                });
                            }
                        });
                    }
               });
            } else if(currentIdsSize === 4){
               page.options.forEach(function(r0,i0){
                    if(r0.id === currentIds[0]){
                        page.options[i0].cities.forEach(function(r1,i1){
                            if(r1.id === currentIds[1]){
                                page.options[i0].cities[i1].cities.forEach(function(r2,i2){
                                    if(r2.id === currentIds[2]){
                                        page.options[i0].cities[i1].cities[i2].cities.forEach(function(r3,i3){
                                            if(r3.id === currentIds[3]){
                                                page.options[i0].cities[i1].cities[i2].cities[i3].cities = cities;
                                            }
                                        });
                                    }
                                });
                            }
                        });
                    }
               });
            }            
        })
        .catch(function (error) {
            
        });  
    },
    handleItemChange(val){
      this.values = val;
      // console.log(val)
      let valSize = val.length;
      let page = this;
      if(valSize === 1){
        //第2级节点获取
        page.options.forEach(function(r,index){
            if(r.id === val[0]){
                page.getCNodes(r.id,val);
                return;
            }
        });
      }
      if(valSize === 2){
        //第3级节点获取
        page.options.forEach(function(r,index){
            if(r.id === val[0]){
                r.cities.forEach(function(r0,i0){
                    if(r0.id === val[1]){
                        page.getCNodes(r0.id,val);
                        return;
                    }
                });
            }
        });
      }
      if(valSize === 3){
        //第4级节点获取
        page.options.forEach(function(r0,i0){
            if(r0.id === val[0]){
                r0.cities.forEach(function(r1,i1){
                    if(r1.id === val[1]){
                        r1.cities.forEach(function(r2,i2){
                            if(r2.id === val[2]){
                                page.getCNodes(r2.id,val);
                                return;
                            }
                        }); 
                    }
                });
            }
        });
      }
      if(valSize === 4){
        //第5级节点获取
        page.options.forEach(function(r0,i0){
            if(r0.id === val[0]){
                r0.cities.forEach(function(r1,i1){
                    if(r1.id === val[1]){
                        r1.cities.forEach(function(r2,i2){
                            if(r2.id === val[2]){
                                r2.cities.forEach(function(r3,i3){
                                    if(r3.id === val[3]){
                                        page.getCNodes(r3.id,val);
                                        return;
                                    }
                                });
                            }
                        }); 
                    }
                });
            }
        });
      }
    },
    handleChange (v){
        let page = this;
        page.options.forEach(function(r0,i0){
            if(r0.id === v[0]){
                page.values = r0.id;
                page.texts = r0.name;
                r0.cities.forEach(function(r1,i1){
                    if(r1.id === v[1]){
                        page.values += ','+r1.id;
                        page.texts += ','+r1.name;
                        r1.cities.forEach(function(r2,i2){
                            if(r2.id === v[2]){
                                page.values += ','+r2.id;
                                page.texts += ','+r2.name;
                                r2.cities.forEach(function(r3,i3){
                                    if(r3.id === v[3]){
                                        page.values += ','+r3.id;
                                        page.texts += ','+r3.name;
                                        r3.cities.forEach(function(r4,i4){
                                            if(r4.id === v[4]){
                                                page.values += ','+r4.id;
                                                page.texts += ','+r4.name;
                                            }
                                        });
                                    }
                                });
                            }
                        });
                    }
                });
            }
        });
    }
  }
}
</script>