/*
 * @Title:
 * @Author: hongmye
 * @Date: 2022-03-21 14:44:49
 */
import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
import {
  FileTwoTone,
  DeleteOutlined,
  FileImageTwoTone,
  DownloadOutlined,
  PictureOutlined,
} from '@ant-design/icons';
import { Button } from 'antd';
import iconFile from './icon_file.png';
function fileListItem(props) {
  const [fileList, setFileList] = useState([]);
  const imgType = ['image/png', 'image/jpg', 'image/jpeg'];
  const onPreview = (item) => {
    props.onPreview(item);
  };
  const onDownLoad = (item) => {
    const a = document.createElement('a');
    a.setAttribute('download', item.name);
    a.setAttribute('href', item.path);
    document.documentElement.appendChild(a);
    a.target = '_black';
    a.click();
  };
  useEffect(() => {
    setFileList(props.list || []);
  }, [props.list]);
  return (
    <>
      {fileList.map((item, index) => {
        return (
          <div
            key={index}
            className={'panda-civ-work-upload-list panda-civ-work-upload-list-picture'}
          >
            <div className={'panda-civ-work-upload-list-picture-container'}>
              <div className={'panda-civ-work-upload-list-item'}>
                <div className={'panda-civ-work-upload-list-item-info'}>
                  <span className={'panda-civ-work-upload-span'}>
                    <div
                      className={
                        'panda-civ-work-upload-list-item-thumbnail panda-civ-work-upload-list-item-file'
                      }
                    >
                      {/* {imgType.includes(item.type) ? <FileImageTwoTone /> : <FileTwoTone />} */}
                      <img src={iconFile} />
                    </div>
                    <span
                      className={'panda-civ-work-upload-list-item-name'}
                      title={item.name}
                      style={{ cursor: 'pointer' }}
                    >
                      {item.name}
                    </span>
                    <span className={'panda-civ-work-upload-list-item-card-actions picture'}>
                      {imgType.includes(item.type) && (
                        <Button
                          title="预览"
                          type="text"
                          onClick={(e) => {
                            e && e.stopPropagation();
                            onPreview(item);
                          }}
                          style={{ padding: '4px 8px' }}
                        >
                          <PictureOutlined />
                        </Button>
                      )}
                      <Button
                        title="下载"
                        type="text"
                        onClick={(e) => {
                          e && e.stopPropagation();
                          onDownLoad(item);
                        }}
                        style={{ padding: '4px 8px' }}
                      >
                        <DownloadOutlined />
                      </Button>
                      {props.type === 'edit' && (
                        <Button
                          title="删除文件"
                          type="text"
                          onClick={(e) => {
                            e && e.stopPropagation();
                            props.onDel(item);
                          }}
                          style={{ padding: '4px 8px' }}
                        >
                          <DeleteOutlined />
                        </Button>
                      )}
                    </span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        );
      })}
    </>
  );
}
export default fileListItem;
