/**
 * 左右侧边折叠 收缩
 * 参考 from https://github.com/ivanvermeyen/vue-collapse-transition
 * @author xiufu.wang
 */
import ProAffix from 'mars-pro/packages/pro-affix'
import { stopAndPreventDomEvent } from 'mars-pro/src/pro/util';

export default {
    name: 'ProAffixnavCollapseTransition',
    componentName: "ProAffixnavCollapseTransition",
    components: { ProAffix },
    props: {
        // true 收缩、false展开
        show: {
            type: Boolean,
            default: false
        },
        // left | right
        position: {
            type: String,
            default: 'left'
        },
        // trigger 位置 top | center | bottom
        triggerPosition: {
            type: String,
            default: 'top'
        },
        //是否折叠
        collapsed: {
            type: Boolean,
            default: false
        },
        //是否允许折叠  ProCollapseTransition
        allowCollapse: {
            type: Boolean,
            default: true
        },
        //side宽度
        sideWidth: {
            type: String,
            default: '100px'
        }
    },
    data() {
        return {
            collapse: this.allowCollapse === false ? true : this.collapsed
        }
    },
    watch: {
        collapse() {
            if (!this.collapse) { 
                this.$refs.proaffix.$el.style.width = this.sideWidth
            }
        }  
    },
    methods: {
        handleCollapse(e) { 
            stopAndPreventDomEvent(e)
            this.collapse = !this.collapse
        }
    },
    render() {
        const _datas = {
            'class': {
                'pro-affixnav-collapse-transition': true,
                'pro-affixnav-collapse-transition--left': this.position === 'left',
                'pro-affixnav-collapse-transition--right': this.position === 'right'
            }
        }
        const _affixDatas = {
            props: {
                target: '.content',
                ...this.$attrs
            },
            style: {
                width: this.sideWidth
            },
            ref: 'proaffix'
        }

        const _sideDatas = {
            'class': {
                'side': true,
                ['is-' + this.position]: true,
                'is-collapsed': this.collapse
            },
            ref: 'side',
            key: 'side',
            style: {
                width: this.sideWidth
            }
        }
        return (
            <div {..._datas}>
                <div {..._sideDatas}>
                    <ProAffix {..._affixDatas}>
                        <div key="side-content" class={{'side-content': true}} style={{width: this.sideWidth}}>{this.$slots.side}</div>
                        {
                            this.allowCollapse && (
                                <div on-click={this.handleCollapse} key="trigger" class={{ 'affixnav-trigger': true, ['is-' + this.triggerPosition]: true }}>
                                    {this.$slots.trigger}
                                </div>
                            )
                        }
                    </ProAffix>
                    &nbsp;
                </div>
                <div key="content" class="content">{this.$slots.default}</div>
            </div>
        )
    }
}