文件消息类型请求MP3，MP4，docx，zip等文件流（包括添加loading，文件大小展示）

/**
 * @文件描述  会话管理界面右侧 ---- 文件消息
 * @创建人和时间 
 * @param {object} maxed - 视频音频跳转modul使用
 * 
*/
import React, { PureComponent } from 'react';
import { Row, Col, Card, Spin } from 'antd';
import { YoutubeOutlined, SoundOutlined, FolderOpenOutlined, FileUnknownOutlined, FileWordOutlined } from '@ant-design/icons';
import { Player } from 'video-react';
import ReactAudioPlayer from 'react-audio-player';
import { wechatV1 as v1 } from 'services/config';
import { getAccessToken } from 'utils/token';
import "../../../../../node_modules/video-react/dist/video-react.css";
import AudioLess from '../../../../assets/less/audio.less';

export default class File extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      files: {},
    }
  };

  // 点击卡片跳转modal
  spackChange = () => {
    const { item } = this.props;
    const { files } = this.state;
    const that = this;
    const token = getAccessToken();
    that.setState({ files: { ...files, [item.id]: { loading: true } } })
    if (files[item.id] && files[item.id].file) return;
    fetch(`${v1}/wechat/content/${item.id}/media`, {
      headers: { authorization: `Bearer ${token}` },
      responseType: 'blob',
    })
      .then(res => {
        return res.blob()
      }).then(res => {
        const reader = new FileReader();
        reader.readAsDataURL(res);
        reader.onload = (e) => {
          if (item.file_ext === "mp4" || item.file_ext === "mp3") {
            that.setState({ files: { ...files, [item.id]: { loading: false, file: e.target.result } } })
          } else {
            const a = document.createElement('a');
            const url = window.URL.createObjectURL(res);
            a.href = url;
            a.download = item.file_name;
            a.click();
            window.URL.revokeObjectURL(url);
            that.setState({ files: { ...files, [item.id]: { loading: false } } })
          }
        }
      })
  };

// 显示内存大小设置
  conver = (limit) => {
    let size = "";
    if (limit < 0.1 * 1024) { // 如果小于0.1KB转化成B  
      size = `${limit.toFixed(2)}B`;
    } else if (limit < 0.1 * 1024 * 1024) {// 如果小于0.1MB转化成KB  
      size = `${(limit / 1024).toFixed(2)}KB`;
    } else if (limit < 0.1 * 1024 * 1024 * 1024) { // 如果小于0.1GB转化成MB  
      size = `${(limit / (1024 * 1024)).toFixed(2)}MB`;
    } else { // 其他转化成GB  
      size = `${(limit / (1024 * 1024 * 1024)).toFixed(2)}GB`;
    }

    const sizestr = size;
    const len = sizestr.indexOf(".");
    const dec = sizestr.substr(len + 1, 2);
    if (dec === "00") {// 当小数点后为00时 去掉小数部分  
      return sizestr.substring(0, len) + sizestr.substr(len + 3, 2);
    }
    return sizestr;
  }

  render() {
    const { files } = this.state;
    // console.log(maxed);
    const { item } = this.props;
    return (
      <>
        {
          item.file_ext === "mp4" || item.file_ext === "mp3"
            ? (
              <>
                {
                  files[item.id] && files[item.id].file ? (
                    item.file_ext === "mp4"
                      ? (
                        <div className={AudioLess.player}>
                          <Player videoId="video-1" controls autoPlay style={{ fontSize: `${item.file_size}` }} fluid={false}>
                            <source src={files[item.id].file} />
                          </Player>
                        </div>
                      )
                      : item.file_ext === "mp3" ? <ReactAudioPlayer src={files[item.id].file} autoPlay={false} controls style={{ outline: 'none' }} />
                        : null
                  ) : (
                    <Spin spinning={files[item.id] ? files[item.id].loading : false}>
                      <Card size="small" style={{ width: 220, height: 100 }} hoverable onClick={this.spackChange}>
                        <Row>
                          <Col span={18} style={{ fontSize: 14, marginTop: 2, whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{item.file_name}</Col>
                          <Col span={6} style={{ float: "right" }}>
                            {
                              item.file_ext === "mp4"
                                ? (
                                  <YoutubeOutlined style={{ fontSize: 35, color: "#7878bf" }} />
                                )
                                : item.file_ext === "mp3"
                                  ? <SoundOutlined style={{ fontSize: 35, color: "#7878bf" }} />
                                  : null
                            }
                          </Col>
                        </Row>
                        <div style={{ color: 'rgba(0, 0, 0, 0.45)' }}>
                          {this.conver(Number(item.file_size))}
                        </div>
                      </Card>
                    </Spin>
                  )
                }
              </>
            )
            : item.file_ext === "docx" || item.file_ext === "zip" || item.file_ext === "bed"
              ? (
                <Spin spinning={files[item.id] ? files[item.id].loading : false}>
                  <Card size="small" style={{ width: 220, height: 100 }} hoverable onClick={this.spackChange}>
                    <Row>
                      <Col span={18} style={{ fontSize: 14, marginTop: 2, whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{item.file_name}</Col>
                      <Col span={6} style={{ float: "right" }}>
                        {
                          item.file_ext === "zip" || item.file_ext === "bed"
                            ? <FolderOpenOutlined style={{ fontSize: 35, color: "#7878bf" }} />
                            : item.file_ext === "docx"
                              ? <FileWordOutlined style={{ fontSize: 35, color: "#7878bf" }} />
                              : <FileUnknownOutlined style={{ fontSize: 35, color: "#7878bf" }} />
                        }
                      </Col>
                      <div style={{ color: 'rgba(0, 0, 0, 0.45)' }}>
                        {this.conver(Number(item.file_size))}
                      </div>
                    </Row>
                  </Card>
                </Spin>
              )
              : null
        }



        {/* <Card size="small" style={{ width: 220, height: 100 }} hoverable onClick={() => this.spackChange(true, { title: `${item.r_title}`, time: `${item.r_starttime}` })}>
          <Row>
            <Col span={18} style={{ fontSize: 14, marginTop: 2, whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{item.file_name}</Col>
            <Col span={6} style={{ float: "right" }}>
              <img alt="" src={file} style={{ width: 37, height: 46 }} />
              {
                item.file_ext === "mp4"
                  ? <YoutubeOutlined style={{ fontSize: 35, color: "#7878bf" }} />
                  : item.file_ext === "mp3"
                    ? <SoundOutlined style={{ fontSize: 35, color: "#7878bf" }} />
                    : item.file_ext === "zip" || item.file_ext === "bed"
                      ? <FolderOpenOutlined style={{ fontSize: 35, color: "#7878bf" }} />
                      : item.file_ext === "docx"
                        ? <a rel="noreferrer" download={`${item.file_name}.${item.file_ext}`} href={img}><FileWordOutlined style={{ fontSize: 35, color: "#7878bf" }} /></a>
                        : <FileUnknownOutlined style={{ fontSize: 35, color: "#7878bf" }} />
              }
            </Col>

          </Row>
        </Card> */}
        {/* <Modal
          visible={maxed.isVisible}
          onCancel={() => this.spackChange()}
          footer={null}
          className={AudioLess.antm}
        >
          {
            item.file_ext === "mp4"
              ? <div className={AudioLess.player}><Player videoId="video-1" controls autoPlay style={{ fontSize: `${item.file_size}` }} fluid={false}><source src={`${v1}/wechat/content/${item.id}/media`} /></Player></div>
              : item.file_ext === "mp3" ? <ReactAudioPlayer src={`${v1}/wechat/content/${item.id}/media`} autoPlay={false} controls style={{ outline: 'none' }} />
                : item.file_ext === "zip" ? <a rel="noreferrer" target='_blank' download={`${item.file_name}.${item.file_ext}`} href={img}>zip文件</a>
                  : item.file_ext === "docx" ? <a rel="noreferrer" download={`${item.file_name}.${item.file_ext}`} href={img}>docx文档</a>
                    : item.file_ext === "bed" ? <a rel="noreferrer" target='_blank' href={data.url}>bed结尾的</a>
                      : <a rel="noreferrer" target='_blank' href={data.url}>该文件未授权</a>
          }
        </Modal> */}
      </>
    )
  }
}