<template>
    <div class="cityTypeClass">
        <el-select
            v-model="address.province"
            placeholder="请选择省"
            style="flex: 1;margin-right: 8px"
            @change="handleProvinceSelect">
            <el-option v-for="item in regionData" :key="item.label" :label="item.label" :value="item.label" />
        </el-select>
        <el-select
            v-model="address.city"
            placeholder="请选择市"
            :disabled="!address.province || cityList.length == 0"
            style="flex: 1;margin-right: 8px"
            @change="handleCitySelect">
                <el-option v-for="item in cityList" :key="item.label" :label="item.label" :value="item.label" />
        </el-select>
        <el-select
            v-model="address.area"
            placeholder="请选择区"
            style="flex: 1;"
            :disabled="!address.province || !address.city || areaList.length == 0"
            @change="handleAreaSelect">
                <el-option v-for="item in areaList" :key="item.label" :label="item.label" :value="item.label" />
        </el-select>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import { regionData } from 'element-china-area-data';
const props = defineProps({
    customerCity: {
        type: Object, default: () => {
            return {
                procince: '',
                city: '',
                area: '',
            };
        }
    },
});
// 城市展示字段
const address = reactive<{
    province: string,
    city: string
    area: string
}>({
    province: '',
    city: '',
    area: '',
});

interface AreaList {
    value: string
    label: string
    children?: AreaList[]
}

const cityList = ref([] as Array<AreaList>);
const areaList = ref([] as Array<AreaList>);

// 二级城市改变执行
const cityChange = () => {
    cityList.value.length = 0;
    let temp: any = undefined;
    temp = regionData.find((item: AreaList) => item.label === address.province);
    temp?.children.forEach((item: AreaList) => cityList.value.push(item));
};
// 三级地区改变执行
const areaChange = () => {
    areaList.value.length = 0;
    let temp2: any = undefined;
    temp2 = cityList.value.find((item: AreaList) => item.label === address.city);
    temp2?.children.forEach((item: AreaList) => areaList.value.push(item));
};

watch(props.customerCity, (newValue) => {
    address.province = newValue.province;
    address.city = newValue.city;
    address.area = newValue.area;
    cityChange();
    areaChange();
}, { deep: true, immediate: true });


//抛出地址
const emit = defineEmits<{
    (e: 'getAddress', data: {
        // code: string[] //区域码
        name: string[] //汉字
        isComplete: boolean  //是否选择完整，方便校验
    }): void
}>();

//切换省份函数
const handleProvinceSelect = () => {
    address.city = '';
    address.area = '';
    let data = {
        // code: [address.province], //区域码
        // name: [codeToText[address.province]], //汉字
        name: [address.province], //汉字
        isComplete: false
    };
    emit('getAddress', data);
    console.log(address.province);
    cityChange();
};
//切换城市函数
const handleCitySelect = () => {
    address.area = '';
    let data = {
        // code: [address.province, address.city], //区域码
        // name: [codeToText[address.province], codeToText[address.city]], //汉字
        name: [address.province, address.city], //汉字
        isComplete: areaList.value.length === 0 ? true : false
    };
    emit('getAddress', data);
    areaChange();
};
//切换地区函数
const handleAreaSelect = () => {
    let data = {
        // code: [address.province, address.city, address.area], //区域码
        name: [address.province, address.city, address.area], //汉字
        isComplete: true
    };
    emit('getAddress', data);
};
</script>
<style scoped lang="scss">
.cityTypeClass {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
</style>
