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

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
        } = importDialog;

        let _arr = [];
        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@bee4ld@${index}`}>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@1wldfb@${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@r91cj7@${index}`} span={14}>
                                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@8ojr90@${index}`} style={{marginTop: 15}}>
                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@qbk8xn@${index}`} span={field.labelcol}>{field.label && (field.label.length > 14 ? `${field.label.slice(0, 14)}...` : field.label) }:</Col>
                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@jolw03@${index}`} span={field.fieldcol}>
                                            {this.getElements(key, url)}
                                        </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@upb61o@${index}`}>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@rgq75z@${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@0fzh6q@${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@qbff6g@${i}`} needTigger={true} title={c.title} showGroup={c.defaultshow} items={arr} col={1} /></div>)
        });
        return _arr;
    }

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

        let dom;
        if (key == 'keyField') {
            const options = [{
                key: "workcode",
                selected: true,
                showname: getLabel('714', "编号"),
                disabled: false
            }, {
                key: "loginid",
                selected: false,
                showname: getLabel(16126, '登录名'),
                disabled: false
            }];

            dom = <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@5f6m89`}
                    options={options}
                    value={selectedValue}
                    onChange={value => setSelectedValue(value)}
                />
        }
        if (key == 'templet') {
            dom = this.getTempletElement(url, selectedValue, templetName);
        }
        if (key == 'excelfile') {
            dom = (<div>
                        <div style={{float: 'left',marginTop: -10}}>
                            <WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@g8kzos`}
                                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@3qand6`}>{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>)
        }
        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) => {
        let dom;
        let urlArr = url.split(';');
        if (urlArr.length > 1) {
            if (selectedValue == '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@5vekgs`} type="primary" disabled={upStatus === 'uploaded' ? false : true} onClick={() => submitExcel()}>{ getLabel(615, '提交')}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ckyo6w`} type="primary" onClick={() => queryRecord()}>{getLabel(24644, '历史导入记录')}</Button>),
            (<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@w70zp6`} />)
        ];
    }

    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@c15iqf`}
                    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@b8huv1`} spinning={loading}>
                        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@c369yv`} height={height}>
                            {this.getForm()}
                        </WeaNewScroll>
                    </Spin>
                </WeaDialog>
                {resultDialog.visible && <ImportResult ecId={`${this && this.props && this.props.ecId || ''}_ImportResult@afheim`} />}
                {recordDialog.visible && <ImportHistory ecId={`${this && this.props && this.props.ecId || ''}_ImportHistory@idykbt`} />}
            </div>
        )
    }
}