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

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

    //组件单独使用时，需要此方法。
    componentDidMount() {
        // this.props.hrmRecruitLibrary.getTableEditDatas();
    }

    render() {
        const {
            hrmRecruitLibrary
        } = this.props, {
            tableEdit,
            exportDatas,
            iconButtons,
            setRef,
            setSelectedRowKeys,
            clickTabPane,
            tabPane,
        } = hrmRecruitLibrary, {
            table,
        } = tableEdit, {
            key
        } = tabPane;

        return (<div style={{padding:'0 25px'}}>
                    <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@4us1dt`} onChange={(key) => clickTabPane(key) } type="card" tabBarExtraContent={iconButtons} activeKey={key}>
                        {toJS(table).map((t, index) => {
                            const str = index.toString();
                            return (
                                <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@jeo8hf@${index}`} tab={t.title} key={str}>
                                    {
                                       ( key == str) && <WeaTableEditable ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEditable@c5xlxs@${index}`} 
                                            ref={com => setRef(com,'tb')}
                                            columns={t.columns}
                                            datas={t.datas}
                                            showTitle={false}
                                            onRowSelect={selectedRowsKey => setSelectedRowKeys(selectedRowsKey)}
                                            onChange={datas => exportDatas(datas, index)}
                                        /> 
                                    }
                                </TabPane>
                            )
                        })
                    }</Tabs>
                </div>)
    }
}