import * as React from 'react';
import classnames from 'classnames';
import { RenderProps } from 'src/types/op-table';
import OPDialog from 'src/view/op-dialog';

export default function Image(props: RenderProps) {
  const { value = '' } = props;

  const [imgUrl, setImgUrl] = React.useState('');

  return (
    <>
      <div
        className={classnames('op-table-image')}
        onClick={(e) => {
          e.stopPropagation();
          setImgUrl(value);
        }}
      >
        <img alt='' src={value} />
      </div>
      {imgUrl ? (
        <OPDialog
          className='op-image-dialog'
          title='图片'
          visible
          onOk={() => {
            setImgUrl('');
          }}
          footerActions={['ok']}
        >
          <div className='item-image'>
            <img alt='' src={imgUrl} />
          </div>
        </OPDialog>
      ) : null}
    </>
  );
}