<template>
    <div class="input-radio" :class="data.prepend||data.prependIcon?'el-input--prefix':data.appendIcon||data.append?'el-input--suffix':'' "  >
        <div  class="el-input-group__prepend" v-if='data.prepend'>{{data.prepend}}</div>
        <div  class="el-input-group__prepend" v-else-if="data.prependIcon">
            <el-button :icon="data.prependIcon" />
        </div>
        <el-radio-group clearable @change="change" placement="top" :name="data.id" v-model='parent.formModel[data.id]' autocomplete='off' :disabled='data.disabled||!!parent.readonly' :placeholder='data.placeholder' >
            <el-radio class="radio" :key="key" :label="list.value || list.answer || list.name" v-for="(list , key)  in data.answer">{{list.name}}</el-radio>
        </el-radio-group>
        <div  class="el-input-group__append"  v-if="data.appendIcon">
            <el-button :icon="data.appendIcon" />
        </div>
        <div class="el-input-group__append" v-else-if="data.append">
            {{data.append}}
        </div>
    </div>
</template>
<script>
export default {
    props: {
        data: {
            type: Object
        },
        validator: {
            type: Function
        },
        _p: {
            type: Object
        },
    },
    data(){
        const parent = this._p;
        return {
            parent
        }
    },
    methods:{
        hideRelations(){
            let relationsIds = [];
            this.data.answer.forEach(item => {
                if (item.relationsIds) {
                    relationsIds = relationsIds.concat(item.relationsIds)
                }
            });
            [...new Set(relationsIds)].map(id => {
                let form = this.parent.data.find(a => a.id == id);
                form.isHide = true;
            });
        },
        change() {
            this.hideRelations();
            const {
                relationsIds = []
            } = this.data.answer.find(b => (b.value ? b.value : b.name) == this.parent.formModel[this.data.id]) || {};
            relationsIds.map(id => {
                let form = this.parent.data.find(a => a.id == id);
                if (form) {
                    form.isHide = false;
                }
            });
            if (this.data.change) {
                this.data.change();
            }

        }
    }
}
</script>

<style lang="less" scoped>
.input-radio{
    align-items: center;
    :deep(.van-radio--horizontal) {
        min-height: 40px;
    }
    .van-radio-group--horizontal,
    .van-checkbox-group--horizontal {
        justify-content: flex-start;
    }
    &.el-input--prefix{
        :deep(.el-input__wrapper){
            border-radius: 0 4px 4px 0;
        }
        /deep/ .el-radio-group{
            border: 1px solid #DCDFE6;
        }
    }
    /deep/ .el-radio-group{
        display: flex;
        align-items: center;
        height:10px;
        padding:15px;
        border-radius: 4px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
     &.el-input--suffix{
        :deep(.el-input__wrapper){
            border-radius: 0 4px 4px 0;
        }
    }
    .el-input-group__prepend,.el-input-group__append{
        --el-input-border-color:#dcdfe6;
        min-width:56px;
        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        align-items: center;
        justify-content: center;
        display: flex;
    }
    :deep(.el-cascader){
        .el-input--suffix,.el-input .el-input__inner,.el-input{
            height:100%;
        }
    }
}
</style>
