'use strict';

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Spin, Upload, message, Modal, Card, Button } from 'antd';
import moment from 'moment';
import { PlusOutlined, UploadOutlined, CloseOutlined } from '@ant-design/icons';

class Uploads extends Component {
    constructor(props) {
        super(props);
        this.ApiRoot = localStorage.getItem('tyApiRoot')
        this.qnDomain = localStorage.getItem('qnDomain');
        this.aliAdmin = localStorage.getItem('aliAdmin');
        this.state = {
            fileUploading: false,
            fileList: [],
            curPreviewPic: '',
            curPreviewVideo: '',
            delPicIng: false,
            removeFilesList: []
        };
    }

    dealName = (uploaded) => {
        let realName = uploaded.split('/')[2]
        // let x1 = realName.split('.')
        // let postfix = x1.pop()
        // let allName = x1.join('.')
        // let x2 = allName.split('_')
        // let showName = `${x2[0]}.${postfix}`
        return realName
    }

    // setFileList = (value) => {
    //     let defaultFileList = [];
    //     defaultFileList = value.map((u, index) => {
    //         let fileUrl = `${this.ApiRoot}/${u.url}`;
    //         return {
    //             uid: -index - 1,
    //             name: this.dealName(u.url),
    //             status: 'done',
    //             storageUrl: u.url,
    //             url: fileUrl
    //         };
    //     });
    //     onChange(defaultFileList)
    //     this.setState({
    //         fileList: defaultFileList
    //     });
    // };

    setFileList = (nextEditData, isQiniu, isAli) => {
        let defaultFileList = [];
        defaultFileList = nextEditData.map((u, index) => {
            let fileUrl =
                isQiniu ? `/_file-server/${u.storageUrl}`
                    : isAli ? `/_file-ali-server/${u.storageUrl}`
                        : `${this.ApiRoot}/${u.storageUrl}`;

            return {
                uid: -index - 1,
                name: this.dealName(u.storageUrl),
                status: 'done',
                storageUrl: u.storageUrl,
                url: fileUrl,
                size: u.size || -1
            };
        });
        this.setState({
            fileList: defaultFileList
        });
    };

    componentDidMount() {
        const { value, defaultValue, isQiniu, isAli } = this.props;
        if (defaultValue) {
            this.setFileList(defaultValue, isQiniu, isAli)
        }
    }

    UNSAFE_componentWillReceiveProps(np) {
        const { dispatch, value: thisEditData, onChange } = this.props;
        const { value: nextEditData, isQiniu, isAli } = np;
        // this.setFileList(nextEditData, isQiniu)
        // const setFileList = () => {
        //     let defaultFileList = [];
        //     defaultFileList = nextEditData.map((u, index) => {
        //         let fileUrl = isQiniu ? `/_file-server/${u.storageUrl}` : `${this.ApiRoot}/${u.storageUrl}`;
        //         return {
        //             uid: -index - 1,
        //             name: this.dealName(u.storageUrl),
        //             status: 'done',
        //             storageUrl: u.storageUrl,
        //             url: fileUrl,
        //             size: u.size || -1
        //         };
        //     });
        //     this.setState({
        //         fileList: defaultFileList
        //     });
        // };
        if (nextEditData && nextEditData.length) {
            if (!thisEditData || !this.state.fileList.length) {
                this.setFileList(nextEditData, isQiniu, isAli);
            } else if (nextEditData.length != thisEditData.length) {
                this.setFileList(nextEditData, isQiniu, isAli);
            } else {
                let repeat = true;
                for (let i = 0; i < thisEditData.length; i++) {
                    if (thisEditData[i] != nextEditData[i]) {
                        repeat = false;
                        break;
                    }
                }
                if (!repeat) {
                    this.setFileList(nextEditData, isQiniu, isAli);
                }
            }
        }
        // else{
        //     this.setState({
        //         fileList:[],
        //     })
        // }
    }

    render() {
        const UploadPath = {
            project: ['txt', 'dwg', 'doc', 'docx', 'xls', 'xlsx', 'csv', 'pdf', 'pptx', 'png', 'jpg', 'svg', 'jpeg', 'rar', 'zip', 'jpeg', 'mp4'],
            report: ['doc', 'docx', 'xls', 'xlsx', 'csv', 'pdf'],
            data: ['txt', 'xls', 'xlsx', 'csv'],
            image: ['png', 'jpg', 'svg', 'jpeg'],
            three: ['js'],
            video: ['mp4']
        };
        /**
         * uploadType 【string】 主要区别文件上传路径 以及类型 以 web/routes/attachment/index.js 中 UploadPath 的 key 值为准；默认 project；
         * disabled 【boolean】 上传是否可用
         * maxFilesNum 【number】 最大上传数量
         * fileTypes 【array[string]】 可允许上传的文件类型；
         * maxFileSize 【number】 单个文件最大大小 M
         * listType 【antd】 upload 组件的属性
         * onChange 【function】 文件数量变化时候回调 返回文件
         * value 【array[obj]】 编辑数据 [{url:'xxx', [size:999]}]
         * onStateChange 【function】 文件状态改变回调函数 上传中 return { uploading:true/false }
         */
        const {
            uploadType,
            disabled,
            maxFilesNum,
            fileTypes,
            maxFileSize,
            listType,
            onChange = () => { },
            value,
            showUploadList,
            onStateChange,
            isQiniu,
            isAli,
        } = this.props;
        const { fileList, curPreviewPic, curPreviewVideo, delPicIng, removeFilesList } = this.state;
        const that = this;
        let uploadType_ = uploadType || 'project';
        let maxFilesNum_ = maxFilesNum || 1;
        let defaultFileTypes = fileTypes || UploadPath[uploadType_];
        // debugger
        const uploadProps = {
            name: 'checkFile_',
            multiple: false,
            showUploadList: showUploadList || true,
            action:
                isQiniu ? `/_upload/attachments/${uploadType_}`
                    : isAli ? `/_upload/attachments/ali/${uploadType_}`
                        : `${this.ApiRoot}/attachments/${uploadType_}`,
            listType: listType || 'text',
            disabled: disabled,
            beforeUpload: (file) => {
                if (fileList.length >= maxFilesNum_) {
                    message.warning(`最多选择${maxFilesNum_}个文件上传`);
                    return false;
                }
                if (file.name.length > 60) {
                    message.warning(`文件名过长(大于60字符)，请修改后上传`);
                    return false;
                }
                const extNames = file.name.split('.');
                // var reg = /^[\.\s\u4e00-\u9fa5a-zA-Z0-9_-]{0,}$/;
                // if (!reg.exec(file.name)) {
                //     message.warning(`文件名包含除字母、汉字、数字、中划线、下划线之外的字符，请修改后上传`);
                //     return false;
                // }
                let isDAE = false;
                if (extNames.length > 0) {
                    let fileType = extNames[extNames.length - 1].toLowerCase();
                    isDAE = defaultFileTypes.some((f) => f == fileType);
                }
                if (!isDAE) {
                    message.error(`只能上传 ${defaultFileTypes.join()} 格式的文件!`);
                    return false;
                }
                const isLt = file.size / 1024 / 1024 < (maxFileSize || 3);
                if (!isLt) {
                    message.error(`文件必须小于${maxFileSize || 3}MB!`);
                    return false;
                }
                this.setState({
                    fileUploading: true
                });
                if (onStateChange) {
                    onStateChange({ uploading: true });
                }
            },
            onChange(info) {
                const status = info.file.status;
                if (status === 'uploading') {
                    that.setState({
                        fileList: info.fileList
                    });
                }
                if (status === 'done') {
                    let { uploaded, url } = info.file.response;
                    let size = info.file.size;
                    let nextFileList = fileList;
                    nextFileList[nextFileList.length - 1] = {
                        uid: -moment().unix(),
                        name: that.dealName(uploaded),
                        status: 'done',
                        storageUrl: uploaded,
                        url:
                            isQiniu ? '/_file-server/' + uploaded :
                                isAli ? `/_file-ali-server/${uploaded}` :
                                    url,
                        size: size
                    };
                    onChange(nextFileList);
                    that.setState({
                        fileUploading: false,
                        fileList: nextFileList
                    });
                    if (onStateChange) {
                        onStateChange({ uploading: false });
                    }
                } else if (status === 'error') {
                    that.setState({
                        fileUploading: false
                    });
                    message.error(`${info.file.name} 上传失败，请重试`);
                    if (onStateChange) {
                        onStateChange({ uploading: false });
                    }
                }
            },
            onRemove(file) {
                let nextFileList = [];
                fileList.map((f, i) => {
                    if (f.uid != file.uid) {
                        nextFileList.push(f);
                    }
                });
                let nextRemoveFiles = removeFilesList.concat([file.storageUrl]);
                if (curPreviewPic == file.url) {
                    that.setState({
                        curPreviewPic: ''
                    });
                }
                if (curPreviewVideo == file.url) {
                    that.setState({
                        curPreviewVideo: ''
                    });
                }
                onChange(nextFileList);
                that.setState({
                    fileList: nextFileList,
                    removeFilesList: nextRemoveFiles
                });
            },
            onPreview(file) {
                let filePostfix = file.url.split('.').pop();
                filePostfix = filePostfix.toLowerCase();
                if (UploadPath.image.some((img) => img == filePostfix)) {
                    that.setState({
                        curPreviewPic: file.url
                    });
                } else if (UploadPath.video.some((img) => img == filePostfix)) {
                    that.setState({
                        curPreviewVideo: file.url
                    });
                } else {
                    //message.warn('仅支持图片预览');
                    preview(file.storageUrl)
                }
            }
        };

        const preview = (url) => {
            let link = isQiniu ? encodeURI(`${this.qnDomain}/${url}`) :
                isAli ? encodeURI(`${this.aliAdmin}/${url}`) : ''
            if (link)
                if (url.indexOf("pdf") !== -1 || url.indexOf("csv") !== -1) {
                    window.open(link)
                } else {
                    window.open(`https://view.officeapps.live.com/op/view.aspx?src=${link}`)
                }
        }

        let fileList_ = fileList
        // .map(f => {
        //     if (f.storageUrl) {
        //         let realName = f.storageUrl.split('/').pop()
        //         if (f.name != realName) {
        //             f.name = realName
        //         }
        //     }
        //     return f
        // })
        //下载文件
        const handleDownload = (file) => {
            saveAs(file)
        };
        const saveAs = (file) => {
            const link = document.createElement('a');
            link.href = file.url;
            link.download = file.name;
            link.style.display = 'none';
            link.click();
        }
        //自定义下载
        return (
            <div>
                <Spin spinning={delPicIng}>
                    <Upload {...uploadProps} fileList={fileList_} showUploadList={{ showDownloadIcon: true }} onDownload={handleDownload}>
                        {
                            disabled ? (
                                ''
                            ) :
                                listType == 'picture-card' ?
                                    (
                                        fileList.length >= maxFilesNum_ ? null : (
                                            <div style={{}}>
                                                <PlusOutlined />
                                                <div>添加附件</div>
                                            </div>
                                        )
                                    ) : (
                                        <Button disabled={fileList.length >= maxFilesNum_} icon={<UploadOutlined />}>  文件上传 </Button>
                                    )
                        }
                    </Upload>
                    {
                        curPreviewPic ? (
                            <Card bodyStyle={{ padding: 8 }}>
                                <div style={{ marginBottom: 8 }} >
                                    <span>图片预览</span>
                                    <span style={{ float: 'right' }} onClick={() => { this.setState({ curPreviewPic: '' }) }}>
                                        <CloseOutlined style={{ fontSize: 20 }} />
                                    </span>
                                </div>
                                <img style={{ width: '100%' }} src={curPreviewPic} />
                            </Card>
                        ) : ''
                    }
                    {
                        curPreviewVideo ? (<Card bodyStyle={{ padding: 8 }}>
                            <div style={{ marginBottom: 8 }} >
                                <span>视频预览</span>
                                <span style={{ float: 'right' }} onClick={() => { this.setState({ curPreviewVideo: '' }) }}>
                                    <CloseOutlined style={{ fontSize: 20 }} />
                                </span>
                            </div>
                            <video controls style={{ width: '100%' }}>
                                <source src={curPreviewVideo} type="video/mp4"></source>
                            </video>
                        </Card>) : ''
                    }
                </Spin>
            </div>
        );
    }
}

function mapStateToProps(state) {
    const { auth } = state
    return {
        user: auth.user
    };
}

export default connect(mapStateToProps)(Uploads);