import React from 'react';
import { Upload, Icon, Modal } from 'antd';
import './style.less';
import { uploaderProps } from '../../utils/upload';
import Item from './Item'
import { getImgURL } from '@/utils/image';
/**
 * unlimited  属性表示上传图片无限制
 * 例子： <ImageListUpload unlimited/>
 */
class ImageListUpload extends React.Component {
  state = {
    previewVisible: false,
    previewImage: '',
    loadding: false,
  };

  getFileList = () => {
    return (this.props.value || []).map((img, inx) => ({ uid: inx, url: getImgURL(img), status: 'done' }))
  }

  handleCancel = () => this.setState({ previewVisible: false });

  handlePreview = async file => {
    this.setState({
      previewImage: file.url ,
      previewVisible: true,
    });
  };

  handleSticky = ({ url }) => {
    const fileList = this.props.value || [];
    this.props.onChange([url].concat(fileList.filter(x => x != url)))
  }

  handleDelete = ({ url }) => {
    const fileList = this.props.value || [];
    this.props.onChange(fileList.filter(x => x != url))
  }

  handleChange = (e) => {
    if (e.file.status === "uploading") {
      this.setState({ loading: true });
      return;
    }

    const fileList = (this.props.value || []).filter(x => getImgURL(x) != e.file.url);
    this.props.onChange(fileList);

    // console.log('删除图片触发了', e.file)
    // if (e.file.state === 'removed') {
    //   const fileList = (this.props.value || []).filter(x => x != e.file.url);
    //   this.props.onChange(fileList);
    // }

    // if (e.file.status === "done") {
    //   this.setState({
    //     loading: false,
    //   })

    //   if (e.file.response && e.file.response.url) {
    //     if (typeof this.props.onChange === 'function') {
    //       const fileList = this.getFileList()
    //       this.props.onChange([...fileList || [], e.file.response.url]);
    //     }
    //   }
    // }
  };

  handleUploadSucess = (url) => {
    this.setState({ loading: false });
    if (typeof this.props.onChange === 'function') {
      const fileList = this.props.value || [];
      this.props.onChange([...fileList, url]);
    }
  }

  render() {
    const { previewVisible, previewImage } = this.state;
    const { multiple = false } = this.props;
    const fileList = this.getFileList();

    const uploadButton = (
      <div>
        <Icon style={{ fontSize: '2em', color: '#aaa' }} type={this.state.loading ? "loading" : "plus"}  />
      </div>
    );
    return (
      <div className="clearfix x-dargable-image-upload-list" style={{display:'flex'}}> 
        <div className="ant-upload-list ant-upload-list-picture-card" style={{display:'flex'}}>
            {fileList.map(img => <Item key={img.url} dataset={img} onPreview={this.handlePreview} onSticky={this.handleSticky} onDelete={this.handleDelete}/>)}
        </div>
          {/*  */}
        <Upload
          listType="picture-card"
          showUploadList={false}
          multiple={multiple}
          onPreview={this.handlePreview}
          onChange={this.handleChange}
          { ...uploaderProps }
          onSuccess={this.handleUploadSucess}
        >
         {/* listType="picture-card"
          multiple={true}
          fileList={fileList}
          onPreview={this.handlePreview}
          onChange={this.handleChange}
          { ...uploaderProps }
          onSuccess={this.handleUploadSucess} */}
          {/* unlimited 表示上传无限制数量 */}
          {(this.props.unlimited && uploadButton) || ((fileList || images).length >= 8 ? null : uploadButton)}
        </Upload>
        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
          <img alt="example" style={{ width: '100%' }} src={getImgURL(previewImage)} />
        </Modal>
      </div>
    );
  }
}

export default ImageListUpload;
