import {
    WeaNewScroll,
    WeaSearchGroup,
    WeaMoreButton,
    WeaDialog
} from 'ecCom'
import {
    inject,
    observer,
} from 'mobx-react'
import {
    Spin,
    Button,
    Pagination,
    Steps,
    Upload,
    Icon,
    Row,
    Col,
    Progress
} from 'antd'

import {
    WeaSwitch,
    WeaTableNew
} from 'comsMobx'

import {
    i18n
} from '../public/i18n';
import { addContentPath } from '../util/index.js'

const Step = Steps.Step;
const Dragger = Upload.Dragger;
const WeaTable = WeaTableNew.WeaTable;


@inject("importDialog")
@observer
export default class ImportDialog extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            width: 800,
            height: 600,
            title: i18n.label.dataImport(),
        }
    }

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

    getIllustration(val, url, index, link) {
        let p;
        if (index == 0) {
            p = (<p>{i18n.label.downLoadTemplete()}: <a href={addContentPath(url)}>{i18n.label.importTemplate()}</a></p>);
        } else {
            p = (<p><div dangerouslySetInnerHTML={{ __html: val }} /></p>);
        }
        return p;
    }

    next() {
        const { importDialog } = this.props;
        let { current, steps } = importDialog;
        current = current + 1;
        if (current === steps.length) {
            current = 0;
            importDialog.init();
        }
        importDialog.current = current;
        current === steps.length - 1 && importDialog.startImport();
    }

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

        condition.map((c, i) => {
            let arr = [];
            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;
    }

    setFileId(fileInfo) {
        const { importDialog } = this.props;
        fileInfo.file.response && importDialog.setExcelfile(fileInfo.file.response.data.fileid);
        importDialog.filelist = fileInfo.fileList;
    }

    reRenderColumns(c) {
        c.forEach(item => {
            if (item.dataIndex == 'operatedetail') {
                item.render = function (text, record) {
                    return <span style={{ color: '#FF0000' }}>{text}</span>
                }
            }
        });
    }

    render() {
        const {
            importDialog
        } = this.props, {
            importVisible,steps,current, pvisable, percent, failnum, succnum, importResultTip, importResultStore, importStatus, loading, date
        } = importDialog, {
            width,
            height,
            title
        } = this.state;

        const buttons = [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@jd6baw`} type="primary" onClick={() => this.next()}>{current === steps.length - 1 ? '关闭' : '开始导入'}</Button>),
        ];


        const props = {
            name: 'file',
            action: '/api/doc/upload/uploadFile',
            accept: '.xls,.xlsx',
            multiple:false
            
        };

        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@1txk5f`}
                title={title}
                icon="icon-coms-upload"
                iconBgcolor="#217346"
                visible={importVisible}
                closable={true}
                hasScroll={true}
                onCancel={() => importDialog.init()}
                buttons={buttons}
                style={{ width: width, height: height }}
            >
                <div style={{ marginTop: 24 }}>
                    <Steps current={current}>
                        {steps.map((s, i) => <Step key={i} title={s.title} description={s.description} />)}
                    </Steps>
                </div>
                <div style={{ padding: 24 }}>
                    {
                        current == 0 && <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@2908z2`} ref="scrollBar">
                            <Dragger 
                            {...props}
                            onChange={
                                (fileInfo) => {
                                    this.setFileId(fileInfo)
                                }
                            }
                            >
                                <div style={{ padding: '25px 0' }}>
                                    <p className="ant-upload-drag-icon">
                                        <Icon type="inbox" />
                                    </p>
                                    <p className="ant-upload-text">{i18n.label.importTip1()}</p>
                                    <p className="ant-upload-hint">{i18n.label.importTip2()}</p>
                                </div>
                            </Dragger>
                            {this.getForm()}
                        </WeaNewScroll>
                    }
                    {
                        current == 1 && <div>
                            {
                                importStatus == 'over' && <div className="hrm-import-result-icon" style={{ paddingTop: failnum == 0 ? 100 : 15 }}>
                                    <div style={{ width: 30, height: 30, borderRadius: 25, padding: 8, display: 'inline-block', backgroundColor: succnum > 0 ? '#54D3A2' : '#FF0000' }}>
                                        <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@2fblod`} type={succnum > 0 ? 'check' : 'cross'} style={{ color: '#fff' }} />
                                    </div><span style={{ paddingLeft: 5 }}>{importResultTip}</span>
                                </div>
                            }
                            {
                                failnum > 0 &&
                                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@h7l6fo`}
                                    comsWeaTableStore={importResultStore}
                                    bordered
                                    needScroll={true}
                                    scroll={{ y: 330 }}
                                    getColumns={c => this.reRenderColumns(c)}
                                />
                            }
                            <WeaDialog
                                title={i18n.message.importProgress()}
                                onCancel={() => importDialog.pvisable = false}
                                visible={pvisable}
                                style={{ width: 300, height: 50 }}
                            >
                                <div style={{ "padding": "15px" }}>
                                    <Progress percent={percent} strokeWidth={7} />
                                </div>
                            </WeaDialog>
                        </div>
                    }
                </div>

            </WeaDialog>
        )
    }
}