<template>
<div>
<el-select placeholder="国家" filterable v-model="addMsg.Country" class='multiple_input w100'
                @change="GetSubAreaList(addMsg.Country, 1), addMsg.Province = '', addMsg.City = '', addMsg.District = ''">
                <el-option v-for="childItem in CountryList" :key="childItem.ID" :label="childItem.Name"
                  :value="childItem.ID">
                </el-option>
              </el-select>
              <el-select placeholder="省" filterable class='multiple_input w100' v-model="addMsg.Province"
                @change="GetSubAreaList(addMsg.Province, 2), addMsg.City = '', addMsg.District = ''">
                <el-option v-for="childItem in ProvinceList" :key="childItem.ID" :label="childItem.Name"
                  :value="childItem.ID">
                </el-option>
              </el-select>
              <el-select placeholder="市" filterable @change="GetSubAreaList(addMsg.City, 3)"
                class='multiple_input w100' v-model="addMsg.City">
                <el-option v-for="childItem in CityList" :key="childItem.ID" :label="childItem.Name"
                  :value="childItem.ID">
                </el-option>
              </el-select>
              <el-select placeholder="区" class='multiple_input w100' v-model="addMsg.District" @change="emitChange(addMsg.District, 4)" filterable>
                <el-option v-for="item in district" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
              </el-select>
</div>
</template>
<style scoped>

</style>
<script>
export default {
    data() {
        return {
          addMsg: {
            Country: '',
            Province: '',
            City: '',
            District: '',
          },
          CountryList: [],
          ProvinceList: [],
          CityList: [],
          district: [],  
        }
    },
    mounted() {
      this.GetCounrty();
    },
    methods: {
      reset() {
        this.addMsg = {
            Country: '',
            Province: '',
            City: '',
            District: '',
          }
        this.ProvinceList = []
        this.CityList = []
        this.district = []
      },
      //获取国家
      GetCounrty() {
        this.apipost(
          "dict_post_Destination_GetCountry", {},
          res => {
            this.CountryList = res.data.data;
          },
          err => { }
        );
      },
      //获取省份和城市
      GetSubAreaList(ID, type) {
        let msg = {
          Id: ID
        };
        if (this.addMsg.Country != 0) {
          this.apipost(
            "dict_post_Destination_GetChildList",
            msg,
            res => {
              if (type == 1) {
                this.ProvinceList = res.data.data;
                this.CityList = [];
                this.district = [];
              } else if (type == 2) {
                this.CityList = res.data.data;
                this.district = [];
              } else if (type == 3) {
                this.district = res.data.data;
              }
            },
            err => { }
          );
        }
        this.emitChange(ID, type)
      },
      emitChange(ID, type) {
        let info
        if(type === 1) {
          info = this.CountryList.find(item => item.ID === ID)
        } else if(type === 2) {
          info = this.ProvinceList.find(item => item.ID === ID)
        } else if(type === 3) {
          info = this.CityList.find(item => item.ID === ID)
        } else {
          info= this.district.find(item => item.ID === ID)
        }
        this.$emit('change', info)
      }
    }
}
</script>