<template>
    <simple-form-modal
        :title="title"
        :items="formItems"
        ref="editRef"
        :baseUrl="baseUrl"
        @success="(data) => emit('success', data)"
        :formatData="formatData"
    >
        <template #areaSelect="{ model }">
            <area-select v-model="model.proCodes" />
        </template>
    </simple-form-modal>
</template>

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

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

    const title = ref('添加地址');

    const formItems = computed(() => {
        return [
            { type: 'input', label: '联系人', prop: 'name', required: true },
            {
                type: 'areaSelect',
                label: '所在地区',
                prop: 'proCodes',
                required: true
            },
            {
                type: 'textarea',
                label: '详细地址',
                prop: 'detailAddress',
                required: true
            },
            {
                type: 'input',
                label: '手机号',
                prop: 'mobile',
                itemProps: {
                    rules: [
                        {
                            required: true,
                            message: '请输入手机号',
                            trigger: ['blur']
                        },
                        {
                            pattern: /^1[3-9]\d{9}$/,
                            message: '请输入正确的手机号',
                            trigger: ['change']
                        }
                    ]
                }
            },
            { type: 'input', label: '邮编编码', prop: 'postalCode' },
            { type: 'textarea', label: '备注', prop: 'remark' }
        ];
    });

    const baseUrl = reactive({
        add: '/shop/shopAddress/setShopAddressInfo',
        update: '/shop/shopAddress/setShopAddressInfo'
    });

    const formData = ref({
        id: undefined,
        name: '',
        mobile: '',
        proCodes: [],
        detailAddress: '',
        postalCode: '',
        remark: ''
    });

    const editRef = ref(null);

    const formatData = (data) => {
        if (data.proCodes && data.proCodes.length > 0) {
            data.provinceId = data.proCodes[0];
            data.cityId = data.proCodes[1];
            data.districtId = data.proCodes[2];
        }
        return data;
    };

    const handleOpen = (row) => {
        formData.value = {
            id: undefined,
            name: '',
            mobile: '',
            proCodes: [],
            detailAddress: '',
            postalCode: '',
            remark: ''
        };

        if (row && row.id) {
            title.value = '编辑地址';
            formData.value = { ...row };
            if (row.provinceId && row.cityId && row.districtId) {
                formData.value.proCodes = [
                    row.provinceId,
                    row.cityId,
                    row.districtId
                ];
            } else if (row.proCodes) {
                formData.value.proCodes = row.proCodes;
            }
        } else {
            title.value = '添加地址';
        }

        nextTick(() => {
            editRef.value?.handleOpen(formData.value);
        });
    };

    defineExpose({ handleOpen });
</script>
