<template>
  <div class="flex-between">
    <el-select v-model="provinceId" style="width:100px;margin-right: 10px;" @change="getProvince">
      <el-option v-for="item in provinceArr" :value="item.id" :key="item.id" :label="item.name">
      </el-option>
    </el-select>
    <el-select v-model="cityId" style="width:100px;margin-right: 10px;" @change="getCity">
      <el-option v-for="item in cityArr" :value="item.id" :key="item.id" :label="item.name">
      </el-option>
    </el-select>
    <el-select v-model="districtId" style="width:100px;margin-right: 10px;" @change="getDistrict">
      <el-option v-for="item in districtArr" :value="item.id" :key="item.id" :label="item.name">
      </el-option>
    </el-select>
  </div>
</template>

<script>
import {
  cityList
} from '~/api/common/list'
// import arrAll from './area.js'
export default {
  data() {
    return {
      provinceId: '',
      cityId: '',
      districtId: '',
      provinceArr: [],
      cityArr: [],
      districtArr: []
    }
  },
  mounted() {
    this.getProvinceArr()
  },
  methods: {
    //清空
    clear(){
      this.provinceId = ''
      this.cityId = ''
      this.districtId = ''
    },
    // 获取省列表
    async getProvinceArr() {
      const {
        code,
        data
      } = await cityList(0)
      if (code === 200) {
        this.provinceArr = data
      }
    },
    // 获取市列表
    async getcityArr(id) {
      const {
        code,
        data
      } = await cityList(id)
      if (code === 200) {
        this.cityArr = data
      }
    },
    // 获取区列表
    async getdistrictArr(id) {
      const {
        code,
        data
      } = await cityList(id)
      if (code === 200) {
        this.districtArr = data
      }
    },


    getProvince() {
      console.log(this.provinceId)
      this.getcityArr(this.provinceId)
      this.cityId = ''
      this.districtId = ''
      this.$emit('sendprovinceId', this.provinceId)
    },
    getCity() {
      this.getdistrictArr(this.cityId)
      this.districtId = ''
      this.$emit('sendcityId', this.cityId)
    },
    getDistrict() {
      this.$emit('senddistrictId', this.districtId)
    }
  }
}
</script>

<style>
</style>
