<template>
    <van-field :name="data.id" :label="data.name" :rules="[{validator: validator}]">
        <template #input>
            <van-radio-group v-model="modelName" direction="horizontal" @change="change">
                <van-radio v-for="(item,index) in data.answer" :key="index" :name="item.answer ||item.name">{{item.name}}</van-radio>
            </van-radio-group>
        </template>
    </van-field>
</template>

<script>
import {
    ref,
    reactive,
    getCurrentInstance,
    onMounted
} from "vue"

export default {
    props: {
        data: {
            type: Object
        },
        validator: {
            type: Function
        }
    },
    setup(props,ctx) {
        const {
            parent
        } = getCurrentInstance();
        const {
            answer
        } = reactive(props).data, modelName = ref(ctx.attrs.modelValue);
        const {
            data: formData
        } = parent.parent.parent.proxy;
        const hideRelations = () => {
            let relationsIds = [];
            answer.forEach(item => {
                if (item.relationsIds) {
                    relationsIds = relationsIds.concat(item.relationsIds)
                }
            });
            [...new Set(relationsIds)].map(id => {
                let form = formData.find(a => a.id == id);
                form.isHide = true;
            });
        }
        const change = () => {
            hideRelations();
            const {
                relationsIds = []
            } = answer.find(b => (b.answer?b.answer:b.name) == modelName.value) || {};
            relationsIds.map(id => {
                let form = formData.find(a => a.id == id);
                if (form) {
                    form.isHide = false;
                }

            });
        }
        onMounted(() => {
            change()
        })
        return {
            modelName,
            change
        }
    }
}
</script>

<style lang="less" scoped>
:deep(.van-radio--horizontal) {
    min-height: 40px;
}

.van-radio-group--horizontal,
.van-checkbox-group--horizontal {
    justify-content: flex-start;
}
</style>
