/*
 * @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;