<template>
    <view @click="showArea = true">
        <slot></slot>
    </view>
    <ut-picker-area v-model:show="showArea" v-model="value" :title="title" :selectCodeMax="selectCodeMax" :maxLevel="maxLevel" @confirm="confirmArea"></ut-picker-area>
</template>
<script setup lang="ts">
const props = defineProps({
    modelValue: {
        type: String,
        default: '',
    },
    title: {
        type: String,
        default: '请选择地址',
    },
    maxLevel: {
        type: Number,
        default: 3,
    },
    name: {
        type: String,
        default: '',
    },
    fullName: {
        type: String,
        default: '',
    },
    fullNames: {
        type: String,
        default: '',
    },
    selectCodeMax: {
        type: String,
        default: '',
    }
});
const showArea = ref(false);
const value = ref(props.modelValue);
const emit = defineEmits(['update:modelValue', 'update:name', 'update:fullName', 'update:fullNames', 'change']);
const confirmArea = (area: any) => {
    value.value = area.value;
    emit('update:modelValue', area.value);
    emit('update:name', area.name);
    emit('update:fullName', area.fullName);
    emit('update:fullNames', area.fullNames);
    emit('change', area);
    showArea.value = false;
};
</script>
<style scoped lang="scss">
.close-icon {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
}
.card-info-block {
    border: 1rpx solid #afddbb;
    border-radius: 10rpx;
}
</style>
