/**
 * 明细表单业务组件,支持以下业务场景:
 * 1. 批量附件
 * 2. 表单
 * 3. 明细表格
 * 
 * <pro-form-list prop="?" @itemChange="({index, row, arrs, vm}) => {}" renderItem="Function">
 *    <pro-input uiType="text" prop="?"/>
 *    <!-- 数据源支持 多实例数据源 -->
 *    <pro-select prop="?" uiType="list" :dataSource="?">
 *    <pro-form-list-item prop="?">
 *       <template slot-scope="{row, arrs}">
 *          自定义明细条目内容
 *       </template>
 *    </pro-form-list-item>
 * </pro-form-list>
 * 
 * @author xiufu.wang
 */
import AddRegion from './regions/add'
import FormsRegion from './regions/form'
import FilesRegion from './regions/files'
import TablesRegion from './regions/tables'
import getDatas from './mixins/get-datas'
import omit from 'mars-pro/src/pro/omit';

export default {
    name: 'ProFormList',
    componentName: 'ProFormList',
    components: {
        AddRegion,
        FormsRegion,
        FilesRegion,
        TablesRegion
    },
    inheritAttrs: false,
    mixins: [getDatas],
    props: {
        disabled: Boolean,
        // form | tables | files
        type: {
            type: String,
            default: 'form'
        }
    },
    computed: {
        isDisabled() {
            return this.disabled || (this.elForm || {}).disabled;
        }
    },
    methods: {
        renderSlots() {
            const slots = omit(this.$slots || {}, ['default'])
            return Object.keys(slots).map(item => (
                <template slot={item}>{slots[item]}</template>
            ))
        },
        renderList() {
            const _datas = {
                props: {
                    datas: this.listDatas,
                    prop: this.prop,
                    model: (this.elForm.model || {}),
                    dataKey: this.dataKey,
                    ...this.$attrs
                },
                ref: this.type,
                attrs: this.$attrs,
                scopedSlots: this.$scopedSlots,
                on: this.$listeners
            }
            if (this.type === 'form') {
                return <forms-region {..._datas} key="form">
                    {this.renderSlots()}
                    {this.$slots.default}
                </forms-region>
            }

            if (this.type === 'files') {
                return <files-region {..._datas}  key="files">
                    {this.renderSlots()}
                    {this.$slots.default}
                </files-region>
            }

            if (this.type === 'tables') {
                return <tables-region {..._datas}  key="tables">
                    {this.renderSlots()}
                    {this.$slots.default}
                </tables-region>
            }
        }
    },
    render() {
        const _datas = {
            'class': {
                'pro-form-list': true
            },
            attrs: this.$attrs,
            on: this.$listeners,
            scopedSlots: this.$scopedSlots,
        }
        return (
            <div {..._datas}>
                {
                    this.renderList()
                }
                {
                    (!(this.enableDetail) && this.$attrs.disableAddAction !== true) && (<add-region key="add" {..._datas} ref="add" />)
                }
            </div>
        )
    }
}