import {
    WeaNewScroll,
    WeaSearchGroup,
    WeaMoreButton,
    WeaDialog,
    WeaLocaleProvider
} from 'ecCom'
import {
    inject,
    observer,
} from 'mobx-react'
import {
    Spin,
    Button,
    Pagination,
    Steps
} from 'antd'

import {
    WeaSwitch,
    WeaTableNew
} from 'comsMobx'

import {
    i18n
} from '../../public/i18n';

const Step = Steps.Step;
import StepContent from './stepContent';
import "../../style/common.less";
const getLabel = WeaLocaleProvider.getLabel;

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

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

    up() {
        const {newImport} = this.props;
        let {current,steps} = newImport;
        current = current - 1;
        newImport.current = current;
    }

    render() {
        const {
            newImport
        } = this.props, {
            current,
            visible,
            steps
        } = newImport,{
            width,
            height,
            title
        } = this.state;

        const buttons = [
            ((current === 0 || current === steps.length - 1) ? '' : <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@jd6baw`} type="primary" onClick={() => this.up()}>{getLabel(547218,'上一步')}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@jd6baw`} type="primary" onClick={() => this.next()}>{current === steps.length - 1 ? i18n.button.close() : i18n.button.nextStep()}</Button>),
        ];
        
        const labelSteps = [
            { title: `${getLabel(547216,'设置导入字段')}`},
            { title: `${getLabel(547217,'获取导入模板')}`},
            { title: `${getLabel(547221,'导入结果')}`}
          ];

        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@1txk5f`}
                className="new-edit-wrapper"
                title={title}
                icon="icon-coms-upload"
                iconBgcolor="#217346"
                visible={visible}
                closable={true}
                hasScroll={true}
                onCancel={() => newImport.init()}
                buttons={buttons}
                style={{ width: width, height: height }}
                initLoadCss
            >
                <div style={{ marginTop: 24 }}>
                    <Steps current={current}>
                        {labelSteps.map((s, i) => <Step key={i} title={s.title} description={s.description} />)}
                    </Steps>
                </div>
                <div style={{ padding: 24 }}>
                    <StepContent ecId={`${this && this.props && this.props.ecId || ''}_StepContent@633i8k`}/>
                </div>

            </WeaDialog>
        )
    }
}