<template>
    <div class="select-place">
        <el-select v-model="place.province" :size="size" clearable placeholder="请选择" :style="{width: width+'px'}" @change="provinceChange">
            <el-option v-for="item in placeOptions.province" :key="item.name" :label="item.name" :value="item.code" />
        </el-select>
        <el-select v-model="place.city" :size="size" clearable placeholder="请选择" :style="{width: width+'px'}" @change="cityChange">
            <el-option v-for="item in placeOptions.city" :key="item.name" :label="item.name" :value="item.code"/>
        </el-select>
        <el-select v-model="place.area" :size="size" clearable placeholder="请选择" :style="{width: width+'px'}" @change="areaChange" v-show="showArea">
            <el-option v-for="item in placeOptions.area" :key="item.name" :label="item.name" :value="item.code"/>
        </el-select>
    </div>
</template>

<script>
import chinaJson from "@/utils/chinaJson"
export default {
    name: "select-place",
    props: {
        size: {
            type: String,
            default: ''
        },
        width: {
            type: Number,
            default: 100,
        }
    },
    data() {
        return {
            place: {
                province: '',
                city: '',
                area: ''
            },
            placeOptions: {
                province: [],
                city: [],
                area: []
            },
            showArea: false,
            curCitys: [],
            curAreas: []
        }
    },
    methods: {
        openCode(areaCode) {
            this.placeOptions.province.length = 0
            this.getProvince()
            if(areaCode) {
                const array = areaCode.split(',')
                console.log(array)
                this.provinceChange(array[0])
                this.cityChange(array[1])
                this.place.province = array[0]
                this.place.city = array[1]
                this.place.area = array[2]

                this.$emit('submit', areaCode)
            } else {
                this.placeOptions.city.length = 0
                this.placeOptions.area.length = 0
                this.place = {
                    province: '',
                    city: '',
                    area: ''
                }
            }
        },
        getProvince() {
            chinaJson.china.forEach((item, i) => {
                this.placeOptions.province.push({
                    name: item.name,
                    code: item.code
                })
            })
        },
        provinceChange(data) {
            // console.log(data)
            this.place.province = data
            this.place.city = ''
            this.placeOptions.city.length = 0
            this.place.area = ''
            this.placeOptions.area.length = 0
            chinaJson.china.forEach((item, i) => {
                if(item.code==data) {
                    // console.log(item)
                    if(item.city.length==1 && item.city[0].name=='市辖区') {
                        item.city[0].area.forEach((area, j) => {
                            this.placeOptions.city.push({
                                name: area.name,
                                code: area.code
                            })
                        })
                        this.showArea = false
                    } else {
                        item.city.forEach((city, j) => {
                            this.placeOptions.city.push({
                                name: city.name,
                                code: city.code
                            })
                        })
                        this.showArea = true
                        this.curCitys = item.city
                    }
                }
            })
        },
        cityChange(data) {
            // console.log(data, this.curCitys)
            this.place.area = ''
            this.placeOptions.area.length = 0
            this.curCitys.forEach((item, i) => {
                if(item.code==data) {
                    // console.log(item)
                    item.area.forEach((area, i) => {
                        if(area.name!='市辖区') {
                            this.placeOptions.area.push({
                                name: area.name,
                                code: area.code
                            })
                        }
                    })
                    this.curAreas = item.area
                }
            })
            if(!this.showArea) this.$emit('submit', this.place.province + ',' + this.place.city)
        },
        areaChange(data) {
            // console.log(data, this.curAreas)
            console.log(this.place)
            // this.$message(this.place.province + ',' + this.place.city + ',' + this.place.area)
            this.$emit('submit', this.place.province + ',' + this.place.city + ',' + this.place.area)
        }
    },
    created() {

    },
    mounted() {

    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.select-place {
    display: inline-block;
}
</style>