import React, { useState, useEffect } from 'react';
import styles from './ChargeDetail.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';

import { Document } from 'react-pdf/dist/entry.webpack';

import { stringSplit } from '../../utils/string';
import { timestampToTime2 } from '../../utils/time';

import TitleBack from '../../components/TitleBack/TitleBack';

const ChargeDetail = (props: any) => {
  const { CurData } = props;
  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);
  };
  const goToReturn = () => {
    history.back();
  };
  console.log(CurData);
  return (
    <div className={styles.base}>
      {CurData ? (
        <>
          <TitleBack
            title="Payment Settings"
            sublist={['Upload Time   ' + timestampToTime2(CurData.updateTime.time)]}
          />

          <div className={styles.box2}>
            <div className={styles.item21}>Project (community)</div>
            <div className={styles.item22}>{CurData.billName}</div>
            <div className={styles.item23}>{CurData.communityName}</div>
            <div className={styles.item24}>{CurData.floorNumber}</div>
            <div className={styles.item234}>#</div>
            <div className={styles.item25}>{CurData.roomNumber}</div>
            <div className={styles.item245}>——</div>
            <div className={styles.item26}>{CurData.tosOwnerName}</div>
          </div>
          <>{stringSplit(CurData.billFileUrl, 'm/cash')}</>
          <div className={styles.box4}>
            <Pagination simple defaultCurrent={curpage} total={pages * 10} onChange={pageChange} />
          </div>
          <>
            <Tooltip title={scale == 1.3 ? '点击放大查看' + CurData.billFileUrl : '还原视图'}>
              <div className={scale == 1.3 ? styles.box3out : null}>
                <div className={scale == 1.3 ? styles.box3 : styles.box3of} onClick={lookup}>
                  <PDF
                    key="pdfjs"
                    file={stringSplit(CurData.billFileUrl, 'm/cash')}
                    workerSrc="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.worker.js"
                    scale={scale}
                    page={curpage}
                    onDocumentComplete={pdfpages}
                  />
                </div>
              </div>
            </Tooltip>
          </>
        </>
      ) : null}
    </div>
  );
};

function mapStateToProps(state: any) {
  const { CurData } = state.PropertyManagement;
  return {
    CurData,
  };
}
export default connect(mapStateToProps)(ChargeDetail);
