<template>
    <!-- 子表单 -->
    <cell-box class="box">
        <slot></slot>
        <div class="add" @click="add" v-if="applicable === 'Form'">
            <x-icon type="ios-plus-empty" size="24"></x-icon>
            {{ listItem.value }}
        </div>
        <div class="add" v-else>
            <x-button @click.native="add">
                <x-icon type="ios-plus-empty" size="26"></x-icon>
                {{ listItem.value }}
            </x-button>
        </div>
    </cell-box>
</template>

<script>
import { CellBox, XButton } from 'vux'
import common from '@/common/formRender/mixin/common.js'
export default {
    name: 'FormSubform',
    mixins: [common],
    components: { CellBox, XButton },
    inject: ['applicable'],
    props: {
        listItem: { type: Object, default: () => ({}) },
        formItem: { type: Object, default: () => ({}) }
    },
    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 {
    padding: 0;
    display: block;
    &::before {
        display: none;
    }
    .add {
        color: #409EFF;
        height: 32px;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        .vux-x-icon {
            fill: #409EFF;
            margin-top: -2px;
        }
    }
}
</style>
