import {
    inject,
    observer
} from 'mobx-react'
import {
    toJS
} from 'mobx'
import {
    WeaTableEditable
} from 'ecCom'
import {
    Spin
} from 'antd'

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

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

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

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