import {
    inject,
    observer
} from 'mobx-react';
import {
    WeaUpload,
    WeaDialog,
    WeaFormItem,
    WeaSearchGroup,
    WeaNewScroll,
    WeaSelect,
    WeaInput
} from 'ecCom'

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

import {
    WeaSwitch
} from 'comsMobx'
import React from 'react'
import ImportResult from './ImportResult'
import ImportHistory from './ImportHistory'
import {
    WeaLocaleProvider
} from 'ecCom';
import {
    i18n
} from '../../public/i18n';
import {addContentPath} from '../../util/index.js'
import '../../style/common.less'

@inject('hrmImportResource')
@observer
export default class ImportResource extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        const {
            hrmImportResource
        } = this.props;
        hrmImportResource.list = [];
    }

    getCircle() {
        let style = {
            width: 20,
            height: 20,
            backgroundColor: '#D8D8D8',
            webkitBorderRadius: 10,
            mozBorderRadius: 10,
            msBorderRadius: 10,
            oBorderRadius: 10,
            borderRadius: 10,
            //paddingLeft: 6,
            textAlign: 'center',
        }
        return style;
    }

    getForm() {
        const {
            hrmImportResource
        } = this.props;
        const {
            condition
        } = hrmImportResource;
        let _arr = [];

        condition.map((c, i) => {
            let arr = [];
            if (i == 0) { //基本信息
                c.items.map((field, index) => {
                    arr.push({
                        com: (
                            <div>
                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@m9t2kn@${index}`}>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@rc5who@${index}`} span={1} offset={4}>
                                        <div style={{ marginTop: 15 }}>
                                            <div style={this.getCircle()}><div style={{ paddingTop: 2 }}>{index + 1}</div></div>
                                        </div>
                                    </Col>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@f1sc6s@${index}`} span={14}>
                                        <div style={{ marginTop: 15 }}>
                                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@5gsx6o@${index}`}>
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@qrdxst@${index}`} span={field.labelcol} style={{overflow: 'hidden',whiteSpace: 'nowrap',textOverflow: 'ellipsis'}} title={field.label}>{field.label}:</Col>
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@7jy5um@${index}`} span={field.fieldcol}>
                                                    {this.getDom(field)}
                                                </Col>
                                            </Row>
                                        </div>
                                    </Col>
                                </Row>
                            </div>
                        ),
                        colSpan: 1,
                    })
                })
            }
            if (i == 1) { //导入说明
                c.items.map((field, index) => {
                    arr.push({
                        com: (
                            <div>
                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@hz50xl@${index}`}>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@fgfbrv@${index}`} span={1} offset={4} style={{ marginTop: 15 }}>
                                        <div style={this.getCircle()}>
                                            <div style={{ paddingTop: 2 }}>{index + 1}</div>
                                        </div>
                                    </Col>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@5rom81@${index}`} span={17} style={{ marginTop: 15 }}>
                                        {this.getIllustration(field.value, field.link, index, field)}
                                    </Col>
                                </Row>
                            </div>
                        ),
                        colSpan: 1
                    })
                })
            }
            _arr.push(<div><WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@bo47pp@${i}`} needTigger={true} title={c.title} showGroup={c.defaultshow} items={arr} col={1} /></div>)

        });
        return _arr;
    }

    getDom(field) {
        const {
            hrmImportResource
        } = this.props;
        const {
            templetName,
            filelist,
            getTemplateUrl,
            importParams
        } = hrmImportResource;
        let dom;
        let domkey = field.domkey;
        if (domkey[0] == 'templet') {
            dom = <a href={addContentPath(field.value)}>{i18n.label.importTemplate()}</a>;
        } else if (domkey[0] === 'exportData') {
            const href = hrmImportResource.operateType === 'add' ? field.otherParams.fileVal[0].add : field.otherParams.fileVal[0].update;
            if(hrmImportResource.importType === 'matrix'){
                dom = <a onClick={() => {
getTemplateUrl(hrmImportResource.otherParams.matrixid, hrmImportResource.operateType, importParams)
}}>{i18n.label.importTemplate()}</a>
            }else
                dom = <a href={addContentPath(href)}>{i18n.label.importTemplate()}</a>;
        } else if (domkey[0] == 'excelfile' || domkey[0] == 'importfile') {
            dom = (<div>
                <div style={{ float: 'left', marginTop: -10 }}>
                    <WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@iu8n01`}
                        uploadUrl='/api/doc/upload/uploadFile'
                        category='string'
                        limitType='xls,xlsx'
                        maxFilesNumber={1}
                        datas={filelist}
                        {...field.otherParams}
            onChange = {
                (ids, list) => {
                    this.setFileId(ids, list)
                }
            } >
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@87232v`}>{i18n.button.selectFile()}</Button>
                    </WeaUpload>
                </div>
                <div style={{ float: 'left', paddingLeft: 10 }}>
                    {filelist.length == 0 ? <p>{i18n.label.noFileSelected()}</p> : filelist.map(file => <p>{file.filename}</p>)}
                </div>
            </div>)
        } else if (domkey[0].indexOf('keyField') > -1) {
            const vals = field.options.filter(v => v.selected == true);
            let val = '';
            vals.length>0 &&  (val = vals[0].key);
            dom = <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@yzc92h`}
                style={{width: 200}}
                options={field.options}
                value={hrmImportResource.importParams[domkey[0]] || field.value || val}
                onChange={(v) => {
 hrmImportResource.setParam(domkey[0], v)
}}
            />
        } else if (domkey[0] == 'importType') {
            dom = <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@holhhb`}
                style={{width: 200}}
                options={field.options}
                value={hrmImportResource.operateType}
                onChange={(v) => {
 hrmImportResource.operateType = v 
}}
            />
        } else {
            dom = <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@rg6f3p`} hasBorder={true} viewAttr={1} value={field.value}/>
        }
        return dom;
    }

    getIllustration(val, url, index, link) {
        const {
            hrmImportResource
        } = this.props;
        const {
            templetName,
            getTemplateUrl,
            importParams
        } = hrmImportResource;
        let p;
        if (index == 0) {
            if (url instanceof Object) {
                const href = hrmImportResource.operateType === 'add' ? url.add : url.update;
                let dom;
                if(hrmImportResource.importType === 'matrix'){
                    dom = <a onClick={() => {
getTemplateUrl(hrmImportResource.otherParams.matrixid, hrmImportResource.operateType, importParams)
}}>{i18n.label.importTemplate()}</a>
                }else
                    dom = <a href={addContentPath(href)}>{i18n.label.importTemplate()}</a>;
                p = (<p>{i18n.label.downLoadTemplete()}：{dom}</p>);
            } else if (url != null) {
                if(hrmImportResource.importType === 'matrix'){
                    p = (<p>{i18n.label.downLoadTemplete()}：<a onClick={() => {
getTemplateUrl(hrmImportResource.otherParams.matrixid, hrmImportResource.operateType)
}}>{i18n.label.importTemplate()}</a></p>);
                }else
                    p = (<p>{i18n.label.downLoadTemplete()}：<a href={addContentPath(url)}>{i18n.label.importTemplate()}</a></p>);
            } else {
                p = (<p><div dangerouslySetInnerHTML={{ __html: val }} /></p>);
            }
        } else {
            p = (<p><div dangerouslySetInnerHTML={{ __html: val }} /></p>);
        }
        return p;
    }

    setFileId(ids, list) {
        const {
            hrmImportResource
        } = this.props;
        hrmImportResource.excelfile = ids;
        hrmImportResource.filelist = list;
    }

    onUploading(s) {
        const {
            hrmImportResource
        } = this.props;
        hrmImportResource.status = s;
    }

    submit() {
        const {
            hrmImportResource
        } = this.props; 
        hrmImportResource.saveImport({}, () => {
            this.refs.scroll && this.refs.scroll.scrollToLast()
        });
    }

    cancel() {
        const {
            hrmImportResource,
            onClose
        } = this.props;
        hrmImportResource.visible = false
        hrmImportResource.init();
        onClose && onClose();
    }

    importHistoryQuery() {
        const {
            hrmImportResource
        } = this.props;
        hrmImportResource.visibleHistory = true;
        hrmImportResource.getImportHistory();
    }

    render() {
        const {
            hrmImportResource,
            mainTitle,
			importLog,
			viewLog,
			viewLogTitle,
        } = this.props;
        const {
            title,
            visible,
            titleResult,
            visibleResult,
            importResultColumns,
            importProcessLogDatas,
            failnum,
            succnum,
            importResultTip,
            importResultStore,
            importStatus,
            errorInfo,
            setScrollRef,
            single,
            showLoadingSpin,
            condition
        } = hrmImportResource;
        const buttons = condition.length ? [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ip7b32`} type="primary" onClick={() => this.submit()}>{i18n.button.submit()}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@itogxo`} type="primary" onClick={() => this.importHistoryQuery()}>{importLog || i18n.button.importHistoryQuery()}</Button>),
        ] : [];

        let dialogHeight = window.innerHeight - 150;
        if (dialogHeight > 560) dialogHeight = 560;

        return (
            <div>
                {
                    single && visible ? 
                    <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@mkyv9k`} height={'100%'} ref="scrollBar">
                        {this.getForm()}
                    </WeaNewScroll>
                    :
                    <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@s55z5q`}
                        title={mainTitle || title}
                        icon="icon-coms-hrm"
                        iconBgcolor="#217346"
                        visible={visible}
                        closable={true}
                        onCancel={() => this.cancel()}
                        buttons={buttons}
                        style={{ width: 870, height: dialogHeight }}
                        moreBtn={{datas:condition ? [{
                            key: '1',
                            content: i18n.button.submit(),
                            icon: <i className='icon-coms-Preservation'/>,
                            onClick: () => this.submit(),
                        },
                        {
                            key: '2',
                            content: importLog || i18n.button.importHistoryQuery(),
                            icon: <i className='icon-coms-Preservation'/>,
                            onClick: () => this.importHistoryQuery(),
                        }
                        ]: []}}
                    >
                        { condition.length ? (
                            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@1fvd3j`} spinning={showLoadingSpin}>
                                <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@2908z2`} height={dialogHeight} ref="scrollBar">
                                    {this.getForm()}
                                </WeaNewScroll>
                            </Spin>
                        ): ''}
                    </WeaDialog>
                }
                
                <ImportResult ecId={`${this && this.props && this.props.ecId || ''}_ImportResult@66ry2w`} {...this.props} />
                <ImportHistory ecId={`${this && this.props && this.props.ecId || ''}_ImportHistory@72i8fh`} {...this.props} />
            </div>
        )
    }
}