<template>
    <uv-text v-if="groupName" :text="groupName" v-bind="formGroupBinding"/>
    <ai-form-item-template v-for="r in rules" :key="r.fieldName" :render-rule="r">
        <template #text>
            <ai-form-field-text :rule="r"/>
        </template>
        <template #number>
            <ai-form-field-number :rule="r"/>
        </template>
        <template #score>
            <ai-form-field-score :rule="r"/>
        </template>
        <template #picker>
            <ai-form-field-picker :rule="r"/>
        </template>
        <template #eyesight>
            <ai-form-field-eyesight :rule="r"/>
        </template>
        <template #radio>
            <ai-form-field-radio :rule="r"/>
        </template>
        <template #checkbox>
            <ai-form-field-checkbox :rule="r"/>
        </template>
    </ai-form-item-template>
</template>

<script>
import AIFormCommonStyle from "@/pages/ie/components/AIFormCommonStyle";
import AiFormItemTemplate from "@/pages/ie/components/ai-form/items/ai-form-item-template.vue";
import AiFormFieldText from "@/pages/ie/components/ai-form/items/templates/ai-form-field-text.vue";
import AiFormFieldNumber from "@/pages/ie/components/ai-form/items/templates/ai-form-field-number.vue";
import AiFormFieldScore from "@/pages/ie/components/ai-form/items/templates/ai-form-field-score.vue";
import AiFormFieldPicker from "@/pages/ie/components/ai-form/items/templates/ai-form-field-picker.vue";
import AiFormFieldEyesight from "@/pages/ie/components/ai-form/items/templates/ai-form-field-eyesight.vue";
import AiFormFieldRadio from "@/pages/ie/components/ai-form/items/templates/ai-form-field-radio.vue";
import AiFormFieldCheckbox from "@/pages/ie/components/ai-form/items/templates/ai-form-field-checkbox.vue";
import mxConst from "@/common/mxConst";

export default {
    name: "ai-form-item-group",
    components: {
        AiFormFieldCheckbox,
        AiFormFieldRadio,
        AiFormFieldEyesight,
        AiFormFieldPicker, AiFormFieldScore, AiFormFieldNumber, AiFormFieldText, AiFormItemTemplate
    },
    mixins: [AIFormCommonStyle],
    props: {
        category: {
            type: [String, Number],
            default: () => ({})
        },
        rules: {
            type: Array,
            default: () => []
        }
    },
    computed: {
        groupName() {
            const config = Object.values(mxConst.enum.ai.ruleCategory)
            const match = config.find(r => r.value == this.category)
            return match?.formText || ''
        }
    }
}
</script>

<style scoped>

</style>