import React,{Component} from 'react';
import {Icon,Modal} from 'antd';
import './index.less';
import $ from "jquery";

class ImgList extends Component{
    constructor(props) {
        super(props);
        this.state={
            seeMore: false,
            previewVisible: false,
            previewImage: ''
        }
        this.handleCancel = this.handleCancel.bind(this);
    }

    componentDidMount() {
        $(".fileItem").bind("mouseover",function (){
            $(this).children().first().css({
                "background": "rgba(0,0,0,.6)",
                "display":"flex"
            });

        });
        $(".fileItem").bind("mouseout",function (){
            $(this).children().first().css("display","none");

        });
    }

    handleCancel() {
        this.setState({
            previewVisible:false,
            previewImage: '',
        })
    }

    render() {
        return (
            <div>
                <div className='ImgList'>
                    {
                        this.props.fileList && this.props.fileList.slice(0,10).map((value,index)=>(
                            <div key={index} className='fileItem' style={{
                                width: this.props.ItemWidth ? this.props.ItemWidth : '100px',
                                height: this.props.ItemWidth ? this.props.ItemWidth : '100px',
                            }}>
                                <div className='coveringLayer'>
                                    <Icon type="eye-o" onClick={()=>{
                                        this.setState({
                                            previewVisible: true,
                                            previewImage: value.url
                                        })
                                    }}/>
                                </div>
                                <img src={value.url} className='imgFile'/>
                            </div>
                        ))
                    }
                    {
                        this.props.fileList && this.props.fileList.slice(10).map((value,index)=>(
                            <div key={index} className='fileItem' style={{
                                width: this.props.ItemWidth ? this.props.ItemWidth : '100px',
                                height: this.props.ItemWidth ? this.props.ItemWidth : '100px',
                                display: this.state.seeMore ? 'block' : 'none',
                            }}>
                                <div className='coveringLayer'>
                                    <Icon type="eye-o" onClick={()=>{
                                        this.setState({
                                            previewVisible: true,
                                            previewImage: value.url || value.thumbUrl
                                        })
                                    }}/>
                                </div>
                                <img src={value.url} className='imgFile'/>
                            </div>
                        ))
                    }
                    {/*{console.log(this.props.fileList,'图片')}*/}
                </div>
                {this.props.fileList && this.props.fileList.length > 10 ? <div className='seeMore' onClick={()=>{this.setState({seeMore:!this.state.seeMore})}}>
                    {this.state.seeMore ? '收起' : '查看更多'}
                </div> : <div/>}
                <Modal visible={this.state.previewVisible} footer={null} onCancel={this.handleCancel}>
                    <img alt="example" style={{ width: '100%' }} src={this.state.previewImage} />
                </Modal>
            </div>
        )
    }
}

export default ImgList;