import React,{Component} from 'react';
import {Icon, message, Spin, Upload,Progress} from 'antd';
import './index.less';
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
import PropTypes from 'prop-types';
const uploadButton = (
    
                
                    
                        {
                                            v.index = i;
                                            return v
                                        })
                                    ) : (
                                        this.state.seeMore?
                                            fileList.map((v,i)=>{
                                                v.index = i;
                                                return v
                                            }) :
                                            fileList.map((v,i)=>{
                                                v.index = i;
                                                return v
                                            }).slice(0,10)
                                    )
                            }
                            onPreview={(file) => {
                                if(Object.keys(this.props.uploadConfig).length !== 0){
                                    //TODO 上传组件,查看图片临时解决方法,无法查看下一张
                                    let image = new Image();
                                    image.src = file.url || file.thumbUrl;
                                    let viewer = new Viewer(image, {
                                        hidden: function () {
                                            viewer.destroy();
                                        },
                                    });
                                    viewer.show();
                                }else{
                                    this.state.gallery.view(file.index).show();
                                }
                            }}
                            beforeUpload={this.beforeUpload}
                            onChange={(infor)=>{
                                if(infor.file.status){
                                    let newUploadNum = this.state.newUploadArr.length
                                    this.state.gallery && this.state.gallery.destroy();
                                    this.props.onChange(infor);
                                    if(infor.file && infor.file.status === 'error'){
                                        message.error('图片上传失败,请重新上传!');
                                    }
                                    //用于控制进度条
                                    if(infor.file && infor.file.status !== 'removed' && infor.event){
                                        let percent = 0;
                                        this.state.newUploadInforArr[infor.file.uid] = infor.event.percent;
                                        this.setState({
                                            newUploadInforArr:this.state.newUploadInforArr
                                        })
                                        for(let i of Object.values(this.state.newUploadInforArr)){
                                            percent+= i
                                        }
                                        let percentNum = percent/newUploadNum/100;
                                        this.setState({
                                            percent:percentNum
                                        })
                                        if(percentNum <= 1) {
                                            this.setState({
                                                uploadLoading: true,
                                            })
                                        }
                                        if(percentNum >= 1){
                                            this.setState({
                                                percent: 1,
                                            },()=>{
                                                setTimeout(()=>{
                                                    this.setState({
                                                        uploadLoading: false,
                                                    },()=>{
                                                        this.setState({
                                                            percent: 0,
                                                            newUploadArr: [],
                                                            newUploadInforArr: {}
                                                        })
                                                    })
                                                },1500)
                                            })
                                        }
                                    }else if(infor.file && infor.file.status === 'removed'){
                                        this.setState({
                                            percent: 0,
                                            newUploadArr: [],
                                            newUploadInforArr: {}
                                        })
                                    }
                                }
                            }}
                        >
                            {Object.keys(this.props.uploadConfig).length === 0 ? "" : uploadButton}
                        
                    
                
                {fileList.length > 10 && Object.keys(this.props.uploadConfig).length === 0 ? 
{this.setState({seeMore:!this.state.seeMore})}}>
                    {this.state.seeMore ? '收起' : '查看更多'}
                
 : 
}
                
                    {
                        fileList.map((value,index)=>(
                            - 
                                 {
                                    this.imgLoading();
                                }}/> {
                                    this.imgLoading();
                                }}/>
))
                    }
                {this.state.uploadLoading ? 
 : 
}
            
 
        )
    }
}
ImgList.propTypes = {
    domId : PropTypes.string,                            //如果一个界面有多个该组件,需要传入自定义id名称,用于图片列表显示
    fileList: PropTypes.array.isRequired,                //图片文件列表
    uploadConfig: PropTypes.object,                      //上传图片配置参数(需要上传图片时需要,存在与否,用于区分是否为上传或者为查看)
    onChange: PropTypes.func,                            //选择图片
}
ImgList.defaultProps = {
    domId: 'images',
    fileList: [],
    uploadConfig: {},
    onChange:()=>{}
}
export default ImgList;