<!-- 搜索表单 -->
<template>
    <simple-form-modal
        title="修改地址"
        :items="formItems"
        ref="editRef"
        :baseUrl="baseUrl"
        @success="(data) => emit('success', data)"
        :formatData="formatData"
    >
        <template #areaSelect="{ model, updateValue }">
            <area-select
                :modelValue="model.proCodes"
                @update:modelValue="(val) => updateValue(val)"
            />
        </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: 'receiveName',
                required: true
            },
            {
                type: 'input',
                label: '手机号',
                prop: 'receiveMobile',
                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/refund/modifyAddress',
    });
    const formData = ref({
        refundOrderId: '',
        receiveName: '',
        receiveMobile: '',
        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 {
            refundOrderId: formData.value.refundOrderId,
            receiveName: data.receiveName,
            receiveMobile: data.receiveMobile,
            provinceId: data.provinceId,
            cityId: data.cityId,
            districtId: data.districtId,
            detailAddress: data.detailAddress
        };
    };

    function handleOpen(data) {
        // 先重置formData，确保清空所有数据
        formData.value = {
            refundOrderId: '',
            receiveName: '',
            receiveMobile: '',
            provinceId: 0,
            cityId: 0,
            districtId: 0,
            detailAddress: '',
            proCodes: []
        };

        if (data && data.refundOrderId) {
            formData.value.refundOrderId = data.refundOrderId;
            formData.value.receiveName = data.receiveName;
            formData.value.receiveMobile = data.receiveMobile;
            formData.value.detailAddress = data.receiveAddress;
            formData.value.proCodes = data.receiveSsqId
                ? data.receiveSsqId.split('/').map(Number)
                : [];
        }

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

    defineExpose({ handleOpen });
</script>
