import React from "react";
import { WeaDialog, WeaSteps } from "ecCom";
import { Button, message } from "antd";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import "./index.less";

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

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 {
      if (this.props.renderFormComponent) {
        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, params, needimportSelected } = this.props;
    return (
      <WeaDialog
        title="数据导入" visible={this.props.visiable}
        onCancel={() => {
          localStorage.removeItem("fileList");
          this.props.onCancel();
        }}
        style={{ width: 850, height: 600 }}
        hasScroll
        className="importModalWrapper"
        initLoadCss
        buttons={
          this.props.step === 0 ? [
            <Button type="primary" onClick={() => this.handleStep1Next()}>下一步</Button>
          ] : this.props.step === 1 ? [
            <Button type="primary" onClick={() => this.preStep()}>上一步</Button>,
            <Button type="primary" onClick={() => {
              this.nextStep();
              this.hanleImportData();
            }}>下一步</Button>
          ] : [
            <Button type="primary" onClick={() => {
              localStorage.removeItem("fileList");
              this.props.onFinish();
            }}>完成</Button>
          ]
        }
      >
        <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()}
            needimportSelected={needimportSelected} //下载模板需要带上导入所选项
            params={params}
            onFileIdChange={(fileId) => {
              this.setState({ fileId });
            }}
          />)
        }
        {
          this.props.step == 1 && (<ModalStep2
            onPreviewDate={() => this.handlePreviewDate()}
            dataSource={slideDataSource}
            columns={this.props.columns}
          />)
        }
        {
          this.props.step == 2 && (<ModalStep3
            // onImportData={() => this.hanleImportData()}
            importResult={toJS(this.props.importResult)}
          />)
        }

      </WeaDialog>
    );
  }
}