<template>
  <div class="regionChoice" v-loading="loading">
    <div class="item">
        <div class="item_b" v-for="(item,index) in regionList" :key="index">
          <el-checkbox :indeterminate="item.indeterminate" v-model="item.ischeckAll" @change="handleCheckAllChange(index,item.ID,$event)" > </el-checkbox>
          <span @click="showcity(index,item.ID)">{{item.Name}}</span>
        </div>
    </div>

    <div class="item">
      <div class="item_b" v-for="(item,index) in cityList " :key="index">
        <el-checkbox :indeterminate="item.indeterminate" v-model="item.ischeckAll" @change="handleCityAllChange(index,item.ID,$event)" > </el-checkbox>
        <span @click="showarea(index,item.ID)">{{item.Name}}</span>
      </div>
    </div>

    <div class="item">
      <div class="item_b" v-for="(item,index) in areaList" :key="index" v-if="areaList[0].Name.indexOf('街道')==-1">
        <el-checkbox  v-model="item.ischeckAll" @change="handleareaAllChange(index,item.ID,$event)" ></el-checkbox>
        <span>{{item.Name}}</span>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "regionChoice",
      props: {
        List: Array,
        required: true
      },
      data(){
          return{
            regionList:[],
            msg:{ Id:2,},
            cityID:0,
            areaID:0,
            list:[],
            provinceindex:0,
            cityindex:0,
            areaindex:0,

            cityList:[],
            areaList:[],
            loading:false,
            getlist:[],
          }
      },
      methods:{
        getprovince(){
          let getlist = this.getlist
          this.apipost("/api/Destination/GetChildList",this.msg , res => {
            if (res.data.resultCode == 1) {
              let data = res.data.data;
              for(let i=0;i<data.length;i++){
                data[i].ischeckAll=false;
                data[i].indeterminate=false;
                for(let j=0;j<getlist.length;j++){
                  if(getlist[j].GrandpaID==data[i].ID || getlist[j].ParentID==data[i].ID){ //如果有着2个参数再 他的子级没选择完全
                      data[i].indeterminate=true;
                      this.citylist(data[i].ID,i)
                  }
                    if(getlist[j].RegionId==data[i].ID){
                      data[i].ischeckAll=true;
                      data[i].indeterminate=false;
                      this.getCitylist(true)
                    }
                }
              }
              this.regionList = data;
              this.cityID = data[this.provinceindex].ID
              this.getCitylist()
            } else {
              this.Info(res.data.message);
            }
          })
        },
        getCitylist(type=false,type2=true){
          let getlist =this.getlist
          this.apipost("/api/Destination/GetChildList",{'Id':this.cityID} , res => {
            if (res.data.resultCode == 1) {
              let data = res.data.data;
              this.areaID = data[this.cityindex].ID
              for(let i=0;i<data.length;i++){
                if(type2==true){
                  if(getlist.length>0){
                    for(let j=0;j<getlist.length;j++){
                      if(type==true){
                        data[i].ischeckAll=true;
                        data[i].indeterminate=false;
                      }else {

                        if(getlist[j].RegionId==data[i].ID || getlist[j].RegionId==this.cityID){
                          data[i].ischeckAll=true;
                          data[i].indeterminate=false;
                        }else if(getlist[j].ParentID==data[i].ID){
                          data[i].ischeckAll=false;
                          data[i].indeterminate=true;
                        }else if(data[i].hasOwnProperty('ischeckAll')==false && data[i].hasOwnProperty('indeterminate')==false){
                          data[i].ischeckAll=false;
                          data[i].indeterminate=false;
                        }

                      }
                    }
                  }else {
                    if(type==true){
                      data[i].ischeckAll=true;
                      data[i].indeterminate=false;
                    }else {
                      data[i].ischeckAll=false;
                      data[i].indeterminate=false;
                    }
                  }
                }else {
                  data[i].ischeckAll=false;
                  data[i].indeterminate=false;
                }



              }
              let regionList = this.regionList
              for(let i=0;i<regionList.length;i++){
                if(regionList[i].ID== this.cityID){
                  regionList[i].cityList = data;
                }
              }
              this.cityList = regionList[this.provinceindex].cityList
              this.getareaIDlist(type)
            } else {
              this.Info(res.data.message);
            }
          })
        },
        getareaIDlist(type=false,type2=true){
          let getlist =this.getlist
          this.apipost("/api/Destination/GetChildList",{'Id':this.areaID} , res => {
            this.loading= false
            if (res.data.resultCode == 1) {
              let data = res.data.data;
              for(let i=0;i<data.length;i++){
                if(type2==true){
                  if(getlist.length>0){
                    for(let j=0;j<getlist.length;j++){
                      if(type==true){
                        data[i].ischeckAll=true;
                      }else {

                        if(getlist[j].RegionId==this.cityID || getlist[j].RegionId==data[i].ID || getlist[j].RegionId == this.areaID){
                          data[i].ischeckAll=true;
                        }else if(data[i].hasOwnProperty('ischeckAll')==false ){
                          data[i].ischeckAll=false;

                        }
                      }
                    }
                  }else {
                    if(type==true){
                      data[i].ischeckAll=true;
                    }else {
                      data[i].ischeckAll=false;

                    }
                  }
                }else {
                  data[i].ischeckAll=false;

                }

              }
              let regionList = this.regionList;
              for(let i=0;i<regionList.length;i++){
                if(regionList[i].ID== this.cityID){
                  let cityList = regionList[i].cityList;
                  for(let i=0;i<cityList.length;i++){
                    if(cityList[i].ID== this.areaID){
                      cityList[i].areaList = data;
                    }
                  }
                }
              }
              this.areaList = data
            } else {
              this.Info(res.data.message);
            }
          })
        },
        handleCheckAllChange(index, id, e){
          let regionList = this.regionList;
          this.provinceindex = index;
          this.cityID = id;
          if(regionList[index].indeterminate==true){
            regionList[index].indeterminate=false;
            regionList[index].ischeckAll=true;
          }

          if(e==false){

            if(regionList[index].hasOwnProperty('cityList')==false) {
              this.getCitylist(false,false)
            }else {
              let cityList = regionList[index].cityList;

              for(let i=0;i<cityList.length;i++){
                cityList[i].ischeckAll=false
              }
              this.cityList = cityList
              let areaList = this.cityList[this.cityindex].areaList
              for(let i=0;i<areaList.length;i++){
                areaList[i].ischeckAll=false
              }
              this.areaList = areaList
            }
          }else {
            if(regionList[index].hasOwnProperty('cityList')==false) {
              this.getCitylist(true)
            }else {
              let cityList = regionList[index].cityList;
              for(let i=0;i<cityList.length;i++){
                cityList[i].ischeckAll=true
              }
              this.cityList = cityList

              let areaList = this.cityList[this.cityindex].areaList
              for(let i=0;i<areaList.length;i++){
                areaList[i].ischeckAll=true
              }
              this.areaList = areaList
            }

          }


          this.toParent()
        },
        showcity(index, id){
          let regionList = this.regionList;
          this.provinceindex = index;
          this.cityID = id;
          if(regionList[index].hasOwnProperty('cityList')==false){
            this.getCitylist()
          }else {
            this.cityList = regionList[index].cityList;
            this.areaList = this.cityList[0].areaList;
          }
        },

        handleCityAllChange(index, id, e){
          let regionList = this.regionList;
          this.cityindex = index;
          this.areaID = id;

            //取消自己的勾的时候父级的勾改变
          let areaList = regionList[this.provinceindex].cityList[index].areaList;
          if(e==false){
            if(regionList[this.provinceindex].cityList[index].hasOwnProperty('areaList')==false){
              this.getareaIDlist(false,false)
            }else {
              this.areaList = regionList[this.provinceindex].cityList[index].areaList;
            }
            regionList[this.provinceindex].indeterminate=true;
            regionList[this.provinceindex].ischeckAll=false;
            if(areaList!=undefined){
              for(let i=0;i<areaList.length;i++){
                areaList[i].ischeckAll=false;
              }
              regionList[this.provinceindex].cityList[index].indeterminate=false
            }

            let all=true;
            let cityList =  this.regionList[this.provinceindex].cityList;
            if(cityList!=undefined){
              for(let i=0;i<cityList.length;i++){
                if(cityList[i].ischeckAll==true){
                  all=false
                }
              }
            }

            if(all==true){
              this.regionList[this.provinceindex].indeterminate=false
              this.regionList[this.provinceindex].ischeckAll=false

            }
            if(areaList!=undefined){
              for(let i=0;i<areaList.length;i++){
                areaList[i].ischeckAll=false
              }
            }
          }else {

            if(regionList[this.provinceindex].cityList[index].hasOwnProperty('areaList')==false){
              this.getareaIDlist(true)
            }else {
              this.areaList = regionList[this.provinceindex].cityList[index].areaList;

            }
            regionList[this.provinceindex].indeterminate=true;
            regionList[this.provinceindex].ischeckAll=false;


            let all=true;
            let cityList =  this.regionList[this.provinceindex].cityList;
            if(cityList!=undefined){
              for(let i=0;i<cityList.length;i++){
                if(cityList[i].ischeckAll==false){
                  all=false
                }
              }
            }

            if(all==true){
              this.regionList[this.provinceindex].indeterminate=false
              this.regionList[this.provinceindex].ischeckAll=true

            }
            if(areaList!=undefined){
              for(let i=0;i<areaList.length;i++){
                areaList[i].ischeckAll=true
              }
            }

          }
          this.toParent()

        },
        showarea(index, id){
          let regionList = this.regionList;
          this.cityindex = index;
          this.areaID = id;
          if(regionList[this.provinceindex].cityList[index].hasOwnProperty('areaList')==false){//没有子级的时候加载
            if(regionList[this.provinceindex].cityList[index].ischeckAll==true){
              this.getareaIDlist(true)
            }else {
              this.getareaIDlist()

            }
          }else {
            this.areaList = regionList[this.provinceindex].cityList[index].areaList;

          }
        },
        handleareaAllChange(index, id, e){
          let regionList = this.regionList;
          this.areaindex = index;
          let areaList= regionList[this.provinceindex].cityList[this.cityindex].areaList;
          let cityList= regionList[this.provinceindex].cityList;
          if(e==false){
            regionList[this.provinceindex].indeterminate=true
            regionList[this.provinceindex].cityList[this.cityindex].indeterminate=true

            let areaAll=true
            for(let i=0;i<areaList.length;i++){
              if(areaList[i].ischeckAll==true){
                areaAll=false
              }
            }
            if(areaAll==true){
              regionList[this.provinceindex].cityList[this.cityindex].indeterminate=false;
              regionList[this.provinceindex].cityList[this.cityindex].ischeckAll=false;

              let provinceAll =true;
              for(let i=0;i<cityList.length;i++){
                if(cityList[i].ischeckAll==true || cityList[i].indeterminate==true){
                  provinceAll=false
                }
              }
              if(provinceAll== true){
                regionList[this.provinceindex].indeterminate=false;
                regionList[this.provinceindex].ischeckAll=false;
              }
            }

          }else {
            regionList[this.provinceindex].indeterminate=true
            regionList[this.provinceindex].cityList[this.cityindex].indeterminate=true


            let areaAll=true
            for(let i=0;i<areaList.length;i++){
              if(areaList[i].ischeckAll==false){
                areaAll=false
              }
            }
            if(areaAll==true){
              regionList[this.provinceindex].cityList[this.cityindex].indeterminate=false;
              regionList[this.provinceindex].cityList[this.cityindex].ischeckAll=true;

              let provinceAll =true;
              for(let i=0;i<cityList.length;i++){
                if(cityList[i].ischeckAll==false || cityList[i].indeterminate==true){
                  provinceAll=false
                }
              }
              if(provinceAll== true){
                regionList[this.provinceindex].indeterminate=false;
                regionList[this.provinceindex].ischeckAll=true;
              }
            }
          }
          this.toParent()

        },
        toParent(){//传值给父组件
          let List=[];
          let data= this.regionList
          for(let i=0 ;i<data.length;i++){
            if(data[i].ischeckAll==true && data[i].indeterminate==false){ //全选的情况 只穿省的ID
              List.push({'ID':0,'RegionId':data[i].ID,"RegionName":data[i].Name,'GrandpaID':0,'ParentID':0})
            }
            if(data[i].indeterminate==true){//传市的ID

              if(data[i].hasOwnProperty('cityList')==true){
                let citylist = data[i].cityList;
                for(let j= 0;j<citylist.length;j++){
                  if(citylist[j].ischeckAll==true && citylist[j].indeterminate==false){
                    List.push({'ID':0,'RegionId':citylist[j].ID,"RegionName":citylist[j].Name,'GrandpaID':0,'ParentID':data[i].ID})
                  }
                  if(citylist[j].indeterminate==true){
                    if(citylist[j].hasOwnProperty('areaList')==true){
                      let areaList = citylist[j].areaList;
                      for(let z= 0;z<areaList.length;z++){
                        if(areaList[z].ischeckAll==true){
                          List.push({'ID':0,'RegionId':areaList[z].ID,"RegionName":areaList[z].Name,'GrandpaID':data[i].ID,'ParentID':citylist[j].ID})
                        }
                      }
                    }

                  }
                }

              }
            }
          }

          this.$emit('event1', List)
        },
        citylist(Id,index){
          let getlist =this.getlist;
          let msg = {'Id':Id}
          this.apipost("/api/Destination/GetChildList",msg , res => {
            if (res.data.resultCode == 1) {
              let data = res.data.data;
              for(let i=0;i<data.length;i++){
                if(getlist.length>0){
                  for(let j=0;j<getlist.length;j++){

                    if(getlist[j].RegionId==data[i].ID || getlist[j].RegionId==this.regionList[index].ID){
                      data[i].ischeckAll=true;
                      data[i].indeterminate=false;
                      this.arealist(data[i].ID,i,index)

                    }else if(getlist[j].ParentID==data[i].ID){
                      data[i].ischeckAll=false;
                      data[i].indeterminate=true;
                      this.arealist(data[i].ID,i,index)
                    }else if(data[i].hasOwnProperty('ischeckAll')==false && data[i].hasOwnProperty('indeterminate')==false){
                      data[i].ischeckAll=false;
                      data[i].indeterminate=false;
                    }

                  }
                }else {
                  data[i].ischeckAll=false;
                  data[i].indeterminate=false;
                }
              }

              this.regionList[index].cityList = data
            } else {
              this.Info(res.data.message);
            }
          })
            },
        arealist(Id,index,Pindex){
          let getlist =this.getlist;
          let msg = {'Id':Id}
          this.apipost("/api/Destination/GetChildList",msg , res => {
            if (res.data.resultCode == 1) {
              let data = res.data.data;
              for(let i=0;i<data.length;i++){

                  if(getlist.length>0){
                    for(let j=0;j<getlist.length;j++){

                      if(getlist[j].RegionId==this.regionList[Pindex].ID || getlist[j].RegionId==data[i].ID || getlist[j].RegionId == this.regionList[Pindex].cityList[index].ID){
                        data[i].ischeckAll=true;
                      }else if(data[i].hasOwnProperty('ischeckAll')==false ){
                        data[i].ischeckAll=false;

                      }
                    }
                  }else {
                      data[i].ischeckAll=false;

                  }


              }

              this.regionList[Pindex].cityList[index].areaList = data
            } else {
              this.Info(res.data.message);
            }
          })
        },
        Receive(val){
          this.regionList = [];
            this.loading=true;
            this.cityindex=0;
            this.areaindex=0;
            this.cityID=0;
            this.areaID=0;

            this.getlist= val;
            setTimeout(()=>{
              this.getprovince()
            },2000)
        }

      },

      mounted(){
        this.getprovince()
      },

    }
</script>

<style scoped>
.regionChoice{
  width: 880px;
  height: 400px;
  margin-left: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
 .regionChoice .item{
    overflow-y: auto;
    border: 1px solid #EBEEF5;
    border-radius: 4px;
    padding: 20px;
    width: 270px;
    height: 400px;

  }
 .regionChoice .item_b{
   display: flex;
   flex-direction: row;
   align-items: center;
  }
.regionChoice .item_b span{
  margin-left: 15px;
}
</style>
