<!-- 搜索表单 -->
<template>
    <simple-form-modal
        title="修改地址"
        :items="formItems"
        ref="editRef"
        :baseUrl="baseUrl"
        @success="(data) => emit('success', data)"
        :formatData="formatData"
    >
        <template #areaSelect>
            <area-select v-model="formData.proCodes" />
        </template>
    </simple-form-modal>
</template>

<script setup>
    import {
        reactive,
        ref,
        defineEmits,
        getCurrentInstance,
        nextTick,
        computed
    } from 'vue';
    import SimpleFormModal from '@/components/CommonPage/SimpleFormModal.vue';
    import AreaSelect from '@/components/CommonPage/AreaSelect.vue';
    const { proxy } = getCurrentInstance();

    const emit = defineEmits(['success']);

    const formItems = computed(() => {
        return [
            {
                type: 'input',
                label: '发件人',
                prop: 'sendName',
                required: true
            },
            {
                type: 'input',
                label: '手机号',
                prop: 'sendMobile',
                itemProps: {
                    rules: [
                        {
                            required: true,
                            message: '请输入手机号',
                            trigger: ['blur']
                        },
                        {
                            pattern: /^1[3-9]\d{9}$/,
                            message: '请输入正确的手机号',
                            trigger: ['change']
                        }
                    ]
                }
            },
            {
                type: 'areaSelect',
                label: '省市区',
                prop: 'proCodes',
                required: true
            },
            {
                type: 'textarea',
                label: '详细地址',
                prop: 'detailAddress',
                required: true
            }
        ];
    });

    //默认值
    const baseUrl = reactive({
        add: '/order/orderInfo/modifyAddress'
    });
    const formData = ref({
        orderId: '',
        sendName: '',
        sendMobile: '',
        provinceId: 0,
        cityId: 0,
        districtId: 0,
        detailAddress: '',
        proCodes: []
    });

    const editRef = ref(null);

    const formatData = (data) => {
        if (data.proCodes.length > 0) {
            data.provinceId = data.proCodes[0];
            data.cityId = data.proCodes[1];
            data.districtId = data.proCodes[2];
        }
        return {
            ...data,
            orderId: formData.value.orderId
        };
    };

    function handleOpen(data) {
        console.log('handleOpen called with:', data);

        // 先重置formData，确保清空所有数据
        formData.value = {
            orderId: '',
            sendName: '',
            sendMobile: '',
            provinceId: 0,
            cityId: 0,
            districtId: 0,
            detailAddress: '',
            proCodes: []
        };

        if (data && data.orderId) {
            formData.value.orderId = data.orderId;
            formData.value.sendName = data.sendName;
            formData.value.sendMobile = data.sendMobile;
            formData.value.detailAddress = data.sendAddress;
            formData.value.proCodes = data.sendSsqId
                ? data.sendSsqId.split('/').map(Number)
                : [];
            console.log('formData after setup:', formData.value);
        }

        // 使用nextTick确保数据重置后再打开弹窗
        nextTick(() => {
            editRef.value?.handleOpen(formData.value);
        });
    }

    defineExpose({ handleOpen });
</script>
