/**
 * @author xiufu.wang
 */
export default {
    name: 'RegionCollapseBar',
    componentName: 'RegionCollapseBar',
    props: {
        position: String,
        collapsed: Boolean
    },
    methods: {
        handleClick(e) { 
            this.$emit('click', this.position)
        }  
    },
    render() { 
        const _datas = {
            'class': {
                'collapse-bar': true,
                [this.position]: true
            },
            on: {
                click: this.handleClick
            }
        }
        return (
            <div {..._datas}>
               <div class={['show-tigger', { [this.position]: true }]}>
                    {
                        (this.position === 'left') && (this.collapsed === true ? <i class="el-icon-arrow-right"></i> : <i class="el-icon-arrow-left"></i>)
                    }
                    {
                        (this.position === 'right') && (this.collapsed === true ? <i class="el-icon-arrow-right"></i> : <i class="el-icon-arrow-left"></i>)
                    }
                    {
                        (this.position === 'top') && (this.collapsed === true ? <i class="el-icon-arrow-right"></i> : <i class="el-icon-arrow-left"></i>)
                    }
                    {
                        (this.position === 'bottom') && (this.collapsed === true ? <i class="el-icon-arrow-right"></i> : <i class="el-icon-arrow-left"></i>)
                    }
                </div>
            </div>
        )
    }
}