import { Component, render, createElement, createRef } from 'rax';
import './index.less';
// import FileListItem from '../FileListItem';
import Drag from '../Drag';
import { reqGet, reqPost, reqGetDownload } from '../Util/request';
import { updateStrJoin } from '../Util/utils';
export default class App extends Component {
  static inst;
  constructor(props) {
    super(props);
    App.inst = this;
    this.checked = null;
    this.itemComs = [];
    this.maskRef = createRef();
    this.inputRef = createRef();
    this.state = {
      folderList: [], // 打开文件的第一层目录文件夹
      directory: '',
      currentIndex: -1,
      isLinkBlock: true,
      linkCopyFilename: '',
      linkCopyFolderName: '',
    };
  }

  componentDidMount() {
    this.reqFolderList((data) => {
      // this.onEnterFile("");
      // this.allFolders = data.data.folderList.slice();
      this.setState({
        directory: data.data.directory,
        folderList: data.data.folderList
      });
    });
  }

  // 渲染侧边栏
  _renderLiList = () => {
    const _this = this;
    return (
      _this.state.folderList.map((item, index) => {
        return (
          <li className={'app_li_cd'} key={index} style={
            { backgroundColor: this.state.currentIndex === index ? '#1890ff' : '',
              color: this.state.currentIndex === index ? '#fff' : '' }} onClick={() => {
            this.cdLiListClick(index, item.folderName);
          }}>
            {item.folderName}
          </li>
        );
      })
    );
  }

  // 需要将当前的打开文件名传入，传入 msg 参数
  // 感觉 fileList 有缓存
  _renderDrag = () => {
    if (!this.allFolders) return;
    let msg = this.state.folderList[this.state.currentIndex];
    if (this.state.folderList.length < this.allFolders.length) { // 当 查询时，直接置空
      msg = this.state.folderList[0];
    }
    if (this.state.folderList[0] === undefined || msg === undefined) {
      return (
        <Drag msg={msg} currentName={'未打开文件夹'} />
      );
    } else {
      return (
        <Drag msg={msg} currentName={msg.folderName} />
      );
    }
  }


  // 筛选文件夹
  search = () => {
    let arr = this.allFolders;
    if (!arr || arr === undefined) return;
    let value = this.input.value.trim();
    let newlist = [];
    if (this.state.folderList[0] !== undefined || value !== '') {
      if (value === '') {
        newlist = this.allFolders.slice();
      } else {
        if (!arr[0].folderName) return;
        for (let i = 0; i < arr.length; ++i) {
          if (arr[i].folderName.indexOf(value) != -1) {
            newlist.push(arr[i]);
          }
        }
      }
      this.setState({
        folderList: newlist,
        currentIndex: 0
      });
    } else {
      this.setState({
        folderList: arr
      });
    }
  }

  // 侧边栏点击事件
  cdLiListClick = (index, folderName) => { // 点击li菜单
    console.log('index:', index, 'folderName：', folderName);
    this.setState({
      currentIndex: index
    });
    Drag.inst.updateFileList([]);
    this.onEnterFile(folderName); // 进入文件夹
  }

  // 通过名字，打开文件
  onEnterFile = (folderName) => {
    this.reqFileList(folderName, (data) => {
      console.log('当前请求过来的数据：', data, folderName);
      // 先给 组件 文件列表置空置空再赋值
      if (String(data.data.fileList) === 'false') {
        alert(`当前请求失败，文件地址：${folderName} 不存在`);
      }
      this.updateFileList(data);
    });
  }

  // 通知 Drag 更新 Filelist
  updateFileList = (data) => {
    let alllists = data.data.fileList.slice();
    Drag.inst.updateFileList(alllists);
  }

  // 获取当前打开目录的文件列表
  reqFolderList = (cb) => {
    reqGet('./folderList', (data) => {
      if (data.err) {
        console.log('出错了：', data.err);
        return;
      }
      this.allFolders = data.data.folderList.slice();
      cb(data);
    });
  }

  reqFileList = (folderName, cb) => {
    let str = '/?folderName=' + folderName;
    reqGet('./fileList' + str, (data) => {
      if (data.err) {
        return;
      }
      cb(data);
    });
  }

  createFolder = () => {
    let folderName = this.newFolderName.value;
    if (folderName === '' || !folderName || !this.allFolders) {
      return;
    }
    let res = confirm(`确认添加:${folderName}文件夹吗？`);
    // let folderName = this.inputRef.current.value;
    if (res && folderName !== '') {
      reqGet('./create/?folderName=' + folderName, (data) => {
        if (data) {
          this.reqFolderList((result) => {
            // 清空，聚焦
            this.newFolderName.value = '';
            this.newFolderName.focus();
            this.setState({
              directory: result.data.directory,
              folderList: result.data.folderList
            });
          });
        }
      });
    }
  }

  // 获取当前打开文件的名字
  getCurFolderName = () => {
    let folderName = this.checked && this.checked.getFolderName();
    if (!folderName) {
      folderName = '';
    }
    return folderName;
  }

  // 根据文件名字，下载文件
  download(filename, folderName) {
    reqGetDownload('./download/?fileName=' + filename + '&folderName=' + folderName, (data) => {
      if (data.err) {
        return;
      }
    });
  }

  // 复制link链接
  copyLinkHaddler = (filename, folderName) => {
    this.maskRef.current.style.display = 'block';
    this.setState({
      isLinkBlock: true,
      linkCopyFilename: filename,
      linkCopyFolderName: folderName
    });
  }

  // 删除文件夹
  deleteFolder(folderName, cb) {
    reqGet('./deleteFolder/?folderName=' + folderName, (data) => {
      if (data) {
        cb();
        this.reqFolderList((result) => {
          // let folderName = this.getCurFolderName();
          // this.reqFileList(folderName,(data)=>{
          //   this.updateFileList(data)
          // })
          this.setState({
            directory: result.data.directory,
            folderList: result.data.folderList
          });
        });
      }
    });
  }

  // 删除文件
  deleteFiles(reqData) {
    reqPost('./deleteFiles', reqData, (resData) => {
      this.reqFileList(reqData.folderName, (data) => {
        this.updateFileList(data);
      });
    });
  }

  render() {
    return (
      <div className={'app_outbox'}>
        <div className={'app_header'}>
          <div className={'ah_title'}>
            GSFS文件管理系统&nbsp;&nbsp;&nbsp;{this.state.directory}
          </div>
        </div>
        <div className={'app_box'}>
          <div className={'app_newLeft'}>
            <ul className={'app_ul_cd'}>
              <li className={'app_li_cd_title'}>
                @文件列表
              </li>
              <li className={'app_li_cd_search'}>
                <input
                  ref={ref => this.input = ref}
                  className={'app_li_cd_search_input'}
                  type="text"
                  onBlur={this.search}
                  onKeyPress={e => {
                    console.log(e.keyCode);
                    if (e.keyCode == 13 || e.keyCode == 32) {
                      this.search();
                    }
                  }}
                  onInput={this.search}
                  placeholder="请输入筛选文件名" />
              </li>
              {
                this._renderLiList()
              }
            </ul>
          </div>
          <div className={'app_newRight'}>
            <div className={'app_nr_header'}>
              <div className={'app_nh_open_name'}>
                当前文件夹：<i>{this.state.directory}</i>
              </div>
              <div className={'app_nh_add_file'}>
                <input ref={ref => this.newFolderName = ref} type="text" maxLength="32" className={'ansf_input'} placeholder="添加文件夹" />
                <span
                  className={'ansf_sure_add_btn'}
                  onClick={this.createFolder}>确认添加</span>
              </div>
            </div>

            <div className={'app_nr_content'}>
              {/* <div className={'app_left'}>
                <div className={'app_search'}>
                  <div className={'as_searchinput'}>
                    筛选文件：
                    <input
                      ref={ref => this.input = ref}
                      className={'app_input'}
                      onInput={this.search}
                      onpropertychange={this.search}
                      type="text"
                      placeholder={'输入文件名筛选'} />
                  </div>
                </div>
                <div className={'app_lfbox'}>
                  <div className={'app_lffile'}>
                    {
                      this.state.folderList.map((msg, index) => {
                        return <FileListItem key={index} data={{ msg: msg, bgColor: listItemBgColor[index % 2] }} />;
                      })
                    }
                  </div>
                  <div className={'app_addfilebox'}>
                    <div className={'aa_addinput'}>
                      添加文件：
                      <input
                        ref={ref => this.newFolderName = ref}
                        className={'app_addfileInput'}
                        type="text"
                        placeholder={'输入文件名'} />
                    </div>
                    <div className={'addfileBtn_box'}>
                      <input className={'app_addfileBtn'} type="button" value={'确认添加'} onClick={this.createFolder} />
                    </div>
                  </div>
                </div>
              </div> */}
              <div className={'app_right'}>
                {
                  this._renderDrag()
                }
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}