import React, { useImperativeHandle, useState } from 'react';
import { Modal, Steps } from 'antd';
import './index.less';
import UploadData from './upload-data';
import CheckData from './check-data';
import ImportData from './import-data';
import Finish from './finish';

const { Step } = Steps;
interface ImportDialogProps {
  dRef?: any;
  appCode: string;
  funCode: string;
  viewCode: string;
  onSuccess: (callback?: any) => void;
}

const ImportDialog: React.FC<ImportDialogProps> = (props) => {
  const { appCode, funCode, viewCode, onSuccess } = props;
  const [visible, setVisible] = useState(false);
  const [current, setCurrent] = useState<number>(0);
  const [taskId, setTaskId] = useState<string>('');
  const [importWay, setImportWay] = useState<string>('');
  const [importData, setImportData] = useState<any>({});

  useImperativeHandle(props.dRef, () => ({
    // 暴露给父组件
    open: () => {
      setVisible(true);
    },
    close: () => {
      setVisible(false);
    },
  }));
  const changeNext = (step: number) => {
    setCurrent(step);
  };
  const changeTaskId = (taskId: string) => {
    setTaskId(taskId);
  };
  const changeFinish = () => {
    setVisible(false);
    setCurrent(0);
  };
  const changeImportWay = (way: any) => {
    if (way) {
      setImportWay(way);
    }
  };
  const importSuccess = () => {
    onSuccess();
  };

  return (
    <Modal
      title="导入"
      width={'800px'}
      visible={visible}
      centered
      onCancel={() => {
        setCurrent(0);
        setVisible(false);
      }}
      destroyOnClose
      footer={false}
      maskClosable={false}
      wrapClassName={'qx-import-modal'}
    >
      <Steps current={current} labelPlacement="vertical">
        <Step title="上传数据" />
        <Step title="校验数据" />
        <Step title="导入数据" />
        <Step title="完成" />
      </Steps>
      <div className={'qx-import'}>
        <div className={current === 0 ? 'qx-import-appear' : 'qx-import-hide'}>
          <UploadData
            changeNext={changeNext}
            changeFinish={changeFinish}
            changeTaskId={changeTaskId}
            changeImportWay={changeImportWay}
            appCode={appCode}
            funCode={funCode}
            viewCode={viewCode}
          />
        </div>
        <div className={current === 1 ? 'qx-import-appear' : 'qx-import-hide'}>
          <CheckData
            changeNext={changeNext}
            appCode={appCode}
            funCode={funCode}
            viewCode={viewCode}
            taskId={taskId}
            importWay={importWay}
            current={current}
          />
        </div>
        <div className={current === 2 ? 'qx-import-appear' : 'qx-import-hide'}>
          <ImportData
            changeNext={changeNext}
            appCode={appCode}
            funCode={funCode}
            viewCode={viewCode}
            taskId={taskId}
            current={current}
            setImportData={setImportData}
            importSuccess={importSuccess}
          />
        </div>
        <div className={current === 3 ? 'qx-import-appear' : 'qx-import-hide'}>
          <Finish changeFinish={changeFinish} importData={importData} />
        </div>
        {/*{current === 0 && (*/}
        {/*  <UploadData*/}
        {/*    changeNext={changeNext}*/}
        {/*    changeFinish={changeFinish}*/}
        {/*    changeTaskId={changeTaskId}*/}
        {/*    changeImportWay={changeImportWay}*/}
        {/*    appCode={appCode}*/}
        {/*    funCode={funCode}*/}
        {/*    viewCode={viewCode}*/}
        {/*    onSuccess={onSuccess}*/}
        {/*  />*/}
        {/*)}*/}
        {/*{current === 1 &&*/}
        {/*  <CheckData*/}
        {/*    changeNext={changeNext}*/}
        {/*    appCode={appCode}*/}
        {/*    funCode={funCode}*/}
        {/*    viewCode={viewCode}*/}
        {/*    taskId={taskId}*/}
        {/*    importWay={importWay}*/}
        {/*  />*/}
        {/*}*/}
        {/*{current === 2 &&*/}
        {/*  <ImportData changeNext={changeNext} taskId={taskId} />*/}
        {/*}*/}
        {/*{current === 3 && <Finish changeFinish={changeFinish} />}*/}
      </div>
    </Modal>
  );
};

export default ImportDialog;