import React, { useState, useEffect } from 'react';
import { connect } from 'umi';
import { Avatar, Modal, Button, Spin, Image, Pagination } from 'antd';
import {} from '@ant-design/icons';
import { RA } from '@/utils/method';

// icon
import IconPdf from '@/assets/icon-pdf.png';
import IconImg from '@/assets/icon-img.png';
import IconNone from '@/assets/logo_icon_bg.png';

import PDF from 'react-pdf-js';
import FileViewer from 'react-file-viewer';

import { stringSplit } from '@/utils/string';

const PreView = (props: any) => {
  const { OpenUrl, loading, dispatch } = props;

  const [Icon, setIcon] = useState(null as any); // 图标显示哪一个控制
  const [ModalTip, setModalTip] = useState(false); // 弹窗控制
  //pdf 页码内容
  const [numPages, setNumPages] = useState(1 as any); // 总页码数
  const [pageNumber, setPageNumber] = useState(1); // 当前页码数

  // 图标显示判断
  useEffect(() => {
    if (OpenUrl) {
      OpenUrl.type == 'pdf' ? setIcon(IconPdf) : setIcon(IconImg);
    } else {
      setIcon(IconNone);
    }
  }, [OpenUrl]);

  //点击预览
  const opens = () => {
    setModalTip(true);
    // 每次关闭预览都要清掉弹窗图片信息   -- 防止编辑打开页面直接弹出窗口
    // dispatch({ type: 'CellList/urlRemove' });
  };

  // 隐藏弹窗
  const handleCancel = () => {
    setModalTip(false);
  };

  // pdf 总页数
  const onDocumentLoadSuccess = (pages: any) => {
    setNumPages(pages);
  };

  // 切换pdf 总数
  const onChangePage = (page: any) => {
    setPageNumber(page);
  };

  return (
    <>
      {OpenUrl ? (
        <div style={{ marginBottom: 10 }}>
          {/* 文件 Icon */}
          <Avatar
            shape="square"
            style={{
              color: '#f56a00',
              backgroundColor: '#F2F6FC',
              border: '1px solid #F2F6FC',
              borderRadius: 4,
            }}
            size={80}
            src={Icon}
          />
          {/* 文件名 */}
          <span style={{ display: 'inline-block', margin: '0 15px', minWidth: 200 }}>
            {OpenUrl.name}
          </span>
          {/* 文件操作 */}
          <Button type="link" onClick={opens}>
            Browse
          </Button>
          {/* 文件弹窗 */}
          <Modal
            visible={ModalTip}
            width={800}
            style={{ textAlign: 'center' }}
            footer={null}
            title={OpenUrl.name}
            onCancel={handleCancel}
          >
            <Spin spinning={loading}>
              {OpenUrl != null && OpenUrl.type == 'pdf' ? (
                <>
                  <PDF
                    // file={OpenUrl ? stringSplit(OpenUrl.url, 'm/cash') : ''}
                    file={OpenUrl ? OpenUrl : ''}
                    page={pageNumber}
                    scale={1.25}
                    onDocumentComplete={onDocumentLoadSuccess}
                  />
                  <Pagination
                    style={{ textAlign: 'center', marginTop: 10, display: 'block' }}
                    simple
                    defaultCurrent={pageNumber}
                    total={numPages * 10}
                    onChange={onChangePage}
                  />
                </>
              ) : OpenUrl.type == 'jpg' || OpenUrl.type == 'png' ? (
                // 图片用指定格式

                <Image
                  src={OpenUrl.url}
                  preview={false}
                  style={{ margin: '0 auto', textAlign: 'center' }}
                />
              ) : (
                <FileViewer fileType={OpenUrl.type} filePath={stringSplit(OpenUrl.url, 'm/cash')} />
              )}
            </Spin>
          </Modal>
        </div>
      ) : (
        ''
      )}
    </>
  );
};

function PreViewPorps(state: any) {
  const { CellList } = state;
  const loading = false;
  return {
    CellList,
    loading,
  };
}
export default connect(PreViewPorps)(PreView);
