import {
    inject,
    observer
} from 'mobx-react'
import {
    WeaProgress
} from 'ecCom'
import {
    WeaTableNew
} from 'comsMobx'
const WeaTable = WeaTableNew.WeaTable;

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

    componentDidMount() {
        this.props.hrmApplicant.getTableInfo();
    }

    componentWillUnmount() {
        this.props.hrmApplicant.resetTable();
    }

    reRenderColumns = (columns) => {
        columns.map((c, i) => {
            if (c.dataIndex == 'count') { //TODO
                c.render = (t, r) => {
                    const {
                        count,
                        total
                    } = r;

                    return (<WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@a6w1fw@${i}`} 
                                percent={count/total*100} 
                                format={() => count}
                                strokeColor={'#6FBCEA'}
                            />)
                }
            }
        })
    }

    render() {
        const {
            hrmApplicant,
        } = this.props, {
            table,
        } = hrmApplicant, {
            tableStore
        } = table;

        return (
            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@0j4u0j`} 
                comsWeaTableStore={tableStore}
                hasOrder={true}
                needScroll={true}
                getColumns={this.reRenderColumns}
            />
        )

    }
}