import {
    WeaUpload,
    WeaDialog,
    WeaSearchGroup,
    WeaMoreButton,
    WeaFormItem,
} from 'ecCom'

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

import {
    IEVersion
} from '../../public/pulic-func'

import {
    i18n
} from '../../public/i18n';

export default class Import extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            width: 870,
            height: 510,
            isPanelShow: false,
            list: [],
            upStatus: '',
        }
    }

    setPanelStatus(bool) {
        this.setState({
            isPanelShow: bool,
            list: []
        });
    }

    getForm() {
        const {
            condition
        } = this.props;

        let _arr = [];
        condition.map((c, i) => {
            let arr = [];
            if (i == 0) { //基本信息
                c.items.map((field, index) => {
                    arr.push({
                        com: (
                            <div>
                            <Row>
                                <Col span={1} offset={6}>
                                  <div style={{paddingTop: 29}}>
                                    <div className='hrm-import-circle' style={{paddingLeft: IEVersion() == '-1' ? 6 : 7}}>
                                        <div style={{paddingTop: (IEVersion() == '11' || IEVersion() == 'edge') ? 5 : 2}}>{index + 1}</div>
                                    </div>
                                  </div>
                                </Col>
                                <Col span={14}>
                                    <div style={{paddingTop: 15}}>
                                            <WeaFormItem
                                                label={field.label}
                                                labelCol={{span: field.labelcol}}
                                                wrapperCol={{span: field.fieldcol}}
                                            >
                                                {this.getDom(field.domkey, field.value)}
                                            </WeaFormItem>
                                        </div>
                                </Col>
                            </Row>
                        </div>
                        ),
                        colSpan: 1,
                    })
                })
            }
            if (i == 1) { //导入说明
                c.items.map((field, index) => {
                    arr.push({
                        com: (
                            <div>
                        <Row>
                                    <Col span={1} offset={6} style={{marginTop: 15}}>
                                        <div className='hrm-import-circle' style={{paddingLeft: IEVersion() == '-1' ? 6 : 7}}>
                                            <div style={{paddingTop: (IEVersion() == '11' || IEVersion() == 'edge') ? 5 : 2}}>{index + 1}</div>
                                        </div>
                                    </Col>
                                    <Col span={14} style={{marginTop: 15}}>
                                        {this.getIllustration(field.value, field.link, index)}
                                    </Col>
                                </Row>
                            </div>
                        ),
                        colSpan: 1
                    })
                })
            }
            _arr.push(<div><WeaSearchGroup needTigger={true} title={c.title} showGroup={c.defaultshow} items={arr} col={1} /></div>)

        });
        return _arr;
    }

    getDom(domkey, url) {
        const {
            setExcelFileNo,
            templetName
        } = this.props, {
            upStatus,
            list
        } = this.state;

        let dom;
        if (domkey == undefined) {
            return;
        }
        if (domkey[0] == 'templet') dom = <a href={url} style={{display: 'block', paddingTop: 7}}>{templetName}</a>;
        if (domkey[0] == 'excelfile') {
            dom = (<div style={{paddingTop: 6}}>
                        <div style={{float: 'left',marginTop: -10}}>
                            <WeaUpload
                                uploadUrl='/api/doc/upload/uploadFile'
                                category='string'
                                limitType='xls'
                                datas={upStatus === 'uploaded'  ? list : []}
                                onChange={(id, l) => {this.setList(l); setExcelFileNo(id)}}
                                onUploading={s => this.onUploading(s)}
                            >
                                <Button>{i18n.button.selectFile()}</Button>
                            </WeaUpload>
                        </div>
                        <div style={{float: 'left', paddingLeft: 10}}>
                            { list.length == 0 ? <p>{i18n.label.noFileSelected()}</p> : list.map(file => <p>{file.filename}</p>) }
                        </div>
                    </div>)
        }
        return dom;
    }

    getIllustration(val, url, index) {
        const {
            templetName
        } = this.props;

        let p;
        if (index == 0) {
            p = (<p>{i18n.label.downloadTemplateFirst()}<a href={url}>{templetName}</a></p>);
        } else {
            p = (<p>{val}</p>);
        }
        return p;
    }

    onUploading(s) {
        const {
            list
        } = this.state;

        this.setUpStatus(s);
        if (s == 'uploading') {
            this.setList([]);
        } else {
            this.setList(list);
        }
    }

    setList(list) {
        this.setState({
            list: list
        });
    }

    setUpStatus(upStatus) {
        this.setState({
            upStatus: upStatus
        });
    }

    getButtons() {
        const {
            submit,
            importHistoryQuery
        } = this.props;

        return [
            (<Button type="primary" onClick={() => submit()}>{i18n.button.submit()}</Button>),
            (<Button type="primary" onClick={() => importHistoryQuery()}>{i18n.button.importHistoryQuery()}</Button>),
            (<WeaMoreButton />)
        ];
    }

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

        return (
            <WeaDialog
                title={title}
                icon="icon-coms-hrm"
                iconBgcolor="#217346"
                visible={visible}
                closable={true}
                onCancel={() => { onCancel(); this.setPanelStatus(false) } }
                buttons={this.getButtons()}
                style={{width: width, height: height}}
                onChangeHeight={(h) => this.setState({height: h})}
            >
                {
                    loading ?   <div className='hrm-loading-center-small'>
                                   <Spin spinning={loading}></Spin>
                                </div>
                            :   <div>
                                    {this.getForm()}
                                </div>
                }
            </WeaDialog>
        )
    }
}