import React from 'react';
import { Button, Tabs, Card, Pagination, Row, Col, Spin } from 'antd';
import { inject, observer } from 'mobx-react';
import { WeaNewScroll, WeaRightMenu, WeaLeftRightLayout } from 'ecCom';
import { toJS } from "mobx";
import ItemList from "./ItemList";
import TreeList from "./TreeList";
import ProjectBoardBase from "./ProjectBoardBase";
import { WeaLocaleProvider } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
@inject("projectBoardStore")
@observer
class ProjectBoard extends React.Component {
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        const { projectBoardStore } = this.props;
        projectBoardStore.initList();
    }

    componentWillReceiveProps(nextProps){
        const keyOld = this.props.location.key;
        const keyNew = nextProps.location.key;
        if(keyOld !== keyNew) {
            const {projectBoardStore} = nextProps;
            projectBoardStore.initList();
        }
    }

    render() {
        const { projectBoardStore } = this.props;
        const { prjCardStore,showLeft,showMid,onCollapse } = projectBoardStore;
        return (
            <div className="prj-board-page">
                <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@krpaeh`} spinning={ prjCardStore.loading || projectBoardStore.loading}>
                <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@p334hu`}
                    isNew={true}
                    col={3}
                    leftWidth={255}
                    leftCom={<TreeList ecId={`${this && this.props && this.props.ecId || ''}_TreeList@rqj0zo`} title={getLabel('63',"类型")} key={this.props.location.key} store={projectBoardStore} />}
                    midWidth={320}
                    midCom={(<ItemList ecId={`${this && this.props && this.props.ecId || ''}_ItemList@9m0gj9`} title={getLabel(101, "项目")} store={projectBoardStore} />)}
                    showLeft={showLeft}
                    showMid={showMid}
                    onCollapse={(side,bool)=>{onCollapse(side,bool)}}
                >
                    <ProjectBoardBase ecId={`${this && this.props && this.props.ecId || ''}_ProjectBoardBase@tyisxu`} projectBoardStore={projectBoardStore} />
                </WeaLeftRightLayout>
                </Spin>
            </div>
        )
    }


}

export default ProjectBoard;