import '../../style/outSignV2.less';
import React, { Component } from 'react';
import {observer,inject} from 'mobx-react';
import {WeaTop, WeaLeftRightLayout, WeaRightMenu} from 'ecCom';
import LeftCom from './LeftCom';
import Content from './Content';

@inject('outsideV2')
@observer
export default class OutsideV2 extends Component{
    componentDidMount () {
        this.init(this.props);
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.location.key !== nextProps.location.key) {
            this.init(nextProps);
        }
    }

    init = props => {
        props.outsideV2.init();
    }

    render(){
        const {outsideV2: store} = this.props;
        const {topProps, tabProps} = store;
        const {selectedKey} = tabProps;
        return (
            <div className='outSignV2'>
                <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@ilbm6r`} {...topProps}>
                    <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@qxs2dl`} datas={topProps.dropMenuDatas}>
                        <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@p4rjgo`} 
                            showBtn={false} leftWidth={250} showLeft={selectedKey != '2'} 
                            leftCom={(<LeftCom ecId={`${this && this.props && this.props.ecId || ''}_LeftCom@100bx0`} store={store} />)}>
                            <Content ecId={`${this && this.props && this.props.ecId || ''}_Content@w3bycr`} store={store} />
                        </WeaLeftRightLayout>
                    </WeaRightMenu>
                </WeaTop>
            </div>
        )
    }
}