<template>
    <div>
        <form-cell class="box" :class="{ list: item.list.length }" :item="item">
            <slot></slot>
        </form-cell>
        <div class="cell add" v-if="item.list && item.list.length">
            <i class="el-icon-plus"></i>{{item.value}}
        </div>
    </div>
</template>

<script>
export default {
    components: {
        FormCell: () => import('./FormCell')
    },
    props: {
        item: { type: Object, default: () => ({}) }
    }
}
</script>

<style lang="less" scoped>
@import "~styles/varibles.less";
/deep/ .cell.box > .right {
    width: 100%;
    display: block;
}
/deep/ .list {
    padding: 0;
    border-top: none;
    background-color: #F2F6FC;
    & > .label {
        padding-left: 15px;
    }
    /deep/ .item {
        margin-top: 0 !important;
        border-bottom: none !important;
    }
}
.add {
    color: @textBuleColor;
    justify-content: center;
    i {
        line-height: 40px;
        margin-right: 5px;
    }
}
</style>
