import React, { Component } from "react";
import { Modal, Button } from "antd";
import "./index.less";
// import PDF from 'react-pdf-js';

/**
 * PDF上传  2022-08-15
 */
class PDFView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fileState: props.visible,//父类传递的fileState
      type: props.fileType,//父类传递的fileType
      page: 1,
      pages: null,
    };
    this.onDocumentComplete = this.onDocumentComplete.bind(this);
    this.onDocumentLoadSuccess = this.onDocumentLoadSuccess.bind(this);
    this.onDocumentComplete = this.onDocumentComplete.bind(this);
    this.handlePrevious = this.handlePrevious.bind(this);
    this.handleNext = this.handleNext.bind(this);

  }

  componentWillReceiveProps(nextProps) {//props发生变化时执行
    this.setState({
      fileState: nextProps.visible,//父类传递的fileState
      type: nextProps.fileType,//父类传递的fileType
    })
  }

  componentDidMount() {

  }

  onDocumentLoadSuccess(numPages) {
    this.setState({
      numPages,
      pageNumber: numPages
    })
  }

  //获取所有页
  onDocumentComplete(pages) {
    this.setState({ page: 1, pages })
  }
  //点击上一页
  handlePrevious() {
    this.setState({ page: this.state.page - 1 })
  }
  //点击下一页
  handleNext() {
    this.setState({ page: this.state.page + 1 })
  }



  render() {
    const { page, pages, type } = this.state;
    const { file, } = this.props
    return (<React.Fragment>
      <Modal
        title=""
        visible={this.state.fileState}
        footer={null}
        onCancel={this.props.closeFile}
      >
        <div>
          {
            type == 'pdf' ?
              <div>
                <div className={styles.filePdf}>
                  <PDF
                    file={file}
                    onDocumentComplete={this.onDocumentComplete}
                    page={page}
                  />
                </div>
                <div className={styles.filePdfFooter}>
                  {page === 1 ?
                    null
                    :
                    <Button type='primary' onClick={this.handlePrevious}>上一页</Button>
                  }
                  <div className={styles.filePdfPage}>
                    <span>第{page}页</span>/<span>共{pages}页</span>
                  </div>
                  {page === pages ?
                    null
                    :
                    <Button style={{ marginLeft: '10px' }} type='primary' onClick={this.handleNext}>下一页</Button>
                  }
                </div>
              </div>
              : ''
          }
        </div>
      </Modal>
    </React.Fragment>)
  }
}

export default PDFView;
