<template>
  <div>
    <a-cascader style="width:100%"
      v-model="districtArr"
      :options="options"
      :loadData="loadData"
      placeholder="请选择省市区"
      @change="onChange"
      changeOnSelect
    />
    <span style="display:none">{{provinceName}}+{{cityName}}+{{districtName}}</span>
  </div>

</template>

<script>
    export default {
      name: "",
      props:{
        distric:{
          type:Array,
          default:[]
        }
      },
      data(){
        return{
          options:[],
          districtArr: [],
          provinceList:[],
          provinceName:\'\',
          cityName:\'\',
          districtName:\'\',
          streetName:\'\'
        }
      },
      methods:{
        getProvinceList(parentCode){
          this.$http(this.$url.省市区街道,{parent_code:parentCode.value}).then(data=>{
            this.options=[];
            data.data.list.forEach((province)=>{
              this.options.push({
                isLeaf:false,
                value:province.region_code,
                label:province.region_name,
                parent_code:province.parent_code,
              })
            });
            this.provinceList = this.options;
          }).catch(failer=>{

          })
        },
        getAdressList(parentCode){
          let _this = this;
          let i=0;
          getC();
          function getC(){
            _this.$http(_this.$url.省市区街道,{parent_code:parentCode[i]}).then(data=>{
              if(i==0){
                _this.options.forEach((item)=>{
                  if( item.value == parentCode[0]){
                    item.children =[];
                    _this.provinceName = item.label;
                    data.data.list.forEach((city)=>{
                      item.children.push({
                        value:city.region_code,
                        label:city.region_name,
                        isLeaf:false,
                      })
                    })
                  }
                });
                i++;
                setTimeout(function(){
                  getC();
                },100)
              }else if(i==1){
                _this.options.forEach((item)=>{
                  if(item.children){
                    item.children.forEach((city)=>{
                      if(city.value==parentCode[i]){
                        _this.cityName = city.label;
                        city.children =[];
                        data.data.list.forEach((district)=>{
                          city.children.push({
                            value:district.region_code,
                            label:district.region_name,
                            children:[],
                            isLeaf:false,
                          })
                        })
                      }
                    })
                  }
                })
                i++;
                setTimeout(function(){
                  getC();
                },100)
              }else if(i==2){
                _this.options.forEach((item)=>{
                  if(item.children){
                    item.children.forEach((city)=>{
                      if(city.children) {
                        city.children.forEach((district) => {
                          if (district.value == parentCode[2]) {
                            _this.districtName = district.label
                            district.children = [];
                            data.data.list.forEach((street) => {
                              district.children.push({
                                value: street.region_code,
                                label: street.region_name,
                              })
                            })
                          }
                        })
                      }
                    })
                  }
                });
              }
            }).catch(failer=>{
            })
          }
        },
        loadData(selectedOptions){
          const targetOption = selectedOptions[selectedOptions.length - 1];
          targetOption.loading = true;
          setTimeout(() => {
            targetOption.loading = false;
            if(selectedOptions.length==1){
              this.$http(this.$url.省市区街道,{parent_code:selectedOptions[0].value}).then(data=>{
                targetOption.children = [];
                data.data.list.forEach((item)=>{
                  targetOption.children.push({
                    value:item.region_code,
                    label:item.region_name,
                    parent_code:item.parent_code,
                    isLeaf: false,
                  })
                });
                this.options = [...this.options];
              }).catch(()=>{})
            }else if(selectedOptions.length==2){
              this.$http(this.$url.省市区街道,{parent_code:selectedOptions[1].value}).then(data=>{
                targetOption.children = [];
                data.data.list.forEach((item)=>{
                  targetOption.children.push({
                    value:item.region_code,
                    label:item.region_name,
                    parent_code:item.parent_code,
                    isLeaf: false,
                  })
                });
                this.options = [...this.options];
              }).catch(()=>{})
            }else if(selectedOptions.length==3){
              this.$http(this.$url.省市区街道,{parent_code:selectedOptions[2].value}).then(data=>{
                targetOption.children = [];
                data.data.list.forEach((item)=>{
                  targetOption.children.push({
                    value:item.region_code,
                    label:item.region_name,
                    parent_code:item.parent_code,
                  })
                });
                this.options = [...this.options];
              }).catch(()=>{})
            }

          }, 100);
        },
        onChange(){
          if(this.districtArr.length==4){
            this.$emit(\'region\',this.districtArr[3])
          }
        }
      },
      mounted() {
        this.getProvinceList({parent_code: \'\'});
      },
      create(){

      },
      watch: {
        distric(val){
          this.districtArr = val;
          if(this.districtArr.length){
            this.getAdressList(this.districtArr);
          }
        }
      }
    }
</script>

<style scoped>

</style>