<template>
  <div class="regionChoice">
    <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",
      data(){
          return{
            regionList:[],
            msg:{ Id:2,},
            cityID:0,
            areaID:0,
            list:[],
            provinceindex:0,
            cityindex:0,
            areaindex:0,

            cityList:[],
            areaList:[],
          }
      },
      methods:{
        getprovince(){
          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;
              }
              this.regionList = data;
              this.cityID = data[this.provinceindex].ID
              this.getCitylist()
            } else {
              this.Info(res.data.message);
            }
          })
        },
        getCitylist(type=false){
          this.apipost("/api/Destination/GetChildList",{'Id':this.cityID} , res => {
            if (res.data.resultCode == 1) {
              let data = res.data.data;
              for(let i=0;i<data.length;i++){
                if(type==true){
                  data[i].ischeckAll=true;
                  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.areaID = data[this.cityindex].ID
              this.getareaIDlist(type)
            } else {
              this.Info(res.data.message);
            }
          })
        },
        getareaIDlist(type=false){
          this.apipost("/api/Destination/GetChildList",{'Id':this.areaID} , res => {
            if (res.data.resultCode == 1) {
              let data = res.data.data;
              for(let i=0;i<data.length;i++){
                if(type==true){
                  data[i].ischeckAll=true;
                }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(regionList[index].hasOwnProperty('cityList')==false){
            this.getCitylist(true)

          }else {
            if(e==false){
              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=true
              }
              this.areaList = areaList

            }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;
          if(regionList[this.provinceindex].cityList[index].hasOwnProperty('areaList')==false){//没有子级的时候加载
            this.getareaIDlist()
          }else {
            this.areaList = regionList[this.provinceindex].cityList[index].areaList;
          }
            //取消自己的勾的时候父级的勾改变
          let areaList = regionList[this.provinceindex].cityList[index].areaList;

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

          }else {
            let all=true;
            let cityList =  this.regionList[this.provinceindex].cityList;
            this.regionList[this.provinceindex].indeterminate=true;
            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;
          if(e==false){
            regionList[this.provinceindex].indeterminate=true
            regionList[this.provinceindex].cityList[this.cityindex].indeterminate=true

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

            let areaList= regionList[this.provinceindex].cityList[this.cityindex].areaList;
            let cityList= regionList[this.provinceindex].cityList;
            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(){//传值给父组件
          this.$emit('event1', this.regionList)
        }


      },

      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>
