import { Component, render, createElement, createRef } from 'rax';
import './index.less';

import App from '../App';
import Drag, { FileType } from '../Drag';
import { substr_string } from '../Util/DragMgr';

// 每列的item文件
export default class DragItem extends Component {
  constructor(props) {
    super(props);
    this.isChecked = false;
    this.type = this.props.file.type;
    this.state = {
      src: './image/unselect.png',
      showBar: false,
      stage: '下载',
      showToolTip: false
    };
    this.downUrl = window.location.href;
    this.linkValue = createRef('');
    this.download = this.download.bind(this);
  }
  componentDidMount() {
    this.unChecked();
    if (this.props.file.type === FileType.NewFile && this.props.file.file) {
      Drag.inst.addUpQueueFile([
        {
          file: this.props.file.file,
          node: this
        }
      ]);
      // eslint-disable-next-line
      this.setState({
        showBar: true
      });
    }
    this.type = this.props.file.type;
  }
  onTouch = () => {
    this.isChecked = !this.isChecked;
    this.setState({
      src: this.isChecked ? './image/select.png' : './image/unselect.png'
    });
  }

  unChecked = () => {
    this.isChecked = false;
    this.setState({
      src: './image/unselect.png',
    });
  }

  download = (filename, folderName) => {
    if (this.type != FileType.OldFile) { // 先判断是否是新文件
      return;
    }
    App.inst.download(filename, folderName);
  }

  getFileName = () => {
    return this.props.file.name;
  }

  upProgress = (msg) => {
    // loaded total
    this.progressnode.style.width = msg.loaded / msg.total * 100 + '%';
    this.progresstext.innerText = (msg.loaded / msg.total * 100).toFixed(1) + '%';
  }
  upFinish = () => {
    this.type = FileType.OldFile;
    this.progressnode.style.width = '100%';
    this.progresstext.innerText = '100%';

    alert('文件:' + this.props.file.name + '上传成功');
    this.setState({
      showBar: false
    });
  }

  upFail = () => {
    alert('文件:' + this.props.file.name + '上传失败');
    Drag.inst.removeChildNode(this);
    // this.fileitembox.parentNode && this.fileitembox.parentNode.removeChild(this.fileitembox);
  }

  banClick = (e) => {
    e.stopPropagation();
  }

  deleteSingleFile = (name) => {
    const isDelete = confirm('确定删除:' + name + '文件吗？');
    if (isDelete) {
      const folderName = this.props.currentName;
      App.inst.deleteFiles({
        folderName,
        fileNames: [name]
      });
    }
  }

  copyDownloadLink = (filename, folderName) => {
    App.inst.copyLinkHaddler(filename, folderName);
  }

  copyStrOld = (val) => {
    var input = document.createElement('input');
    input.value = val;
    input.readOnly = true;
    document.body.appendChild(input);
    input.select();
    input.setSelectionRange(0, input.value.length);
    document.execCommand('Copy');
    document.body.removeChild(input);
    alert('复制成功');
  }

  _renderToolTip = (name) => {
    return (
      <div className={'drog_tool_tips_name'}>
        {name}
        <div className={'drog_tool_tips_triangle'} />
      </div>
    );
  }

  render() {
    Drag.inst.appendDragItem(this);
    this.props.file.node = this;
    return (
      <div ref={ref => this.fileitembox = ref} className={'up_fileitem'}>
        <div className={'up_fileselect'}>
          <img className={'up_selectimg'} src={this.state.src} />
        </div>
        <div className={'up_filename'}>
          {this.state.showToolTip ? this._renderToolTip(this.props.file.name) : ''}
          {substr_string(this.props.file.name)}
        </div>
        <div className={'up_filesize'}>{this.props.file.size}</div>
        <div className={'up_filecontrol'}>
          <span className={'up_file_delete_btn up_file_btn'} onClick={() => {
            this.deleteSingleFile(this.props.file.name);
          }}>删除</span>
          <a
            className={'up_file_download_btn up_file_btn'}
            href={`${this.downUrl}download/?fileName=${this.props.file.name}&folderName=${this.props.currentName}`}>
            下载
          </a>
          <span className={'up_file_copy_link_btn up_file_btn'} ref={this.linkValue} onClick={() => {
            const urlPath = window.location.href;
            const value = `${urlPath}download/?fileName=${this.props.file.name}&folderName=${this.props.currentName}`;
            this.copyStrOld(value);
          }}>
            复制下载链接
          </span>
        </div>
        <div className={'up_ontouchbox'} onClick={this.onTouch} onMouseEnter={() => {
          this.setState({
            showToolTip: true
          });
        }} onMouseLeave={() => {
          this.setState({
            showToolTip: false
          });
        }}
        />
        {this.state.showBar ? <div className={'up_progressbox'} onClick={this.banClick}>
          <div ref={ref => this.progressnode = ref} className={'up_progress'}>
            <p ref={ref => this.progresstext = ref} className={'text'} />
          </div>
        </div> : null
        }
      </div>
    );
  }
}