<!-- 显示 4 列的搜索表单, 操作按钮所在的 el-col 自动计算 offset 保证一直靠右 -->
<template>
    <pro-form
        :class="isShowLabel ? 'search-form' : 'search-form no-label-search'"
        ref="proFormRef"
        :model="form"
        :items="items"
        @updateValue="setFieldValue"
        :grid="{ span: gridSpan }"
        :rowProps="{ gutter: 12 }"
        :footer="true"
        :footer-props="{ labelWidth: '0px' }"
        :footer-col-props="{
            span: 4,
            offset: 0
        }"
    >
        <template #footer>
            <div class="flex-1 flex items-center">
                <el-button
                    style="width: 90px"
                    type="primary"
                    @click="search(false)"
                    >查询</el-button
                >
                <el-button style="width: 90px" type="info" @click="reset"
                    >重置</el-button
                >
            </div>
        </template>
    </pro-form>
</template>

<script setup>
    import { ref, computed } from 'vue';
    import { useFormData } from '@/utils/use-form-data';
    import ProForm from '@/components/ProForm/index.vue';
    import { ArrowDown, ArrowUp } from '@/components/icons';
    /** 列数 */
    const gridNumber = 6;
    /** 列数转为 el-col 的 span 值 */
    const gridSpan = 24 / gridNumber;

    const emit = defineEmits(['search']);
    /** 表单实例 */
    const proFormRef = ref(null);

    const props = defineProps({
        items: {
            // 表单项
            type: Array,
            default: () => []
        },
        initKeys: {
            // 初始化时需要显示的字段
            type: Object,
            default: () => ({})
        },
        offset: {
            // 操作按钮的 offset 值
            type: Number,
            default: 0
        },
        isShowLabel: {
            // 是否显示 label
            type: Boolean,
            default: false
        }
    });

    /** 表单数据 */
    const [form, resetFields, assignFields, setFieldValue] = useFormData({
        ...props.initKeys
    });

    /** 搜索 */
    const search = (isReset = false) => {
        emit('search', { ...form, isReset, search: true });
    };

    function setData(data) {
        Object.keys(data).forEach((key) => {
            setFieldValue(key, data[key]);
        });
    }

    /** 重置 */
    const reset = () => {
        resetFields();
        search(true);
    };

    defineExpose({
        setData
    });
</script>
