import {
    inject,
    observer
} from 'mobx-react'
import {
    toJS
} from 'mobx'
import {
    Spin
} from 'antd'
import {
    WeaRightMenu,
    WeaNewScroll,
} from 'ecCom'
import {addContentPath} from '../../util/index.js'

@inject('hrmRecruitLibrary') //todo
@observer
export default class Print extends React.Component {
    constructor(props) {
        super(props);
        this.temp = 0;
    }

    componentDidMount() {
        this.props.hrmRecruitLibrary.printApplyInfo(this.props.location.query.id);
    }

    componentDidUpdate(prevProps, prevState) {
        this.temp = this.temp + 1;
        if (this.temp == 2) window.print();
    }

    componentWillUnmount() {
        this.props.hrmRecruitLibrary.resetPrintInfo();
    }

    getTable = () => {
        const {
            hrmRecruitLibrary,
        } = this.props, {
            print
        } = hrmRecruitLibrary, {
            printInfo
        } = print;

        let outterArr = [];
        printInfo.map((item, outterIndex) => {
            Object.values(item)[0].map((data, innerIndex) => {
                if (typeof data === 'string') {
                    if (innerIndex == 0) {
                        outterArr.push(<tr>
                            <td colspan={(outterIndex == 0) ? 4 : 6}>
                               <b>{data}</b>
                            </td>
                            {
                               outterIndex == 0 && <td colspan={2} rowspan={6}>{data && <img src={addContentPath(data)} />}</td>
                            }
                        </tr>);
                    }
                } else if (Array.isArray(toJS(data))) {
                    const len = data.length;
                    outterArr.push(<tr>
                         {data.map((item, index) =>{
                            return <td colspan={(index == len - 1)? 7-len : 1}>{item}</td>
                         })}               
                    </tr>)
                } else {
                    let innerArr = [];
                    const r = Object.entries(data),
                        len = r.length;

                    r.map((arr, outIndex) => {
                        arr.map((item, inIndex) => {
                            innerArr.push(<td colspan={this.getColspan(inIndex,outterIndex, len)} style={this.getStyle(inIndex,outterIndex)}>{item}</td>)
                        })
                    });
                    outterArr.push(<tr>{innerArr.map(td => td)}</tr>);
                }
            })
        })

        return outterArr;

    }

    getColspan = (inIndex, outterIndex, len) => {
        let colspan;
        if (inIndex == 0) {
            colspan = 1
        } else {
            if (outterIndex == 0) {
                colspan = 3
            } else {
                if (len > 1) {
                    colspan = 2
                } else {
                    colspan = 5
                }
            }
        }
        return colspan;
    }

    getStyle = (inIndex, outterIndex) => {
        let style;
        if (inIndex == 0) {
            style = {
                width: 130
            }
        } else {
            if (outterIndex == 0) {
                style = {
                    width: 400
                }
            } else {
                style = {
                    width: 178
                }
            }
        }
        return style;
    }

    render() {
        const {
            hrmRecruitLibrary
        } = this.props, {
            print,
            setRef,
            printDropMenuDatas,
        } = hrmRecruitLibrary, {
            printInfo,
            loading
        } = print;

        if (loading) {
            return (
                <div className='hrm-loading-center'>
                    <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@69o835`} spinning={loading} size='large'></Spin>
                </div>
            )
        } else {
            return (
                <div className='hrm-print'>
                    <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@5gbj1l`} datas={printDropMenuDatas}>
                        <table border={1} cellpadding={0} cellspacing={0} align='center' ref={com => setRef(com)}>
                            {this.getTable().map(dom => dom)}
                        </table>
                    </WeaRightMenu>
                </div>
            )
        }


    }
}