<script setup>
//可搜索的地区选择器
import {province_sorce,city_sorce,area_sorce} from '@/utils/areaData.js';
const props = defineProps({
    provinceInfo: { //省数据回显
        type:String,
        default:''
    },
    cityInfo:{ //市数据回显
        type:String,
        default:''
    },
    disabled:{ //是否可选择,目前统一控制
        type:Boolean,
        default:false
    },
    showArea:{ //是否展示区
        type:Boolean,
        default:false
    },
    areaInfo:{ //区数据回显
        type:String,
        default:''
    }
})
const emit = defineEmits(["selected"])
let province = ref({
    provinceKey:'',
    provinceName:''
})
let city = ref({
    cityKey:'',
    cityName:''
})
let area = ref({
    areaKey:'',
    areaName:''
})

const provinceSource = computed(() => {
    return Object.keys(province_sorce).map(key=>{
        return {
            provinceKey:key||'',
            provinceName:province_sorce[key]||''
        }
    })
})
const citySource = computed(() => {
    const cityMap = city_sorce[province.value.provinceKey]||{}
    return Object.keys(cityMap).map(cityKey=>{
        return {
            cityKey:cityKey||'',
            cityName:cityMap[cityKey]||''
        }
    })
})
const areaSource = computed(() => {
    const areaMap = area_sorce[city.value.cityKey]||{}
    return Object.keys(areaMap).map(areaKey=>{
        return {
            areaKey:areaKey||'',
            areaName:areaMap[areaKey]||''
        }
    })
})

//数据回显
watch(
    ()=>props.provinceInfo,
    (newval)=>{
        if(newval&&newval.length){
            if(newval===province.value.provinceName) return
            const provinceResult= Object.entries(province_sorce).find(([key,val])=>val===newval)||['',newval]
            province.value = {provinceKey:provinceResult[0],provinceName:provinceResult[1]}
            if(province.value.provinceKey){
                const cityResult = Object.entries(city_sorce[province.value.provinceKey]).find(([key,val])=>val===props.cityInfo)||['',props.cityInfo]
                city.value = {cityKey:cityResult[0],cityName:cityResult[1]}
            }else{
                city.value = {cityKey:'',cityName:props.cityInfo}
            }
            if(city.value.cityKey){
                const areaResult = Object.entries(area_sorce[city.value.cityKey]).find(([key,val])=>val===props.areaInfo)||['',props.areaInfo]
                area.value = {areaKey:areaResult[0],areaName:areaResult[1]}
            }else{
                area.value={areaKey:'',areaName:props.areaInfo}
            }
        }else{
            province.value={provinceKey:'',provinceName:''}
            city.value={cityKey:'',cityName:''}
            area.value={areaKey:'',areaName:''}
        }
    },
    {immediate:true})

function handleSelectChange(type){
    if(type==='province'){
        city.value = {cityKey:'',cityName:''}
        area.value = {areaKey:'',areaName:''}
    }
    if(type==='city'&&props.showArea){
        area.value = {areaKey:'',areaName:''}
    }
    emit('selected',{
        province:{value:province.value.provinceName},
        city:{value:city.value.cityName},
        area:{value:area.value.areaName}
    })
}

</script>

<template>
    <div class="select-dist-picker">
        <!-- 省选择器 -->
        <el-select
            placeholder="请选择省"
            filterable
            v-model="province"
            value-key="provinceKey"
            :disabled="props.disabled"
            @change="handleSelectChange('province')"
        >
            <el-option
                v-for="province in provinceSource"
                :key="province.provinceKey"
                :label="province.provinceName"
                :value="province"
            />
        </el-select>
        <!-- 市选择器 -->
        <el-select
            placeholder="请选择市"
            filterable
            v-model="city"
            value-key="cityKey"
            :disabled="props.disabled"
            @change="handleSelectChange('city')"
        >
            <el-option
                v-for="city in citySource"
                :key="city.cityKey"
                :label="city.cityName"
                :value="city"
            />
        </el-select>
        <!-- 区选择器 -->
        <el-select v-if="showArea"
            placeholder="请选择区"
            filterable
            v-model="area"
            value-key="areaKey"
            :disabled="props.disabled"
            @change="handleSelectChange"
        >
            <el-option
                v-for="area in areaSource"
                :key="area.areaKey"
                :label="area.areaName"
                :value="area"
            />
        </el-select>
    </div>
</template>

<style scoped lang="scss">
.select-dist-picker{
    display: flex;
    gap: 10px;
    :deep(.el-input){
        width:100%;
    }
}
</style>
