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

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

import { WeaSwitch } from 'comsMobx'
import React from 'react'
import ImportResult from './ImportResult'
import ImportHistory from './ImportHistory'
import {WeaLocaleProvider} from 'ecCom';
import {addContentPath} from '../../util/index.js';
import {AlertPage} from '../../public/learn.js';
const getLabel = WeaLocaleProvider.getLabel;

@inject('hrmImportOrg')
@observer
class ImportOrg extends React.Component {
    constructor(props) {
        super(props);
    }

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

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

    getForm() {
        const { hrmImportOrg } = this.props;
        const { condition } = hrmImportOrg;
        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={4}>
                                        <div style={{ marginTop: 15 }}>
                                            <div style={this.getCircle()}><div style={{ paddingTop: 2 }}>{index + 1}</div></div>
                                        </div>
                                    </Col>
                                    <Col span={14}>
                                        <div style={{ marginTop: 15 }}>
                                            <Row>
                                                <Col span={field.labelcol}  style={{overflow: 'hidden',whiteSpace: 'nowrap',textOverflow: 'ellipsis'}} title={field.label}>{field.label}:</Col>
                                                <Col 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>
                                    <Col span={1} offset={4} style={{ marginTop: 15 }}>
                                        <div style={this.getCircle()}>
                                            <div style={{ paddingTop: 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(field) {
        const { hrmImportOrg } = this.props;
        const { templetName, filelist } = hrmImportOrg;
        let dom;
        let domkey = field.domkey;
        if (domkey[0] == 'templet') {
            dom = <a href={addContentPath(field.value)}>{templetName}</a>;
        } else if (domkey[0] == 'excelfile') {
            dom = (<div>
                <div style={{ float: 'left', marginTop: -10 }}>
                    <WeaUpload
                        uploadUrl='/api/doc/upload/uploadFile'
                        category='string'
                        limitType='xls'
                        maxFilesNumber={1}
                        datas={filelist}
                        onChange={(ids, list) => { this.setFileId(ids, list) }}
                    >
                        <Button>选择文件</Button>
                    </WeaUpload>
                </div>
                <div style={{ float: 'left', paddingLeft: 10 }}>
                    {filelist.length == 0 ? <p>未选择任何文件</p> : filelist.map(file => <p>{file.filename}</p>)}
                </div>
            </div>)
        } else if (domkey[0] == 'keyField') {
            dom = <WeaSelect
                options={field.options}
                value={field.value}
                onChange={(v) => { hrmImportOrg.keyField = v }}
                vw
            />
        } else if (domkey[0] == 'importType') {
            dom = <WeaSelect
                options={field.options}
                value={field.value}
                onChange={(v) => { hrmImportOrg.importType = v }}
            />
        }
        return dom;
    }

    getIllustration(val, url, index) {
        const { hrmImportOrg } = this.props;
        const { templetName } = hrmImportOrg;
        let p;
        if (index == 0) {
            p = (<p>请先下载模板：<a href={addContentPath(url)}>{templetName}</a></p>);
        } else {
            p = (<p><div dangerouslySetInnerHTML={{ __html: val }} /></p>);
        }
        return p;
    }

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

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

    submit() {
        const { hrmImportOrg } = this.props;
        hrmImportOrg.saveImport();
    }

    cancel() {
        const { hrmImportOrg } = this.props;
        hrmImportOrg.filelist = [];
        hrmImportOrg.visible = false
    }

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

    render() {
        const { hrmImportOrg } = this.props;
        const { title, visible ,condition} = hrmImportOrg;

        const buttons = [
            (<Button type="primary" onClick={() => this.submit()}>提交</Button>),
            (<Button type="primary" onClick={() => this.importHistoryQuery()}>历史导入记录</Button>),
            (<Button disabled>更多>></Button>)
        ];

        let dialogHeight = window.innerHeight-250;
        if(dialogHeight>560)dialogHeight = 560;
        
        return (
            <div>
                <WeaDialog
                    title={title}
                    icon="icon-coms-hrm"
                    iconBgcolor="#217346"
                    visible={visible}
                    closable={true}
                    onCancel={() => this.cancel()}
                    buttons={buttons}
                    style={{ width: 870, height: dialogHeight }}
                >
                { condition.length ? (
                    <WeaNewScroll height={dialogHeight} ref="scrollBar">
                        {this.getForm()}
                    </WeaNewScroll>
                ) : <AlertPage />}
                </WeaDialog>
                <ImportResult {...this.props} />
                <ImportHistory {...this.props} />
            </div>
        )
    }
}

export default ImportOrg