import {
    inject,
    observer
} from 'mobx-react';
import {
    WeaUpload,
    WeaDialog,
    WeaSelect,
    WeaNewScroll,
    WeaMoreButton,
    WeaSearchGroup,
} from 'ecCom'
import {
    WeaSwitch
} from 'comsMobx';
import {
    Row,
    Col,
    Spin,
    Button,
} from 'antd'
import {
    IEVersion
} from '../../public/pulic-func'
import {
    i18n
} from '../../public/i18nbk';

import ImportResult from './ImportResult'
import ImportHistory from './ImportHistory'

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

    getForm = () => {
        const {
            hrmImportCommon
        } = this.props, {
            importDialog
        } = hrmImportCommon, {
            condition,
            form,
        } = importDialog, {
            isFormInit
        } = form;

        let _arr = [];
        isFormInit && condition.map((c, i) => {
            let arr = [];
            if (i == 0) { //基本信息
                c.items.map((field, index) => {
                    let key = field.domkey[0];
                    let url = field.value ? field.value : '';
                    arr.push({
                        com: (
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@u3pg88@${index}`}>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@d34g4z@${index}`} span={1} offset={6}>
                                    <div className='hrm-import-circle' style={{paddingLeft: IEVersion() == '-1' ? 6 : 7, marginTop: 15}}>
                                        <div style={{paddingTop: (IEVersion() == '11' || IEVersion() == 'edge') ? 5 : 2}}>{index + 1}</div>
                                    </div>
                                </Col>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@h1ko2g@${index}`} span={14}>
                                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@3swbr9@${index}`} style={{marginTop: 15}}>
                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@55ag3k@${index}`} span={field.labelcol}>{field.label.length > 14 ? `${field.label.slice(0, 14)}...` : field.label}:</Col>
                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@qyfneu@${index}`} span={field.fieldcol}>
                                            {this.getElements(key, url, field)}
                                        </Col>
                                    </Row>
                                </Col>
                            </Row>
                        ),
                        colSpan: 1,
                    })
                })
            }
            if (i == 1) { //导入说明
                c.items.map((field, index) => {
                    let p = field.value;
                    let url = field.link ? field.link : '';
                    arr.push({
                        com: (
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@r3k3h0@${index}`}>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@2yfn9e@${index}`} span={1} offset={6} style={{marginTop: 15}}>
                                    <div className='hrm-import-circle' style={{paddingLeft: IEVersion() == '-1' ? 6 : 7, paddingLeft: (index > 8) ? 3 : 6}}>
                                        <div style={{paddingTop: (IEVersion() == '11' || IEVersion() == 'edge') ? 5 : 2}}>{index + 1}</div>
                                    </div>
                                </Col>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@z6k87f@${index}`} span={14} style={{marginTop: 15}}>
                                    {this.getImportInstructions(p, url, index)}
                                </Col>
                            </Row>
                        ),
                        colSpan: 1
                    })
                })
            }
            _arr.push(<div style={{color: '#484848'}}><WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@a3rsv9@${i}`} needTigger={true} title={c.title} showGroup={c.defaultshow} items={arr} col={1} /></div>)
        });
        return _arr;
    }

    getElements = (key, url, field) => {
        const {
            hrmImportCommon
        } = this.props, {
            setExcelFileNo,
            importDialog,
            setSelectedValue
        } = hrmImportCommon, {
            templetName,
            selectedValue,
            form,
        } = importDialog, {
            upStatus,
            list
        } = this.state;

        let dom;
        if (key == 'templet') {
            dom = this.getTempletElement(url, selectedValue, templetName);
        } else if (key == 'excelfile') {
            dom = (<div>
                        <div style={{float: 'left',marginTop: -10}}>
                            <WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@lcyams`}
                                uploadUrl='/api/doc/upload/uploadFile'
                                category='string'
                                limitType='xls'
                                datas={upStatus === 'uploaded'  ? list : []}
                                onChange={(id, list) => {this.setState({list:list}); setExcelFileNo(id)}}
                                onUploading={status => this.handleUploading(status)}
                            >
                                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@hmrzeo`}>{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>)
        } else {
            dom = <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@tsac1c`} fieldConfig={field} form={form} formParams={form.getFormParams()} />
        }
        return dom;
    }

    getImportInstructions = (val, url, index) => {
        const {
            hrmImportCommon
        } = this.props, {
            importDialog
        } = hrmImportCommon, {
            templetName,
            selectedValue,
        } = importDialog;

        let p;
        if (index == 0) {
            let dom = this.getTempletElement(url, selectedValue, templetName);
            p = (<p>{i18n.label.downloadTemplateFirst()}：{dom}</p>);
        } else {
            p = (<p>{val}</p>);
        }
        return p;
    }

    getTempletElement = (url, selectedValue, templetName) => {
        let dom;
        let urlArr = url.split(';');
        if (urlArr.length > 1) {
            if (selectedValue == 'workcode') {
                dom = <a href={urlArr[0]}>{templetName}</a>;
            } else {
                dom = <a href={urlArr[1]}>{templetName}</a>;
            }
        } else {
            dom = <a href={url}>{templetName}</a>;
        }
        return dom
    }

    handleUploading = (status) => {
        this.setState({
            upStatus: status
        });

        if (status == 'uploading') {
            this.setState({
                list: []
            });
        }
    }

    getButtons = () => {
        const {
            hrmImportCommon
        } = this.props, {
            submitExcel,
            queryRecord,
            importDialog,
        } = hrmImportCommon, {
            upStatus
        } = this.state;

        return [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@2fiagn@1`} type="primary" disabled={upStatus === 'uploaded' ? false : true} onClick={() => submitExcel()}>{i18n.button.submit()}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@q04w9s@2`} type="primary" onClick={() => queryRecord()}>{i18n.button.importHistoryQuery()}</Button>),
            (<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@oizt3r@3`} />)
        ];
    }

    render() {
        const {
            hrmImportCommon
        } = this.props, {
            importDialog,
            resultDialog,
            recordDialog,
            setImportDialogVisible
        } = hrmImportCommon, {
            visible,
            title,
            loading
        } = importDialog, {
            width,
            height,
        } = this.state;

        return (
            <div>
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@79hw9l`}
                    title={title}
                    icon="icon-coms-hrm"
                    iconBgcolor="#217346"
                    visible={visible}
                    closable={true}
                    onCancel={() => setImportDialogVisible(false) }
                    buttons={this.getButtons()}
                    style={{width: width, height: height}}
                    onChangeHeight={(h) => this.setState({height: h})}
                >
                    <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@qa42zo`} spinning={loading}>
                        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@vcz1bi`} height={height}>
                            {this.getForm()}
                        </WeaNewScroll>
                    </Spin>
                </WeaDialog>
                {resultDialog.visible && <ImportResult ecId={`${this && this.props && this.props.ecId || ''}_ImportResult@fd6jt3`} />}
                {recordDialog.visible && <ImportHistory ecId={`${this && this.props && this.props.ecId || ''}_ImportHistory@weby4j`} />}
            </div>
        )
    }
}