import React from 'react'
import { Tree,Upload,Icon,Button,message } from 'antd';
import { queryApiActionPath } from "../utils/queryConfig";
import config from '@/webPublic/one_stop_public/config'


export default class UploadCom extends React.Component {
    constructor(props){
        super(props)
        const value = props.value || {};
         this.state = {

            files: value.files
        }
    }



      triggerChange = (changedValue) => {
        // Should provide an event to pass value to Form.
        const onChange = this.props.onChange;
        if (onChange) {
            onChange(Object.assign({}, this.state, changedValue));
        }
    }
    componentWillReceiveProps(nextProps) {
        // Should be a controlled component.
        if ('value' in nextProps) {
            const value = nextProps.value;
            this.setState(value);
        }
    }
    changeUrl=(info)=>{

            if (info.file.status === 'done') {
              message.success(`${info.file.name} 上传成功`);
              const files=this.state.files
              files.push({path:info.file.response,name:info.file.name})
              if (!('value' in this.props)) {
                this.setState({files });
            }
            this.triggerChange({files});
            } else if (info.file.status === 'error') {
              message.error(`${info.file.name} 上传失败`);
            }

    }
    remove=(path)=>{
      const files=this.state.files
      for(var i=0;i<files.length;i++){
        if(files[i].path==path){
          files.splice(i,1);
          break;
        }

      }
      if (!('value' in this.props)) {
        this.setState({files });
    }
    this.triggerChange({files});
    }
    render() {
        const {files}= this.state
        const{isMultiple,accept,btnName} = this.props
        const props = {
            name: 'file',
            multiple:isMultiple,
            accept:accept,
            action: config.uploadUrl,
            showUploadList:false,
            onChange:this.changeUrl
        }

        return (
            <div> <Upload {...props}>
            <Button>
              <Icon type="upload" />{btnName?btnName:"上传附件"}
            </Button>
          </Upload>
          <ul style={{paddingLeft:8}}>
          {files.map((f)=>{
            if(f.path&&f.path.indexOf('.png') !=-1||f.path.indexOf('.jpg') !=-1){
              return <li key={f.path}><img style={{width:100,height:100}} src={queryApiActionPath() + f.path}/><Icon style={{marginLeft:10}} type="delete"  onClick={this.remove.bind(this,f.path)} /></li>
            }
            return <li key={f.path}><a target="_blank" key={f.path} href={queryApiActionPath()+f.path} >{f.name}</a> <Icon style={{marginLeft:10}} type="delete"  onClick={this.remove.bind(this,f.path)} /></li>
          })}
          </ul>
          </div>

          );

    }
}
