import React, { useState, useEffect, useRef } from 'react'
import { Form, Button, Input, Row, Upload, Col, Table, DatePicker, InputNumber, message, Image, Modal, Typography, Select } from 'antd';
import { DeleteOutlined, FileWordOutlined, FilePdfOutlined, FileZipOutlined, FileExcelOutlined } from '@ant-design/icons';
import moment from 'moment'
import apiurl from '../../../service/apiurl';
import PdfView from './pdfView';
// import './index.less'
const FileView = ({mode, fileList, setFileList}) => {
    const childRef = useRef(null);


    const download = (params) => {
        let downloadLink = document.createElement("a");
        downloadLink.href = process.env.REACT_APP_API_URL+apiurl.file.download+params
        downloadLink.download = `${params.fileName}`;
        downloadLink.style.display = "none";
        // 将链接添加到页面中
        document.body.appendChild(downloadLink);
        // 模拟点击事件，开始下载
        downloadLink.click();
    }

    const deleteFile = (fileId) => {
        let filterFile = fileList.filter(item => item.response?.data?.fileId !== fileId);
        setFileList(filterFile)
    }

    const viewPdf = (params) => {
        if (childRef.current) {
            childRef.current.callChildMethod(params);
        }
    }

    return (
        <>
            <Row gutter={[16]}>
                {
                    fileList.map(file=>(
                        <Col span={12}>
                            <div className="file-item" style={{ width: "75%",marginTop:5 }}>
                                <div className='file-description'>
                                    {
                                        (()=>{
                                            if(file.name.indexOf('.doc') > -1){
                                                return (
                                                    <div
                                                        onClick={() => { download(file.response?.data?.fileId) }}
                                                        style={{ cursor: 'pointer' }}
                                                    >
                                                        <FileWordOutlined style={{ fontSize: 40 }}/>
                                                    </div>
                                                )
                                            }else if(file.name.indexOf('.pdf') > -1){
                                                return (
                                                    <div
                                                        onClick={() => { viewPdf(file.response?.data?.fileId) }}
                                                        style={{ cursor: 'pointer' }}
                                                    >
                                                        <FilePdfOutlined style={{ fontSize: 40 }} />
                                                    </div>
                                                )
                                            }else if(file.name.indexOf('.zip') > -1){
                                                return (
                                                    <div
                                                        onClick={() => { download(file.response?.data?.fileId) }}
                                                        style={{ cursor: 'pointer' }}
                                                    >
                                                        <FileZipOutlined style={{ fontSize: 40 }} />
                                                    </div>
                                                )
                                            }else if(file.name.indexOf('.xls') > -1){
                                                return (
                                                    <div
                                                        onClick={() => { download(file.response?.data?.fileId) }}
                                                        style={{ cursor: 'pointer' }}
                                                    >
                                                        <FileExcelOutlined style={{ fontSize: 40 }} />
                                                    </div>
                                                )
                                            }else{
                                                return (
                                                    <Image width={60} src={apiurl.file.view + file.response?.data?.filePath} alt='' />
                                                )
                                            }
                                        })()
                                    }
                                    <span>{file.name}</span>
                                </div>
                                <div className={mode == "view" ? 'delete-icon disable-icon' : 'delete-icon'} onClick={() => {
                                    deleteFile(file.response?.data?.fileId)
                                }}>
                                    <DeleteOutlined />
                                </div>
                            </div>
                        </Col>
                    ))
                }
            </Row>
            <PdfView ref={childRef}/>
        </>
    )
}

export default FileView