<template>
    <ele-card :body-style="{ paddingBottom: '8px' }">
        <ProSearch
            :items="formItems"
            ref="searchRef"
            @search="search"
            :initKeys="initKeys"
        />
    </ele-card>
</template>

<script setup>
    import { reactive, ref, defineEmits } from 'vue';
    import ProSearch from '@/components/CommonPage/ProSearch2.vue';

    const emit = defineEmits(['search']);
    const searchRef = ref(null);

    const formItems = reactive([
        {
            type: 'input',
            label: '请输入用户昵称',
            prop: 'userName',
            placeholder: '请输入用户昵称'
        },
        {
            type: 'input',
            label: '请输入用户ID',
            prop: 'userId',
            placeholder: '请输入用户ID'
        },
        {
            type: 'select',
            label: '请选择状态',
            prop: 'status',
            placeholder: '请选择状态',
            options: [
                { label: '待处理', value: 1 },
                { label: '已跟进', value: 2 },
                { label: '已处理', value: 3 }
            ]
        }
    ]);

    const initKeys = reactive({
        userName: '',
        userId: '',
        status: void 0
    });

    const search = (data) => {
        emit('search', data);
    };
</script>
