import React, { useState, useEffect } from 'react';
import { Card, Steps} from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { connect } from 'umi';
import Step1 from './components/Step1';
import Step2 from './components/Step2';
import styles from './style.less';
const { Step } = Steps;

const getCurrentStepAndComponent = (current) => {
  switch (current) {
    case 'detail':
      return {
        step: 1,
        component: <Step2 />,
      };

    case 'info':
    default:
      return {
        step: 0,
        component: <Step1 />,
      };
  }
};

const EditReport = ( props ) => {
  const { dispatch,current,commonId,reportCommonInfo } = props;

  const [stepComponent, setStepComponent] = useState(null);
  const [currentStep, setCurrentStep] = useState(0);
  const [idInfo, setIdInfo] = useState({});

  useEffect(() => {
    if(reportCommonInfo.id){
      const { step, component } = getCurrentStepAndComponent(current);
      setCurrentStep(step);
      setStepComponent(component);
    }
  }, [current]);

  // useEffect(() => {
  //   console.log('token 获取')
  //   let token = window.location.search.split('token=') && window.location.search.split('token=')[1];
  //   dispatch({
  //     type: 'editReport/getIdByToken',
  //     payload: {
  //       token,
  //     },
  //   }).then(res => {
  //     //{result: "fail", cause: "身份验证失败，请重新点击按钮进入答题页面"}
  //     if (res.result === 'success') {
  //       console.log(res)
  //     } else {
  //       //错误处理
  //       confirm({
  //         title: '提示：',
  //         icon: <ExclamationCircleOutlined />,
  //         content: '身份验证失效，请返回任务页面重新进入',
  //         onOk() {
  //           window.opener=null;
  //           window.open('','_self');
  //           window.close();
  //         },
  //         onCancel() {
  //           window.opener=null;
  //           window.open('','_self');
  //           window.close();
  //         },
  //       });
  //     }
  //   });
  // }, [dispatch]);

  useEffect(()=>{
    let idInfo = {
      roleId: commonId.roleId,
      caseId: commonId.caseId,
      examId: commonId.examId,
      userId: commonId.userId,
      case_take_id: commonId.caseId + '-' + commonId.examId,
    };
    setIdInfo(idInfo);
  },[commonId.userId])

  useEffect(() => {
    if(idInfo&&idInfo.userId){
      //判断是否已经有报告
      dispatch({
        type: 'editReport/getReportInfo',
        payload: {
          case_take_id: idInfo.case_take_id,
          worker_id: idInfo.userId,
        },
      }).then((res) => {
        //有报告，获取对应信息。没有就直接转去了第一步
        if (res.status === 200) {
          //表示这时候已经有报告信息了
          const { step, component } = getCurrentStepAndComponent('detail');
            setCurrentStep(step);
            setStepComponent(component);
        } else {
          const { step, component } = getCurrentStepAndComponent('info');
          setCurrentStep(step);
          setStepComponent(component);
        }
      });
    }
  }, [idInfo.userId]);

  return (
    <Card bordered={false}>
      <>
        <Steps current={currentStep} className={styles.steps}>
          <Step title="基础信息" />
          <Step title="报告详情" />
        </Steps>
        {stepComponent}
      </>
    </Card>
  );
}

export default connect(({ editReport }) => ({
  current: editReport.current,
  commonId: editReport.commonId,
  reportCommonInfo: editReport.reportCommonInfo,
}))(EditReport);
