/**
 * 类似于extjs BorderLayout,提供5个区域 left top right bottom center
 * @author xiufu.wang
 */
import ProAffix from 'mars-pro/packages/pro-affix'
import { hasClass, on, off, getStyle, removeClass, addClass } from 'mars-pro/src/utils/dom'
import { objectProperty, isObject } from 'mars-pro/src/pro/util'
import RegionCollapseBar from './region-collapse-bar.jsx'
const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16));

export default {
    name: 'BorderLayout',
    componentName: 'BorderLayout',
    components: {
        ProAffix,
        RegionCollapseBar
    },
    props: {
        centerStyle: Object,
        centerCls: String,
        enableCollapseLeft: {
            type: Boolean,
            default: false
        },
        collapsedLeft: {
            type: Boolean,
            default: false
        },
        enableCollapseTop: {
            type: Boolean,
            default: false
        },
        collapsedTop: {
            type: Boolean,
            default: false
        },
        enableCollapseBottom: {
            type: Boolean,
            default: false
        },
        collapsedBottom: {
            type: Boolean,
            default: false
        },
        enableCollapseRight: {
            type: Boolean,
            default: false
        },
        collapsedRight: {
            type: Boolean,
            default: false
        },
        affixTop: {
            type: [Boolean, Object],
            default: false
        },
        affixLeft: {
            type: [Boolean, Object],
            default: false
        },
        affixRight: {
            type: [Boolean, Object],
            default: false
        },
        affixBottom: {
            type: [Boolean, Object],
            default() {
                return false
            }
        }
    },
    data() {
        return {
            placeHolderLeft: false,
            placeHolderRight: false,
            placeHolderLeftWidth: 0,
            placeHolderRightWidth: 0,
            collapse: {
                left: this.collapsedLeft,
                top: this.collapsedTop,
                bottom: this.collapsedBottom,
                right: this.collapsedRight,
            }
        }
    },
    methods: {
        //处理折叠
        handleCollapse(pos) {
            this.calcRegionSize()
            rAF(() => {
                 this.collapse[pos] = !this.collapse[pos]
            })
        },
        onFixedLeft(v, affixWidth) {
            this.placeHolderLeft = v
            this.placeHolderLeftWidth = affixWidth
        },
        onFixedRight(v, affixWidth) {
            this.placeHolderRight = v
            this.placeHolderRightWidth = affixWidth
        },
        calcRegionSize() {
            this.regionSize = {
                top: objectProperty(this.$refs, (this.affixTop && this.$slots.top ? '.$el.' : '') + '.regiontop.firstChild.firstChild.offsetHeight', null),
                left: objectProperty(this.$refs, (this.affixLeft && this.$slots.left ? '.$el.' : '') + 'regionleft.firstChild.firstChild.offsetWidth', null),
                right: objectProperty(this.$refs, (this.affixRight && this.$slots.right ? '.$el.' : '') + 'regionright.firstChild.firstChild.offsetWidth', null),
                bottom: objectProperty(this.$refs, (this.affixBottom && this.$slots.bottom ? '.$el.' : '') + 'regionbottom.firstChild.firstChild.offsetHeight', null)
            }
            //更新
            Object.keys(this.regionSize).forEach((k) => {
                if (this.regionSize[k] !== null) {
                    this.$refs['region' + k].style[k === 'top' || k === 'bottom' ? 'height' : 'width'] = this.regionSize[k] + 'px'
                }
            })
        },
        renderRegion(type, enableCollapse, isCollapse) {
            if (!this.$slots[type]) {
                return null
            }
            const _refName = 'region' + type
            const _datas = {
                ref: _refName,
                key: type,
                'class': {
                    region: true,
                    'is-collapse': isCollapse,
                    ['region-' + type]: true
                },
                is: 'div',
                on: {},
                attrs: this.$attrs
            }
            if (this.affixTop !== false && type === 'top') {
                _datas.is = 'pro-affix'
                _datas.props = {
                    ...this.$attrs,
                    ...(isObject(this.affixTop) ? this.affixTop : {})
                    
                }
            }
            if (this.affixLeft !== false && type === 'left') {
                _datas.is = 'pro-affix'
                _datas.props = {
                    ...this.$attrs,
                    ...(isObject(this.affixLeft) ? this.affixLeft : {})
                }
                _datas.on.fixed = this.onFixedLeft
            }
            if (this.affixRight !== false && type === 'right') {
                _datas.is = 'pro-affix'
                _datas.props = {
                    ...this.$attrs,
                    ...(isObject(this.affixRight) ? this.affixRight : {})
                }
                _datas.on.fixed = this.onFixedRight
            }
            if (this.affixBottom !== false && type === 'bottom') {
                _datas.is = 'pro-affix'
                _datas.props = {
                    ...this.$attrs,
                    ...(isObject(this.affixBottom) ? this.affixBottom : {})
                }
            }

            // affix模式下 禁用collapse
            if (this['affix' + (type[0].toLocaleUpperCase()) + type.slice(1)] !== false) {
                enableCollapse = false
            }
            return (
                <component {..._datas}>
                    <div class="region-content">
                        {this.$slots[type]}
                    </div>
                    {enableCollapse && (<RegionCollapseBar position={type} collapsed={isCollapse} onClick={this.handleCollapse} />)}
                </component>
            )
        }
    },
    render() {
        const _datas = {
            'class': {
                'border-layout': true,
                'contaner': true,
                'vertical': true
            }
        }
        const puuid = this.$parent.uuid
        return (
            <div {..._datas}>
                {this.renderRegion('top', this.enableCollapseTop, this.collapse.top)}
                <div class="contaner horizontal" key="contaner">
                    {this.renderRegion('left', this.enableCollapseLeft, this.collapse.left)}
                    {
                        this.placeHolderLeft && (
                            <div class="region region-left" >
                                <div class="region-content">
                                    <div style={{ width: (this.placeHolderLeftWidth - 2) + 'px' }}>left</div>
                                </div></div>)}
                    <div class="contaner region-center" key="center">
                        <div class={['region-content', this.centerCls]} style={this.centerStyle}>{this.$slots.default}</div>
                    </div>
                    {this.renderRegion('right', this.enableCollapseRight, this.collapse.right)}
                    {
                        this.placeHolderRight && (
                            <div class="region region-right" >
                                <div class="region-content">
                                    <div style={{ width: (this.placeHolderRightWidth - 2) + 'px' }}>left</div>
                                </div></div>)}
                </div>
                {this.renderRegion('bottom', this.enableCollapseBottom, this.collapse.bottom)}
            </div>
        )
    }
}