/*
 * @Title:
 * @Author: hongmye
 * @Date: 2022-03-21 14:44:49
 */
import { DeleteOutlined, DownloadOutlined, PictureOutlined } from '@ant-design/icons';
import { Button, ConfigProvider } from 'antd';
import { useContext, useEffect, useState } from 'react';
import iconFile from './icon_file.png';
function FileListItem(props) {
  const [fileList, setFileList] = useState([]);
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls();

  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={`${prefixCls}-upload-list ${prefixCls}-upload-list-picture`}>
            <div className={`${prefixCls}-upload-list-picture-container`}>
              <div className={`${prefixCls}-upload-list-item`}>
                <div className={`${prefixCls}-upload-list-item-info`}>
                  <span className={`${prefixCls}-upload-span`}>
                    <div
                      className={`${prefixCls}-upload-list-item-thumbnail ${prefixCls}-upload-list-item-file`}
                    >
                      {/* {imgType.includes(item.type) ? <FileImageTwoTone /> : <FileTwoTone />} */}
                      <img src={iconFile} />
                    </div>
                    <span
                      className={`${prefixCls}-upload-list-item-name`}
                      title={item.name}
                      style={{ cursor: 'pointer' }}
                    >
                      {item.name}
                    </span>
                    <span className={`${prefixCls}-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;
