import { Component } from 'react';
import { Upload, message, Icon, Modal,Button } from 'antd';
class VideoComponent extends Component {
	constructor(props) {
		super(props);
        this.state = {
            previewVisible: false,
			previewImage: '',
			fileList: [],
			urls: []
        };
	}
	handleCancel() {
		this.setState({ previewVisible: false });
	}
	handlePreview(file) {
		this.setState({
			previewImage: file.url || file.thumbUrl,
			previewVisible: true
		});
	}
	handleChange(info) {
        let fileList = info.fileList;
        this.setState({ fileList });
        if (info.file.status !== 'uploading') {
            console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
            message.success(`上传成功`);
            this.props.fileList(fileList);
            this.setState({
                urls:fileList[0].response.data});
        } else if (info.file.status === 'error') {
            message.error(`上传失败`);
        }
	}
    beforeUpload(info){
        if(this.props.dataUrl.type.indexOf('video')>-1){
            if(info.type.indexOf('video')<0){
                message.warning('请上传MP4格式视频文件.');
                return false;
            };
            let sizeMb = info.size/(1024*1024),size=100;
            if(sizeMb>size){  //100Mb之内
                message.warning(`视频大小不超过${size}`);
                return false;
            };
        };
        if(this.props.dataUrl.type.indexOf('image')>-1){
            if(info.type.indexOf('image')<0){
                message.warning('请上传图片.');
                return false;
            };
            let sizeMb = info.size/(1024*1024),size=1;
            if(sizeMb>size){  //100Mb之内
                message.warning(`图片大小不超过${size}MB.`);
                return false;
            };
        }
    }
	componentWillReceiveProps(nextProps) {
        this.state.fileList = nextProps.videoUrl;
	}
	render() {
       
        const { previewVisible, previewImage, fileList } = this.state;
		const uploadButton = (
			<div>
				<Icon type="plus" />
				<div className="ant-upload-text">点击上传</div>
			</div>
        );
        const dataUrl = this.props.dataUrl||{};
		return (
			<div className="clearfix">
				<Upload
					action={globalConfig.context + dataUrl.url}
					data={{ sign:dataUrl.keyWord }}
					listType="picture-card"
                    fileList={fileList}
                    beforeUpload={this.beforeUpload.bind(this)}
					onPreview={this.handlePreview.bind(this)}
					onChange={this.handleChange.bind(this)}
				>
					{fileList.length >= this.props.dataUrl.page ? null : uploadButton}
				</Upload>
				<Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel.bind(this)}>
					{this.props.dataUrl.type.indexOf('video')>-1?<video alt="example" style={{ width: '100%' }} src={globalConfig.context+this.state.urls} controls></video>
                    :<img alt="example" style={{ width: '100%' }} src={previewImage} />}
                </Modal>
			</div>
		);
	}
}

export default VideoComponent;
