import React, { useEffect, useState, useRef } from 'react';
import { Space, Table, Radio, DatePicker, Form, Select, Button, message, Upload, Input, Row, Col, Switch, Image } from 'antd';
import './ddForm.less'
import dayjs from 'dayjs'
import { InboxOutlined, LinkOutlined, DeleteOutlined, LoadingOutlined,VerticalAlignBottomOutlined } from '@ant-design/icons'
import { httpPostFile } from '../../../../utils/request';
import apiUrl from '../../../../service/apiurl'
import PdfView from './pdfView'
const { RangePicker } = DatePicker;
const { TextArea } = Input;
 
const baseUrl = "http://local.gunshiiot.com:18083/gunshiApp/xintankou"

const FormZdy = ({ typeName = "ddForm", formJson, getFormInfo, type, formJsonData, typeUpload = 'dispatch', isModalOpen,fileType,footer=true }) => {
    const [fileList, setFileList] = useState([])
    const [fileListUp, setFileLisUp] = useState([])
    const [url, setUrl] = useState('')
    const [isModal, setIsModal] = useState(false)


// debugger;
    const [form] = Form.useForm();
    
// function onDocumentLoadSuccess({ numPages }) {
//     setRenderNumPages(numPages);
// }
    const onFinish = (e) => {
    }
    const getInfo = () => {
        form.validateFields().then((values) => {
            getFormInfo({ ...values, files: fileList, fileIds: fileList.map(item => item.id) })
            form.resetFields()
            setFileList([])
        }).catch((errorInfo) => {
            console.log(errorInfo, 'error');
        })
        // 
    }
    const cancel = () => {
        getFormInfo(false)
        form.resetFields()
        setFileList([])

    }
    const { Dragger } = Upload;
    // const preView = (e) => {
    //      window.open('http://local.gunshiiot.com:18083/xintankou/api/file/preview/104')
    // }
    const deleteFile = (e) => {
        let arr = fileList.filter(item => item.id !== e)
        setFileList(arr)
    }
    const props = {
        name: 'file',
        multiple: true,
        fileList: fileList,
        showUploadList: false,
        beforeUpload: (file, fileList) => { 
            if (fileType == "pic" &&
                (file.type != "image/jpeg" || file.type != "image/png" || file.type != "image/jpg")) {
                message.error('仅支持上传jpg/png/jpeg格式的图片');
                return false;
            } else {
                return true;
            }
        },
        onChange(e) {
            setFileLisUp([...fileListUp, e.file])
            httpPostFile(apiUrl.service.uploadFile.uploadUrl + "?group=" + typeUpload, e).then(res => {
                setFileList([...fileList, res.data])
            })
        }
    };
    const onChange = () => { }
    function checkMediaType(url) {
        // 创建URL对象
        var link = url;
        // 获取路径的最后一个点之后的内容作为文件扩展名
        var extension = link.split('.').pop().toLowerCase();

        // 声明支持的图片和视频文件扩展名
        var imageExtensions = ['jpg', 'jpeg', 'gif', 'png'];
        var file = ['pdf', 'word', 'xslx', 'xsl', 'txt',"pptx"];

        // 判断文件扩展名是否在图片扩展名数组中
        if (imageExtensions.includes(extension)) {
            return 'image';
        }

        // 判断文件扩展名是否在视频扩展名数组中
        if (file.includes(extension)) {
            return extension;
        }

        // 扩展名不在图片或视频数组中，返回null表示无法确定媒体类型
        return null;
    }
    const preView = (item) => {
        if (checkMediaType(item.name) == 'pdf') {
            // window.open(baseUrl + item.previewUrl)
            setUrl(`${`http://local.gunshiiot.com:18083/xintankou`}/static/pdf/web/viewer.html?file=${encodeURIComponent(`http://local.gunshiiot.com:18083/gunshiApp/xintankou/${item.previewUrl}`)}`)
            setIsModal(true)
        }

    }

      /**
   * @description 文件下载
   * @param {String} params 文件fileId
   */
  const download = (id,name) => {
    let downloadLink = document.createElement("a");
        downloadLink.href = `http://local.gunshiiot.com:18083/gunshiApp/xintankou/api/file/download/${id}`;
        downloadLink.download = `${name}`;
        downloadLink.style.display = "none";
        // 将链接添加到页面中
        document.body.appendChild(downloadLink);

        // 模拟点击事件，开始下载
        downloadLink.click();
  }
    
    useEffect(() => {
        form.resetFields()
        let formType = type
        if(type='edit'){
            formType=2
        }
        if(type == 'view'){
            formType =1
        }
        if(type=='save'){
            formType =0
        }
        if (formType == 1 || formType == 2 || formType == 3) {
            form.setFieldsValue(formJsonData)
            if (formJsonData?.files) {
                setFileList(formJsonData.files)
            }

        }
        return () => {
            setFileList([])
        }

    }, [type, formJsonData, isModalOpen])
    


    return (
        <div style={{ backgroundColor: '#fff' }}>
            <Form form={form} name="searchTabel" onFinish={onFinish} className={typeName}>
                <Row>
                    {formJson.map(item => {
                        return (
                            <Col span={item.span} >
                                <Form.Item
                                    label={item.label}
                                    name={item.key}
                                    rules={[{ required: item.required, message: '请输入' + item.label }]}
                                    className={item.type == 'empty'?'empty':'noempty'}
                                >
                                    {item.type == "input" && <Input disabled={type == 1 || item.disabled} placeholder={item.placeholder} />}
                                    {item.type == "Select" && <Select disabled={type == 1} options={item.options} />}
                                    {item.type == "empty" && <Input disabled={item.type == "empty" ? true : false} />}
                                    {item.type == "Switch" && <Switch defaultChecked onChange={onChange} disabled={type == 1} />}
                                    {item.type == "DatePicker" && <DatePicker disabled={type == 1} style={{width:"100%"}} />}
                                    {item.type == "TextArea" && <TextArea rows={4} disabled={type == 1} />}
                                    {item.type == "Radio" &&<Radio.Group options={item.options} />}
                                    {item.type == "RangePicker" &&                     
                                    <RangePicker disabled={type=='view'} />}
                                    {item.type == "upload" &&
                                        <>
                                            {type !== 1 && <Dragger {...props}>
                                                <p className="ant-upload-drag-icon">
                                                    <InboxOutlined />
                                                </p>
                                            
                                            {fileType == "pic" ? <p className="ant-upload-text">点击或将文件拖拽到这里上传 支持扩展名：jpeg、png</p>: <p className="ant-upload-text">点击或将文件拖拽到这里上传</p>}
                                          
                                            </Dragger>}
                                            <div>
                                                {fileList?.map((item) => {
                                                    return <div className='flex align-center' style={{ minHeight: "50px", fontSize: 14,columnGap:10, cursor: checkMediaType(item.name) == 'image' || checkMediaType(item.name) == 'pdf'?'pointer':"not-allowed" }}>
                                                        <div style={{width:40,height:40,display:"flex",alignItems:'center'}}>
                                                        {checkMediaType(item.name) == 'image' && <Image
                                                            height={40}
                                                            src={baseUrl + item.previewUrl}
                                                        />}
                                                        {
                                                            checkMediaType(item.name) !== 'image' && 
                                                            <span  >{checkMediaType(item.name)?.toUpperCase()}</span>
                                                        }
                                                        </div>
                                                        
                                                        <span onClick={() => preView(item)}>{item.name}</span>
                                                        {type==2&&<DeleteOutlined onClick={() => deleteFile(item.id)} />}
                                                        <VerticalAlignBottomOutlined onClick={() => download(item.id,item.name)} />
                                                    </div>
                                                })}
                                            </div>
                                        </>}
                                </Form.Item>
                            </Col>
                        )
                    })}
                </Row>
            </Form >
            {type !== 1 &&<div className="flex flex-end" style={{ marginTop: 10 }}>
                <Button type="" style={{ marginRight: 10 }} onClick={cancel}>取消</Button>
                <Button type="primary" onClick={getInfo}>确定</Button>
            </div>}
            <PdfView url={url} isModal={isModal} setModalN={(e)=>setIsModal(e)}/>
         

        </div>
    );
}


export default FormZdy;