import {Component,render,createElement} from 'rax';
import "./index.less";
import App from '../App';
import Drag, {FileType } from '../Drag';
import { reqPost } from '../Util/request';
export default class DragItem extends Component{
  constructor(props){
    super(props);
    this.isChecked = false;
    this.type = this.props.file.type;
    this.isUp = false;
    this.state={
      src:"./image/unselect.png",
      showBar:false,
      showImg:false,
      stage:"下载"
    }
  }

  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=()=>{
    if(this.type != FileType.OldFile){
      return;
    }
    App.inst.download(this.props.file.name)
  }

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

  upProgress=(msg)=>{
    // loaded total
    if(this.progressnode && this.progressnode.style){
      this.progressnode.style.width = msg.loaded/msg.total * 100 + "%";
    }
     
  }

  upFinish=()=>{
    this.isUp = false;
    this.type = FileType.OldFile;
    this.props.file.type = FileType.OldFile;
    this.progressnode.style.width = "0%";
      this.setState({
        showBar:false,
      })
      let folderName = App.inst.getCurFolderName();
      reqPost("./findFile", {folderName:folderName,fileName:this.props.file.name}, (data) => {
        if(data.data.result){
          this.setState({
            showImg:true
          })
        }
      })
  }

  configure=()=>{
    let dir = this.getFileName();
    let suffix = dir.slice(dir.lastIndexOf('.'),dir.length);
    if(suffix !== '.json'){    
      dir = dir.replace(suffix,'.json');
    }    
    App.inst.configure(dir)
  }

  upFail=()=>{
    this.isUp = false;
    alert("文件"+this.props.file.name+"上传失败");
    Drag.inst.removeChildNode(this)
  }

  upStart=()=>{
    this.isUp = true;
    this.setState({
      showBar:true
    })
  }

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

  componentWillUnmount() {
    
  }
  componentDidMount() {
    this.unChecked();
    console.log("props",this.props);
    if(this.props.file.type === FileType.OldFile){
      this.setState({
        showImg:true
      })
    }
    
  }

  needUp=()=>{
    if(this.props.file.type === FileType.NewFile && this.props.file.file && !this.isUp){
      Drag.inst.addUpQueueFile([
        {
          file:this.props.file.file,
          node:this
        }
      ]);
      
  }
  this.type = this.props.file.type;
  }


  render(){
    Drag.inst.appendDragItem(this);
    this.props.file.node = this;
    
    let curFolder = App.inst.getCurFolderName();
    this.needUp();
    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.showImg?<img className={"up_itemimg"} src={`${curFolder}/${this.props.file.name}?${Math.random()}`} />:null}
            {this.props.file.name}
          </div>
          <div className={"up_fileresult"} onClick={this.download.bind(this)}>{"下载"}</div>
          {/* <div className={"up_fileconfigure"} onclick={this.configure.bind(this)}>{"配置"}</div> */}
          <div className={"up_ontouchbox"} onClick={this.onTouch}></div>
          { this.state.showBar?<div className={"up_progressbox"} onClick={this.banClick}>
            <div ref={ref=>this.progressnode = ref} className={"up_progress"}></div>
          </div>:null
          }
        </div>
    )
  }
}