<!-- 搜索表单 -->
<template>
    <simple-form-modal
        title="手机号黑名单"
        :items="formItems"
        ref="editRef"
        :baseUrl="baseUrl"
        @success="(data) => emit('success', data)"
    />
</template>

<script setup>
    import { reactive, ref, defineEmits, getCurrentInstance } from 'vue';
    import { useFormData } from '@/utils/use-form-data';
    import SimpleFormModal from '@/components/CommonPage/SimpleFormModal.vue';
    const { proxy } = getCurrentInstance();

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

    const formItems = computed(() => {
        return [
            {
                type: 'input',
                label: '手机号',
                prop: 'mobile',
                itemProps: {
                    rules: [
                        {
                            required: true,
                            message: '请输入手机号',
                            trigger: ['blur']
                        },
                        {
                            pattern: /^1[3-9]\d{9}$/,
                            message: '请输入正确的手机号',
                            trigger: ['change']
                        }
                    ]
                }
            },
            {
                type: 'textarea',
                label: '拉黑原因',
                prop: 'reason',
                required: true
            }
        ];
    });
    //默认值
    const baseUrl = reactive({
        add: '/user/mobileBlack/add',
        update: '/user/mobileBlack/update'
    });
    const formData = ref({});

    const editRef = ref(null);

    function handleOpen(data) {
        formData.value = { ...(data || {}) };
        editRef.value?.handleOpen(formData.value);
    }

    defineExpose({ handleOpen });
</script>
