import {
    WeaSearchGroup,
    WeaTransfer,
    WeaNewScroll,
    WeaSelect,
    WeaUpload,
    WeaDialog,
    WeaInput
} from 'ecCom'
import {
    Spin,
    Button,
    Pagination,
    Steps,
    Row,
    Col,
    Progress,
    Icon
} from 'antd'
import {
    inject,
    observer,
} from 'mobx-react'
import {
    WeaSwitch,
    WeaTableNew
} from 'comsMobx'

import {
    i18n
} from '../../public/i18n';
import { addContentPath } from '../../util/index.js'
import { toJS } from 'mobx';
const WeaTable = WeaTableNew.WeaTable;


@inject("newImport")
@observer
export default class StepDialog extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            selectedKeys: []
        }
    }


    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 {
            newImport
        } = this.props;
        const {
            condition
        } = newImport;
        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 {
            newImport
        } = this.props;
        const {
            filelist
        } = newImport;
        let dom;
        let domkey = field.domkey;
        if (domkey[0] == 'templet') {
            dom = <a href={addContentPath(field.value)}>{i18n.label.importTemplate()}</a>;
        } 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={newImport.importParams[domkey[0]] || field.value || val}
                onChange={(v) => { newImport.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={newImport.operateType}
                onChange={(v) => { newImport.operateType = v }}
            />
        } 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}
                        viewAttr={3}
                        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 style={{marginLeft:10}}>{i18n.label.noFileSelected()}</p> : filelist.map(file => <p>{file.filename}</p>)}
                </div>
            </div>)
        }else {
            dom = <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@rg6f3p`} hasBorder={true} viewAttr={1} value={field.value}/>
        }
        return dom;
    }

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

    getIllustration(val, url, index, link) {
        const {
            newImport
        } = this.props;
        const {
            importParams
        } = newImport;
        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;
    }

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

    render = () => {
        const {
            newImport
        } = this.props, {
            data, selectedKeys, current, pvisable, percent, failnum, succnum, importResultTip, importResultStore, importStatus, loading, date
        } = newImport;



        return (
            <div>
                {
                    current == 0 && <WeaTransfer
                        data={toJS(data)}
                        selectedKeys={toJS(selectedKeys)}
                        onChange={(keys, datas) => {
                            newImport.setSelectedKeys(keys);
                            newImport.setSelectData(datas);
                        }}
                    />
                }
                {
                    current == 1 && <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@2908z2`} ref="scrollBar">
                        {this.getForm()}
                    </WeaNewScroll>
                }
                {
                    current == 2 && <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="导入进度"
                            onCancel={() => newImport.pvisable = false}
                            visible={pvisable}
                            style={{ width: 300, height: 50 }}
                        >
                            <div style={{ "padding": "15px" }}>
                                <Progress percent={percent} strokeWidth={7} />
                            </div>
                        </WeaDialog>
                    </div>
                }
            </div>

        )
    }
}