import React from 'react';
import { Divider, Icon } from 'antd';
import styled from 'styled-components';
import { BpmDiagram, BpmTrace } from '@components';

const Drawer = styled.div`
  margin-top: 47px;
  background: white;
  width: ${props => props.size === 'default' ? '50%' : 'calc(100vw - 228px)'};
  height: calc(100vh - 47px);
  position: fixed;
  right: ${props => props.show ? 0 : (props.size === 'default' ? '-50%' : 'calc(-100vw - 228px)')};
  top: 0;
  z-index: 1001;
  padding: 20px;
  box-shadow: 0 4px 4px rgba(0,0,0,.12), 0 0 10px rgba(0,0,0,.06);

  -webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  -moz-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  -o-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  //transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
  transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
}
`;

const CloseButton = styled.i`
  //position: absolute;
  //right: 20px;
  //top: 20px;
  &:hover {
    cursor: pointer;
  }
`;

const BpmDrawer = ({ size, defId, prcId, show, handleClose }) => {
  return (
    <Drawer size={size || 'd'} show={show}>
      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
        <CloseButton><Icon type="close" onClick={handleClose}/></CloseButton>
      </div>
      <div style={{ overflowY: 'auto', height: 'calc(100vh - 47px)' }}>
        {/*<Divider orientation="left">流程图</Divider>*/}
        <BpmDiagram height={400} def={defId} instance={prcId}/>
        <br/>
        <Divider orientation="left">流程历史</Divider>
        <BpmTrace id={prcId}/>
      </div>
    </Drawer>
  );
};


export default BpmDrawer;
