<template>
    <view class="h-90 fx-row items-center gap-40">
        <component :is="wrapper" v-for="c in conditions" :prop="c.config.key">
            <mx-picker v-model="queryParams[c.config.key]" :data="c.list"
                       :label-prop="c.config.keyName" :value-prop="c.config.keyValue"
                       :empty-display="c.config.title" class="!flex-none"/>
        </component>
    </view>
</template>

<script setup>
import {computed} from 'vue'
import {useInjectSearchModel} from "@/components/mx-condition/useSearchModelInjection";
import UvFormItem from "@/uni_modules/uv-form/components/uv-form-item/uv-form-item.vue";

const {conditions, queryParams, needValidation} = useInjectSearchModel()
// 这里考虑到结构一致性，如果有校验需要，则用uv-form-item包装一下
const wrapper = computed(() => needValidation.value ? UvFormItem : 'div')
</script>

<style scoped>

</style>