import { useEffect, useState } from 'react';
import './index.less';

interface pdfPreviewProps {
  url?: string
}

const pdfPreview = (props: pdfPreviewProps) => {
  const [filePath, setFilePath] = useState<string>();

  useEffect(()=>{
    if (props.url) {
        // const _url = encodeURIComponent(props.url);
        const _url = props.url;
      setFilePath(_url);
    }
  },[props.url])

    // #viewerContainer margin-bottom: 0;

 
  return (
    <div className={'pdfPreview'}>
      {/* pdf属性 page 跳转到指定页码，navpanes 控制左侧的缩略图预览导航是否默认打开。0-关闭，1-打开*/}
      {/* navpanes=0&scrollbars=0&toolbar=0&statusbar=0 去除缩略图和工具栏 */}
      {/* view=FitH,top 为全屏展示 */}
      <iframe
          title="pdf-preview"
          style={{ width: '100%', height: '100%' }}
          src={`${filePath}#page=1&navpanes=0&scrollbars=0&toolbar=0&statusbar=0&view=FitH,top`}
          // src={`https://h5jianke.21tb.com/file/generic_mobile/web/viewer.html?file=${filePath}#page=1&navpanes=0&scrollbars=0&toolbar=0&statusbar=0&view=FitH,top`}
      />
      </div>
  ); 
};
 
export default pdfPreview;