import {
    inject,
    observer
} from 'mobx-react';
import {
    WeaUpload,
    WeaDialog,
    WeaSelect,
    WeaNewScroll,
    WeaMoreButton,
    WeaSearchGroup,
    WeaLocaleProvider,
} from 'ecCom'
import {
    Row,
    Col,
    Spin,
    Button,
} from 'antd'
import {
    WeaSwitch
} from 'comsMobx';
import {
    IEVersion
} from '../util/pure-util'
import{addContentPath} from '../../../pc4mobx/hrm/util/index.js'
import '../style/import.css'
const getLabel = WeaLocaleProvider.getLabel;

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

@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@lqmqqp@${index}`}>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@s5d1wh@${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@ed7vvh@${index}`} span={14}>
                                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@6oa9qd@${index}`} style={{marginTop: 15}}>
                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@z1fh07@${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@unrwmn@${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@75e1nc@${index}`}>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@3atkon@${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@1tk1gi@${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@7pw6ua@${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@ocityg`}
                                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@p2j232`}>{getLabel(125333, '选择文件')}</Button>
                            </WeaUpload>
                        </div>
                        <div style={{float: 'left', paddingLeft: 10}}>
                            { list.length == 0 ? <p>{getLabel(384040, '未选择任何文件')}</p> : list.map(file => <p>{file.filename}</p>) }
                        </div>
                    </div>)
        } else {
            dom = <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@8n7q4y`} 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>{getLabel(383083, '请先下载模板')}：{dom}</p>);
        } else {
            p = (<p>{val}</p>);
        }
        return p;
    }

    getTempletElement = (url, selectedValue, templetName) => {
        const {
            importDialog
        } = this.props.hrmImportCommon, {
            form
        } = importDialog;

        const keyField = form.getFormParams().keyField;
        let dom;
        let urlArr = url.split(';');
        if (urlArr.length > 1) {
            if (keyField == 'workcode') {
                dom = <a href={addContentPath(urlArr[0]) }>{templetName}</a>;
            } else {
                dom = <a href={addContentPath(urlArr[1]) }>{templetName}</a>;
            }
        } else {
            dom = <a href={addContentPath(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@0iqdw4`} type="primary" disabled={upStatus === 'uploaded' ? false : true} onClick={() => submitExcel()}>{ getLabel(615, '提交')}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@pedeve`} type="primary" onClick={() => queryRecord()}>{getLabel(24644, '历史导入记录')}</Button>),
            (<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@83468s`} />)
        ];
    }

    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@rdfgw5`}
                    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@anieq7`} spinning={loading}>
                        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@p50dbq`} height={height}>
                            {this.getForm()}
                        </WeaNewScroll>
                    </Spin>
                </WeaDialog>
                {resultDialog.visible && <ImportResult ecId={`${this && this.props && this.props.ecId || ''}_ImportResult@y4sw0y`} hrmImportCommon={hrmImportCommon}/>}
                {recordDialog.visible && <ImportHistory ecId={`${this && this.props && this.props.ecId || ''}_ImportHistory@da0na4`} hrmImportCommon={hrmImportCommon}/>}
            </div>
        )
    }
}