import React, { Component } from "react";
import { WeaLocaleProvider, WeaTools, WeaUpload } from "ecCom";
import { Icon, Modal } from "antd";
import "./index.less";

const getLabel = WeaLocaleProvider.getLabel;
const { viewer } = WeaTools;

class ImageUploadList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      imageUrl: ""
    };
  }

  componentDidMount() {
    const { wmImg } = this.props;
    if (!_.isEmpty(wmImg)) {
      this.setState({
        imageUrl: wmImg[0].imgSrc
      });
    }
  }

  handleChange = (ids, list) => {
    this.setState({
      imageUrl: list[0].imgSrc
    }, () => this.props.onChange([{ imgSrc: this.state.imageUrl }]));
  };
  handleDelete = () => {
    Modal.confirm({
      title: getLabel(111, "信息确认"),
      content: getLabel(111, "确认要删除吗?"),
      onOk: () => {
        this.setState({
          imageUrl: ""
        }, () => this.props.onChange(null));
      }
    });
  };


  render() {
    const { imageUrl } = this.state;
    const uploadProps = {
      uploadUrl: "/api/doc/upload/uploadFile",
      listType: "img",
      limitType: "jpg,jpeg,png,gif",
      category: "string",
      maxFilesNumber: 1,
      onChange: this.handleChange
    };
    const imgPreviewProps = {
      src: imageUrl,
      width: 100,
      height: 100
    };
    return (
      <div className="uploadWrapper">
        {
          imageUrl &&
          <div className="previewWrapper">
            <img data-imgsrc={imgPreviewProps.src} {...imgPreviewProps} onClick={viewer} alt=""/>
            <div className="operateWrapper">
              <i className="icon-coms-Delete operateIcon" onClick={this.handleDelete}/>
            </div>
          </div>
        }
        {
          !imageUrl &&
          <WeaUpload {...uploadProps}>
            <div className="upload-select-picture-card">
              <Icon type="plus"/>
              <div className="uploadText">{getLabel(111, "上传图片")}</div>
            </div>
          </WeaUpload>
        }
      </div>
    );
  }
}

export default ImageUploadList;