import React, { useState, useEffect } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Steps, Pagination, Modal, Breadcrumb } from 'antd';
import router from 'umi/router';
import moment from 'moment';
import styles from './style.less';
import { fetch, apis } from '../../../utils/request';
import request from '../../../utils/request';
import AuthButton from '@/components/AuthButton';
import Enterprise from './components/enterprise';
import Organization from './components/organization';

const { Step } = Steps;

let ent = null

function header(props) {

  const [current, setCurrent] = useState()
  const [status, setStatus] = useState({})

  useEffect(() => {
    setCurrent(0)
    setStatus({
   
      ent: "process",
      org: "wait",
      disabled: true,
    })
  }, [])


  const relation = (orgId, companyId) => {
    request({ ...apis.relatedOrganization.post, data: { orgId: orgId, companyId: companyId }, }).then(data => {
      message.info("关联成功")
      router.push({
        pathname: '/eContract/relatedOrganization',
      });
    }).catch((err) => {
      message.info(err.msg || err.message)
    })
  }

  const onChange = current => {
    setCurrent(current);
  };

  const onChoiceEnt = (value) => {
    ent = value.companyId
    setCurrent(1)
    setStatus({
      ent: "finish",
      org: "process",
      disabled: false,
    })
  };

  const onChoiceOrg = (value) => {
    relation(value.orgId,ent )


  };

  return (<>
    <div style={{ maxWidth: 600 }}>
      <Steps
        type="navigation"
        current={current}
        onChange={onChange}
        className="site-navigation-steps"
      >
        <Step status={status.ent} title="选择已认证企业"  />
        <Step status={status.org} title="选择关联的组织" disabled />
      </Steps>

    </div>
    {current === 0 && <Enterprise onChoiceEnt={onChoiceEnt} />}
    {current === 1 && <Organization onChoiceOrg={onChoiceOrg} />}
  </>)
}



export default header