import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Col, Row, Divider } from 'antd';
import { getMachineryDetail } from '@/services/machinery';
import Summary from './components/Summary';
import Machines from './components/Machines';
import MaImg from './components/MaImg';

export default (props) => {
  const { location } = props;
  const { user, machineryId } = location.query || {};

  const [current, setCurrent] = React.useState({});

  const userId = user || current.ownerId;

  React.useEffect(() => {
    if (machineryId) {
      getMachineryDetail(machineryId).then(setCurrent);
    }
  }, [machineryId]);

  return (
    <PageHeaderWrapper>
      <div style={{ display: 'flex' }}>
        <div style={{ width: '360px', flex: 'none' }}>
          <Summary userId={userId} />
          <div style={{ marginTop: '24px' }}>
            <MaImg machine={current} />
          </div>
        </div>
        <div style={{ flex: '1', marginLeft: '24px' }}>
          <Machines current={current} setCurrent={setCurrent} userId={userId} />
        </div>
      </div>
    </PageHeaderWrapper>
  );
};