<template>
<div class="about">
    <h1>省/市/区</h1>
    <el-select v-model="province" placeholder="请选择省份" @change="handleProvinceChange">
      <el-option v-for="item in provinceList" :key="item.code" :label="item.name" :value="item.code">
      </el-option>
    </el-select>
    <el-select v-model="city" placeholder="请选择城市" @change="handleCityChange">
      <el-option v-for="item in cityList" :key="item.code" :label="item.name" :value="item.code">
      </el-option>
    </el-select>
    <el-select v-model="area" placeholder="请选择区域" @change="handleCountyChange">
      <el-option v-for="item in areaList" :key="item.code" :label="item.name" :value="item.code">
      </el-option>
    </el-select>
</div>
</template>
<script>
export default {
  data() {
    return {
      pca: [], // 省市区数据
      province: '', // 省
      city: '', // 市
      area: '', // 区
      provinceList: [], // 省列表
      cityList: [], // 市列表
      areaList: [] // 区列表
    }
  },
  // 初始化
  created() {
    this.getPCA();
  },
  watch: {
  },
  methods: {
    // 获取省市区
    getPCA() {
      // axios
      this.$axios.get('https://raw.githubusercontent.com/modood/Administrative-divisions-of-China/master/dist/pca-code.json')
        .then(res => {
          this.pca = res.data;

          // 获取省份
          this.provinceList = this.pca.map(item => {
            return {
              code: item.code,
              name: item.name,
            }
          })
        })
        .catch(err => {
          console.log(err);
        })
    },

    // 省份改变
    handleProvinceChange(value) {
      console.log(value);
      this.city = ''; // 清空城市
      this.area = ''; // 清空区域
      // 获取与当前省份相关的城市列表
      this.cityList = this.pca.find(item => item.code === value).children;
    },

    // 城市改变
    handleCityChange(value) {
      this.area = ''; // 清空区域
      console.log(value);
      // 获取与当前城市相关的区县列表
      this.areaList = this.cityList.find(item => item.code === value).children;

    },

    // 区县改变
    handleCountyChange(value) {
      console.log(value);
    },
  },
}
</script>