import React, { useState, useEffect } from 'react';
import styles from './Usermanager.less';
import { Input ,Menu,Table,Space,Pagination,Tooltip } from 'antd';

import { Link, useIntl, connect, Dispatch } from 'umi';


import PDF from 'react-pdf-js';// 
import { render } from 'react-dom';


const ChangeDetail = () => {
  const { formatMessage } = useIntl();
  
  const [scale, setState] = useState(1.3)
  const [pages,setPages] = useState(1)
  const [curpage,setCurpage]=useState(1)

  const pdfpages = (pages: any) => {
  
    setPages(pages)
    //alert(pages)
  }

  const lookup = () => {
    if (scale == 1.3) {
      setState(2)
    } else {
      setState(1.3)
    }
  }

  const pageChange = (curpage: any) => {
    setCurpage(curpage)
  }
  return (
    <div className={styles.base}>
      {/* 组件 */}
      <div className={styles.box}>
        <div className={styles.item1}>Payment Settings</div>
        <div className={styles.item2}>Upload Time 2020/7/14/18:09:00</div>
        <button className={styles.item3}>返回</button>
      </div>
      
      <div className={styles.box2}>
        <div className={styles.item21}>Project</div>
        <div className={styles.item22}>Project Name</div>
        <div className={styles.item23}>Building No</div>
        <div className={styles.item234}>#</div>
        <div className={styles.item24}>Floor</div>
        <div className={styles.item245}>——</div>
        <div className={styles.item25}>Room Number</div>
        <div className={styles.item26}>Owner's Name</div>
      </div>
      <div className={styles.box4}>
      <Pagination simple defaultCurrent={curpage} total={pages*10} onChange={pageChange} />
      </div>
     
        {
          scale == 1.3 ? (
            <Tooltip title="点击放大查看">
              <div className={styles.box3out}>
                <div className={styles.box3} onClick={lookup}>
                  <PDF key="pdfjs" file="test2.pdf" cMapUrl="http://127.0.0.1:80/"  workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.worker.js" scale={scale} page={curpage} onDocumentComplete={pdfpages} />
                </div>   
              </div>
              </Tooltip>
          ) : (
            <Tooltip title="还原视图">
              < div className={ styles.box3of } onClick={ lookup } >
                  <PDF key="pdfjs" file="test2.pdf" cMapUrl="http://127.0.0.1:80/" workerSrc = '//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.worker.js' scale={scale} page={curpage} onDocumentComplete={pdfpages} />
                </div> 
              </Tooltip>
            )        
        }
    
 
    </div>
  );
};


export default ChangeDetail;
