import React, { Component } from 'react';
import {
  WeaUpload,
  WeaHelpfulTip,
  WeaLocaleProvider,
} from "ecCom";
import {
  Button,
} from "antd";

const {getLabel} = WeaLocaleProvider;

export default class UploadPic extends Component {
  constructor(props) {
    super(props);
    this.state = {
      urllinkimagid: "",
      fields: props.fields || {},
      upStatus: false,
      list: [],
      urllinkimagid: props.urllinkimagid | "",
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      fields: nextProps.fields || {},
      urllinkimagid: nextProps.urllinkimagid || "",
    })
  }

  onUploading(upStatus) {
    this.setState({
        upStatus
    });

    this.setList((upStatus == 'uploading') ? [] : this.state.list);
  }

  setList = (list) => {
    this.setState({
        list
    });
  }
  
  render() {
    const {
      upStatus=false,
      list=[],
      fields,
      urllinkimagid="",
    } = this.state;
    return (!this.props.urllinkimagid) || (!(this.props.editRegister && this.props.showPic)) ? (
        <div>
            <div style={{float: 'left'}}>
                <WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@xdjoyv`}
                    uploadUrl={fields.uploadUrl}
                    category='string'
                    limitType={"gif,png,jpg,jpeg,ico,bmp"}
                    datas={upStatus === 'uploaded'  ? list : []}
                    onChange={(id, list) => {
                        this.setList(list); 
                        if(this.props.onChange && typeof(this.props.onChange) === "function") {
                          this.props.onChange(id[0],list[0].filename);
                        }
                    }}
                    onUploading={status => this.onUploading(status)}
                >
                  <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@3dcvbz`}>{getLabel('125333','选择文件')}</Button>
                </WeaUpload>
            </div>
            <div style={{float: 'left', paddingLeft: 10, paddingTop: 6}}>
              { list.length == 0 ? <p>{getLabel('384040','未选择任何文件')}</p> : list.map(file => <p>{file.filename}</p>) }
            </div>
            <div style={{float: 'left', marginLeft: 10, paddingTop: 6}}>
              <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@lciums`} title={fields.helpfulTip} width={238}/>
            </div>
        </div>
      ):<div>
        <img src={`${window.ecologyContentPath || ""}/weaver/weaver.file.FileDownload?fileid=${urllinkimagid}`} style={{width:32,height: 32,float:'left'}}  />
        <a style={{display: 'block',float: 'left',padding: 8}} onClick={() => {
          this.setList([]);
          if(this.props.onDel && typeof(this.props.onDel) === "function") {
            this.props.onDel();
          }
        }}>{getLabel("131966", '删除')}</a>
       </div>
  }
}
