<template>
    <div>
        <el-select v-model="provinceId" style="width: 167px; margin-right: 25px" @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: 167px; margin-right: 25px" @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: 167px; margin-right: 25px" @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 {
    props: {
        provinceId: {
            type: String,
            default: ''
        },
       cityId: {
            type: String,
            default: ''
        },
        districtId: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            provinceArr: [],
            cityArr: [],
            districtArr: []
        };
    },
    created() {
        this.getProvinceArr();
        if(this.provinceId){
          console.log("获取省份列表")
             this.getcityArr(this.provinceId);
        }
        if(this.cityId){
            console.log("获取城市列表")
            this.getdistrictArr(this.cityId);
        }
    },
    methods: {
        // 获取省列表
        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() {
            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);
        }
    }

    // getCounty() {
    //   for (var i = 0; i < this.cityArr.length; i++) {
    //     var obj = this.cityArr[i]
    //     if (this.city == obj.name) {
    //       this.countyArr = obj.sub
    //       this.county = ''
    //       this.$emit('getCounty', this.city)
    //     }
    //   }
    // },
    // getDistrict() {
    //   this.$emit('getCity', this.county)
    // }
};
</script>

<style>
</style>
