import {
    inject,
    observer
} from 'mobx-react'
import {
    toJS
} from 'mobx'
import {
    WeaTableEditable
} from 'ecCom'
import {
    Spin
} from 'antd' //组件单独使用时，需要加Spin

@inject('hrmRecruitInfo')
@observer
export default class TableEdit extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.hrmRecruitInfo.getTableEditDatas();
    }

    componentWillUnmount() {
        this.props.hrmRecruitInfo.resetTableEditDatas();
    }

    render() {
        const {
            hrmRecruitInfo
        } = this.props, {
            tableEdit,
            exportDatas,
            setRef,
            setSelectedRowKeys,
        } = hrmRecruitInfo, {
            table,
            loading,
        } = tableEdit;

        if (loading) {
            return (
                <div className='hrm-loading-center-small'>
                    <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@5bnv4k`} spinning={loading}></Spin>
                </div>
            )
        } else {
            return toJS(table).map((t, index) => {
                return (
                    <WeaTableEditable ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEditable@7ruou6@${index}`} 
                        ref={com => setRef(com)}
                        columns={t.columns}
                        datas={t.datas}
                        showTitle={false}
                        onRowSelect={selectedRowsKey => setSelectedRowKeys(selectedRowsKey)}
                        onChange={datas => exportDatas(datas, index)}
                    />
                )
            })
        }


    }
}