import React from "react";
import { WeaSteps } from "ecCom";
import { message, Modal, Upload } from "antd";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";

import ModalStep1 from "./modalStep1";
import ModalStep2 from "./modalStep2";
import ModalStep3 from "./modalStep3";

const Dragger = Upload.Dragger;

const Step = WeaSteps.Step;

@inject("taxAgentStore")
@observer
export default class ImportModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fileId: ""
    };

    this.props.init && this.props.init();
  }

  componentWillMount() { // 初始化渲染页面
    // const { taxAgentStore: {fetchTaxAgentOption} } = this.props;
    // fetchTaxAgentOption();
  }

  nextStep() {
    const { step } = this.props;
    this.props.setStep(step + 1);
  }

  preStep() {
    const { step } = this.props;
    this.props.setStep(step - 1);
  }

  validateDate() {
    // const { params } = this.props;
    let flag = true;
    try {
      // params && Object.keys(params).forEach((key) => {
      //   if (!params[key] || params[key] == "") {
      //     message.warning("请完善导入选项");
      //     throw new Error("请完善导入选项");
      //   }
      // });
    } catch (e) {
      flag = false;
    }

    return flag;
  }

  handleStep1Next() {
    if (!this.validateDate()) {
      return;
    }
    if (this.state.fileId) {
      this.props.setStep(1);
    } else {
      message.warning("请上传文件");
    }
  }

  handlePreviewDate() {
    const { fileId } = this.state;
    const { params, isStandingBook } = this.props;
    if(!isStandingBook){
      this.props.previewImport({
        ...params,
        imageId: fileId
      });
    }else{
      this.props.previewImport({
        imageId: fileId
      });
    }
  }

  hanleImportData() {
    const { fileId } = this.state;
    const { params, isStandingBook } = this.props;
    if(!isStandingBook){
      this.props.importFile({
        ...params,
        imageId: fileId
      });
    }else{
      this.props.importFile({
        imageId: String(fileId)
      });
    }
  }

  render() {
    const { step, slideDataSource, isInit, isStandingBook } = this.props;
    return (
      <Modal title="数据导入" visible={this.props.visiable}
             onCancel={this.props.onCancel}
             width={850} className="cumDeductModal"
             footer={null}
      >
        <div className="stepWrapper">
          <WeaSteps current={step}>
            <Step description="上传Excel"/>
            <Step description="数据预览"/>
            <Step description="导入数据"/>
          </WeaSteps>
        </div>
        {
          this.props.step == 0 && (<ModalStep1
            isInit={isInit}
            isStandingBook={isStandingBook}
            templateLink={this.props.templateLink}
            headerSetCompoent={this.props.headerSetCompoent}
            formComponent={this.props.renderFormComponent && this.props.renderFormComponent()}
            onFileIdChange={(fileId) => {
              this.setState({ fileId });
            }}
            onStep1Next={() => {
              this.handleStep1Next();
            }}/>)
        }
        {
          this.props.step == 1 && (<ModalStep2
            onPreviewDate={() => this.handlePreviewDate()}
            dataSource={slideDataSource}
            columns={this.props.columns}
            onStep2Next={() => {
              this.nextStep();
              this.hanleImportData();
            }} onStep2Pre={() => {
            this.preStep();
          }}/>)
        }
        {
          this.props.step == 2 && (<ModalStep3
            // onImportData={() => this.hanleImportData()}
            importResult={toJS(this.props.importResult)}
            onFinish={() => {
              this.props.onFinish();
            }}/>)
        }

      </Modal>
    );
  }
}