<template>
    <!-- 子表单 -->
    <div class="box">
        <slot></slot>
        <div class="add">
            <el-link type="primary" icon="el-icon-plus" @click="add">{{listItem.value}}</el-link>
        </div>
    </div>
</template>

<script>
import mixin from '../mixin.js'
export default {
    name: 'FormSubform',
    props: {
        listItem: { type: Object, default: () => ({}) },
        formItem: { type: Object, default: () => ({}) }
    },
    mixins: [mixin],
    methods: {
        // 添加（复制第一个并清除 value 和单选关联重置）
        add () {
            const valueCopy = JSON.parse(JSON.stringify(this.formItem.value[0]))
            for (let index in valueCopy) {
                const item = valueCopy[index]
                item.value = /string|number/.test(typeof item.value) ? '' : Array.isArray(item.value) ? [] : {}
                if (item.type === 'radio') {
                    const option = this.listItem.list.find(n => n.uuid === item.uuid).option
                    this.radioHide(valueCopy, option.list, option.checked) // mixin
                }
            }
            this.formItem.value.push(valueCopy)
        }
    }
}
</script>

<style lang="less" scoped>
.box {
    border: 1px solid #DCDFE6;
    .add {
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top: 1px solid #DCDFE6;
        .el-link {
            line-height: 20px;
        }
    }
}
</style>
