import Upload from '../index';

export default {
  data() {
    return {
      destroyed: false,
    };
  },
  methods: {
    destroy() {
      this.destroyed = true;
    },
  },
  render() {
    if (this.destroyed) {
      return null;
    }
    const propsObj = {
      action: '//jsonplaceholder.typicode.com/posts/',
      data: { a: 1, b: 2 },
      headers: {
        Authorization: 'xxxxxxx',
      },
      multiple: true,
      beforeUpload(file) {
        console.log('beforeUpload', file.name);
      },
    };
    const propsEvent = {
      start(file) {
        console.log('start', file, file.name);
      },
      success(file) {
        console.log('success', file);
      },
      progress(step, file) {
        console.log('progress', Math.round(step.percent), file.name);
      },
      error(err) {
        console.log('error', err);
      },
    };
    const uploaderProps = {
      props: {
        ...propsObj,
      },
      on: {
        ...propsEvent,
      },
      ref: 'inner',
    };
    const uploaderProps1 = {
      props: {
        ...propsObj,
        componentTag: 'div',
      },
      on: {
        ...propsEvent,
      },
    };
    const style = `
        .rc-upload-disabled {
           opacity:0.5;
        `;
    return (
      <div
        style={{
          margin: '100px',
        }}
      >
        <h2>固定位置</h2>

        <style>{style}</style>

        <div>
          <Upload {...uploaderProps}>
            <a>开始上传</a>
          </Upload>
        </div>

        <h2>滚动</h2>

        <div
          style={{
            height: '200px',
            overflow: 'auto',
            border: '1px solid red',
          }}
        >
          <div
            style={{
              height: '500px',
            }}
          >
            <Upload {...uploaderProps1} component="div" style={{ display: 'inline-block' }}>
              <a>开始上传2</a>
            </Upload>
          </div>
        </div>

        <button onClick={this.destroy}>destroy</button>
      </div>
    );
  },
};