import {
    WeaDialog,
} from 'ecCom'

import {
    Row,
    Col,
    Icon,
    Spin,
    Button,
} from 'antd'

import {
    WeaTableNew
} from 'comsMobx';

const WeaTable = WeaTableNew.WeaTable;

export default class ImportResult extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            width: 540,
            height: 340,
        }
    }

    getButtons() {
        const {
            datas
        } = this.props;

        let arr = [];
        datas.btn && datas.btn.map(btn => {
            arr.push(<Button disabled>{btn.btnName}</Button>);
        })

        return arr;
    }

    reRenderColumns(c) {
        c.forEach(item => {
            if (item.dataIndex == 'operatedetail') {
                item.render = function(text, record) {
                    return <span style={{color: '#FF0000'}}>{text}</span>
                }
            }
        });
    }

    render() {
        const {
            title,
            visible,
            onCancel,
            tableStore,
            datas,
            loading
        } = this.props, {
            width,
            height
        } = this.state;

        return (
            <WeaDialog
                title={title}
                icon="icon-coms-hrm"
                iconBgcolor="#217346"
                visible={visible}
                closable={true}
                hasScroll={true}
                onCancel={() => onCancel()}
                buttons={this.getButtons()}
                style={{width: width, height: height}}
                onChangeHeight={(h) => this.setState({height: h})}
            >
                <Spin spinning={!loading}>
                    <div style={{padding: datas.sessionkey ? '30px 0' : '160px 0'}}>
                        <Row>
                            <Col span={2} offset={8}>
                                {loading ? <div style={{width: 30,height: 30,borderRadius: 25, padding: 8, backgroundColor: datas.icon == 'check' ? '#54D3A2' : '#FF0000' }}>
                                                              <Icon type={`${datas.icon}`} style={{color: '#fff' }} />
                                                          </div> : ''}
                            </Col>
                            <Col span={8}><p style={{paddingTop: 6}}>{datas.resultHint}</p></Col>
                        </Row>  
                    </div>
                    
                    {datas.sessionkey ? <div>
                    	                    <div style={{padding: '20px 0'}}>
                    	                        <Row>
                                                    <Col span={20} offset={2}><p style={{color: '#FF0000'}}>{datas.failHint}</p></Col>
                                                </Row>
                    	                    </div>
                                            <Row>
                                                <Col span={22} offset={1}>
                                                    <WeaTable 
                                                        comsWeaTableStore={tableStore}
                                                        bordered
                                                        needScroll={true}
                                                        pagination={false}
                                                        scroll={{y: 146}}
                                                        rowKey={(record,index) => index}
                                                        getColumns={c => this.reRenderColumns(c)}
                                                    />
                                                 </Col>
                                            </Row>
                                        </div> : ''
                    }
                </Spin>
            </WeaDialog>
        )
    }
}