import React from 'react';
import { WeaSteps, WeaDatePicker, WeaInput } from 'ecCom';
import { Upload, Icon, Modal, Row, Col, Button } from "antd";

import ModalStep1 from './modalStep1'
import ModalStep2 from './modalStep2'
import ModalStep3 from './modalStep3'

const Dragger = Upload.Dragger;

const Step = WeaSteps.Step;

export default class ImportModal extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            currentStep: 0,
        }
    }
    nextStep() {
        this.setState({
            currentStep: this.state.currentStep + 1
        })
    }

    preStep() {
        this.setState({
            currentStep: this.state.currentStep - 1
        })
    }
    render() {
        const { currentStep } = this.state;

        return (
        <Modal title="数据导入" visible={this.props.visiable}
          onCancel={this.props.onCancel}
          width={850} className="cumDeductModal"
          footer={null}
        >
            <div className="stepWrapper">
                <WeaSteps current={currentStep}>
                    <Step description="上传Excel" />
                    <Step description="数据预览" />
                    <Step description="导入数据" />
                </WeaSteps>
            </div>
            {
                this.state.currentStep == 0 && (<ModalStep1 onStep1Next={() => {this.nextStep();}}/>)
            }
            {
                this.state.currentStep == 1 && (<ModalStep2 onStep2Next={() => {this.nextStep()}} onStep2Pre={() => {this.preStep()}}/>)
            }
            {
                this.state.currentStep == 2 && (<ModalStep3 onFinish={() => {}}/>)
            }
            
        </Modal>
        )
    }
}