<!-- 搜索表单 -->
<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, onMounted } from 'vue';
    import ProSearch from '@/components/CommonPage/ProSearch2.vue';
    import request from '@/utils/request';

    let { proxy } = getCurrentInstance();
    const emit = defineEmits(['search']);

    const typeOptions = ref([]);

    // 获取限制类型列表
    const fetchTypeList = async () => {
        try {
            const res = await request.get('/user/userRequestLimit/typeList');
            if (res.data.code === 200) {
                typeOptions.value = res.data.data.map((item) => ({
                    label: item.name,
                    value: item.code
                }));
            }
        } catch (error) {
            console.error('获取限制类型列表失败:', error);
        }
    };

    const formItems = reactive([
        { type: 'input', label: '昵称', prop: 'nickName' },
        {
            type: 'select',
            label: '限制类型',
            prop: 'limitType',
            options: typeOptions
        }
    ]);

    const initKeys = reactive({
        nickName: '',
        limitType: ''
    });

    const searchRef = ref(null);
    /** 搜索 */
    const search = (data) => {
        emit('search', { ...data });
    };

    onMounted(() => {
        fetchTypeList();
    });
</script>
