/**
 * 新增区域
 * @author xiufu.wang
 */
import ProLayoutContaner from 'mars-pro/packages/pro-layout-contaner'
import ProDataSource from 'mars-pro/packages/pro-datasource'
import { getAllChildren, getAllProps, cloneElement } from 'mars-pro/src/pro/vue-util';
import { objectProperty } from 'mars-pro/src/pro/util'
import { noop } from 'mars-pro/src/utils/util';
import { isEmptyNumber } from 'mars-pro/src/pro/number-format'
import omit from 'mars-pro/src/pro/omit';
import Vue from 'vue'
import { renderVnodeTemplate } from '../util'

export default {
    name: 'FormsRegion',
    componentName: 'FormsRegion',
    components: {
        ProLayoutContaner,
        ProDataSource
    },
    props: {
        // 数据
        datas: Array,
        prop: String,
        model: Object,
        dataKey: String,
        //用于注入渲染控制逻辑
        renderItem: {
            type: Function,
            default: noop
        }
    },
    methods: {
        renderClose(r, index) {
            if (this.$parent.enableDetail === true) {
                return null
            }
            if (this.$scopedSlots.actionContent) {
                return this.$scopedSlots.actionContent({ removeItem: this.$parent.removeItem, index })
            }
            return (
                <div class="form-region-list-item--action" flex="none" {...{ attrs: { 'data-index': index } }} on-click={this.$parent.removeItem}>
                    <i class="close el-icon-close"></i>
                </div>
            )
        },
        renderContent() {
            const _datas = {
                props: {
                    gutter: 5,
                    ...this.$attrs
                },
                attrs: {
                    gutter: 5,
                    ...this.attrs
                },
                'class': {
                    'form-region--content': true
                }
            }
            const that = this
            const childrens = getAllChildren(this).filter(r => !!(r.tag))
            return (this.datas || []).map((r, index) => {
                // 使用数据源唯一主键当成key
                const _id = r[this.dataKey || 'id']
                const _itemKey = isEmptyNumber(_id) ? index : _id
                let currentRowComponentInstances = {}
                return (
                    <ProLayoutContaner class="form-region-list-item" align="bottom" key={_itemKey}>
                        <div flex="auto" class="form-region-list-item--wapper">
                            <ProLayoutContaner {..._datas}>
                                {
                                    childrens.map((c, jindex) => {
                                        return renderVnodeTemplate(that, c, index, jindex, currentRowComponentInstances)
                                    })
                                }
                            </ProLayoutContaner>
                        </div>
                        {this.renderClose(r, index)}
                    </ProLayoutContaner>
                )
            })
        }
    },
    render() {

        return (
            <div class="form-region-list">
                {
                    this.renderContent()
                }
            </div>
        )
    }
}