yiyunjianzhu-vue/src/views/main_web/workspace/workspace.new.vue

<template>
  <div v-cloak>
    <app-header
      backBtnTitle="退出"
      :title="showTitle"
      :isWorkspaceTopBar="true"
      :showUserCenter="true"
      class="app-header-style workspace-header"
      v-if="!showWorkline"
    >
      <template #center>
        <!-- 工作链 -->
        <WorkLine class="my-workline"
          :class="{'adjust-workline-pos-client': isClient, 'adjust-workline-pos-web': !isClient}"
          :isShowlink="showWorkline"
          :listUserFolders="nodeFolders"
          :nowFolderIndex="nowFolderIndex"
          :nowFolderName="nowFolderName"
          :nestTemplateLists="nestTemplateLists"
          @goFolderAndBack="goFolderAndBack"
          @previousFolder="previousFolder"
          @showWorklinkPage="showWorklinkPage"
          @nowFolderClick="nowFolderClick"
          @hideWorklinkPage="hideWorklinkPage"
          @finishGetExchangeNodes="finishGetExchangeNodes"
        />
      </template>
      <template #right>
         <search-bar class="proj-search-bar"
            placeholder="请输入要搜索的文件名"
            @changeSearchContent="changeSearchContent"
            @hideSearchBar="hideSearchBar"
            @goToSearch="searchForFile"
            @showSearchBar="showSearchBar"
            @maxTextLengthArrived="maxTextLengthArrived"/>
      </template>
    </app-header>
    <div v-if="isShowSearchPage" class="search-res-page">
      <change-btn :titleList="titleList" class="operate-bar"
                  @changeContentBtnClick="changeContentBtnClick"/>
      <div class="out-wrap"> 
        <div class="search-res-page-wrap">
          <div class="list-group" v-if="currentBtnIndex == 0">
            <!-- 工作文件 -->
            <FileItem
              class="lisy-group-item"
              v-for="file in searchWorkFileList"
              :key="file.id"
              :file="file"
              :clientDownLoad="clientDownLoad"
              :showFileMilestone="showFileMilestone"
              :nodeFolder="currentNodeFolder"
              :currentFolder="currentFolder"
              @commitFile="commitFile(file)"
              @dblclickFile="fileClick(file)"
              @filePreview="filePreview"
              @openFileWith="openFileWith(file)"
              @openfileBtnClick="fileClick(file)"
              @copyFileBtnClick="copyWorkFileBtnClick(file)"
              @oneFileRightBtnClick="oneFileRightBtnClick"
              @deleteFileClick="deleteFileClick"
              :tempRightFileId="tempRightFileId"
              :localFileHashMap="localFileHashMap"
              :loadingState="localFileLoadStateMap[file.id]"
              @dragstart.native="onfileDragStart(file, $event)"
              draggable
            />
            <div class="no-file-tips" v-if="searchWorkFileList && searchWorkFileList.length == 0">搜索不到与“{{searchContent}}”相关的工作文件</div>
          </div>
          <div class="list-group" v-else-if="currentBtnIndex == 1">
            <!-- 协作文件 -->
            <FileItem
              v-for="file in searchCoopFileList"
              :key="file.id"
              :file="file"
              :tempRightFileId="tempRightFileId"
              :clientDownLoad="clientDownLoad"
              :showFileMilestone="showFileMilestone"
              :nodeFolder="currentNodeFolder"
              :currentFolder="currentFolder"
              @dblclickFile="fileClick(file)"
              @filePreview="filePreview"
              @openFileWith="openFileWith(file)"
              @openfileBtnClick="fileClick(file)"
              @oneFileRightBtnClick="oneFileRightBtnClick"
              :localFileHashMap="localFileHashMap"
              :loadingState="localFileLoadStateMap[file.id]"
              @dragstart.native="onfileDragStart(file, $event)"
              draggable
            />
            <div class="no-file-tips" v-if="searchCoopFileList && searchCoopFileList.length == 0">搜索不到与“{{searchContent}}”相关的协作文件</div>
          </div>
        </div>
    </div>
    </div>
    <div v-else>
      <app-header
        class="app-header-style"
        :title="projectName"
        :showUserCenter="true"
        backBtnTitle="回到协作空间"
        :onBackBtnClick="hideWorklinkPage"
        :isWorkspaceTopBar="true"
        v-if="showWorkline"
      >
      </app-header>
      <div class="listfilewarp mt-0">
        <!-- 这里主要是用到该组件的工作链图表 -->
        <WorkLine class="my-workline hack-work-line" ref="hackworkline"
          :class="{
                 'height-0': !showWorkline}"
          :isHideWorkFolders="true"
          :isShowlink="showWorkline"
          :listUserFolders="nodeFolders"
          :isCalcuteExchangeNode="false"
          :nowFolderIndex="nowFolderIndex"
          :nowFolderName="nowFolderName"
          :nestTemplateLists="nestTemplateLists"
          @goFolderAndBack="goFolderAndBack"
          @previousFolder="previousFolder"
          @showWorklinkPage="showWorklinkPage"
          @nowFolderClick="nowFolderClick"
          @hideWorklinkPage="hideWorklinkPage"
          @finishGetExchangeNodes="finishGetExchangeNodes"
        />
       
          <div class="layout_content2" v-show="!showWorkline" v-loading="loading">
            <section 
              id="workspace"
              :class="`${closepageH} layerout_H2`"
              @contextmenu.prevent="rightShowMenu($event, '新建文件夹', 4)"
            >
              <section class="yiyun_section_warp">
                <div class="yinyong_warpBox hidescollbar">
                  <div class="titlebar_head" id="bignav">
                    <!-- 面包屑导航 -->
                    <div
                      class="section_item section_item_aside_fl"
                    >
                      <span
                        class="yiyun_text-title-workspace" 
                      >
                        <el-breadcrumb class="folder_breadcrumb" separator-class="el-icon-arrow-right">
                          <el-breadcrumb-item @click.native="clickBreadcrumb(-1, 0)">工作文件</el-breadcrumb-item>
                          <el-breadcrumb-item
                            v-for="(breadFolder, breadIdx) in breadcrumbFolderList"
                            :key="breadFolder.id"
                            @click.native="clickBreadcrumb(breadIdx, 0)"
                          >{{breadFolder.folderName}}</el-breadcrumb-item>
                        </el-breadcrumb>
                      </span>
                    </div>
          
                    <!-- 工作列表主体 -->
                    <div
                      class="yiyun_row scollbarBox nobianju"
                    >
                      <AddFileButton
                        v-if="isClient"
                        @fileTempClick="fileTempClick"
                        :listTempFiles="listTempFiles"
                        :selectSystemFiles="selectSystemFiles"
                        :selectSystemFolders="selectSystemFolders"
                      />
                      <!-- 文件上传队列 -->
                      <div class="list-group">
                        <FileItem
                          class="lisy-group-item"
                          v-for="file in filterFiles(uploadFileList)"
                          :key="file.id"
                          :file="file"
                          :clientDownLoad="clientDownLoad"
                          :showFileMilestone="showFileMilestone"
                          :nodeFolder="currentNodeFolder"
                          :currentFolder="currentFolder"
                          :localFileHashMap="localFileHashMap"
                          :loadingState="localFileLoadStateMap[file.id]"
                        />
                      </div>
                      <div class="list-group">
                        <FileItem
                          class="lisy-group-item"
                          v-for="file in filterFiles(workFileList)"
                          :key="file.id"
                          :file="file"
                          :clientDownLoad="clientDownLoad"
                          :showFileMilestone="showFileMilestone"
                          :nodeFolder="currentNodeFolder"
                          :currentFolder="currentFolder"
                          @commitFile="commitFile(file)"
                          @dblclickFile="fileClick(file)"
                          @filePreview="filePreview"
                          @openFileWith="openFileWith(file)"
                          @openfileBtnClick="fileClick(file)"
                          @copyFileBtnClick="copyWorkFileBtnClick(file)"
                          @oneFileRightBtnClick="oneFileRightBtnClick"
                          @deleteFileClick="deleteFileClick"
                          :tempRightFileId="tempRightFileId"
                          :localFileHashMap="localFileHashMap"
                          :loadingState="localFileLoadStateMap[file.id]"
                          @dragstart.native="onfileDragStart(file, $event)"
                          draggable
                        />
                      </div>
                      <!--显示文件夹组 -->
                      <div class="list-group">
                        <FolderItem
                          v-for="folder in filterFolders(subFolderList)"
                          :key="folder.id"
                          :folder="folder"
                          :isLoading="localFolderLoadStateMap[folder.folderPath]"
                          @onRightMenuActive="oneFileRightBtnClick"
                          @onDownloadAll="downloadFolder"
                          :activeRightMenuId="tempRightFileId"
                          @dblclick.native="intoSubFolder(folder, 0)"
                          @commitFolder="commitFolder"

                        />
                      </div>
                    </div>
                  </div>
                </div>
              </section>
            </section>

            <div :class="[`${neibianju}`, {'coopBox-max-height': isShowShadow && isCollapse}]" id="bottomBox">
              <div class="titleBox">
                <span class="yiyun_zhediebtn DevtopIcon">
                  <i
                    class="Cicon text_gray icon font_family icon-icon_zhankai"
                    title="展开面板"
                    v-show="isCollapse"
                    @click="openCopage"
                  ></i>
                  <i
                    class="Cicon text_gray icon font_family icon-icon_shouqi"
                    title="折叠面板"
                    v-show="!isCollapse"
                    @click="closeCopage"
                  ></i>
                </span>
              
                <div class="title_warp">
                  <div class=" " id="bignav">

                    <div class="section_item fl section_item_aside_fl xiangdui">
                      <div class="tabtltlebox">
                        <div
                        class="section_item section_item_aside_fl"
                        >
                          <span
                            class="yiyun_text-title-workspace mr-20 ml-8"
                          >
                            <el-breadcrumb class="folder_breadcrumb" separator-class="el-icon-arrow-right">
                              <el-breadcrumb-item @click.native="clickBreadcrumb(-1, 1)">协作文件</el-breadcrumb-item>
                              <el-breadcrumb-item
                                v-for="(breadFolder, breadIdx) in breadcrumbFolderListInCoop"
                                :key="breadFolder.id"
                                @click.native="clickBreadcrumb(breadIdx, 1)"
                              >{{breadFolder.folderName}}</el-breadcrumb-item>
                            </el-breadcrumb>
                          </span>
                        </div>
                      </div>
                    </div>
                    <div class="section_item fr section_item_aside_fr">
                      <div class="fr ml-10">
                        <span class="bj_label">协作文件均只读</span>
                      </div>
                      <div class="fifle_search fr"></div>
                    </div>
                  </div>
                  <div class="clear"></div>
                </div>
              </div>

              <div class="fifleBox" id="coopFileContainer">
                <div class="yiyun_section_warp layerout_H3" id="coopFileBox">
                  <!-- 文件大box -->
                  <div class="yinyong_warpBox">
                    <!-- 协作文件 -->
                    <div v-if="!isShowStartNodeFolders">
                      <div
                        class="mt-12"
                      >
                        <FileItem
                          v-for="file in filterFilesInCoop(cooperationFileList)"
                          :key="file.id"
                          :file="file"
                          :tempRightFileId="tempRightFileId"
                          :clientDownLoad="clientDownLoad"
                          :showFileMilestone="showFileMilestone"
                          :nodeFolder="currentNodeFolder"
                          :currentFolder="currentFolder"
                          @dblclickFile="fileClick(file)"
                          @filePreview="filePreview"
                          @openFileWith="openFileWith(file)"
                          @openfileBtnClick="fileClick(file)"
                          @oneFileRightBtnClick="oneFileRightBtnClick"
                          :localFileHashMap="localFileHashMap"
                          :loadingState="localFileLoadStateMap[file.id]"
                          @dragstart.native="onfileDragStart(file, $event)"
                          draggable
                        />
                      </div>
                      <!-- 协作文件以文件夹的形式展示 -->
                      <div class="list-group">
                          <FolderItem
                          v-for="folder in filterFoldersInCoop(coopSubFolderList)"
                          :key="folder.id"
                          :folder="folder"
                          :isWorkFolder=false
                          :isLoading="localFolderLoadStateMap[folder.folderPath]"
                          @onRightMenuActive="oneFileRightBtnClick"
                          @onDownloadAll="downloadFolder"
                          :activeRightMenuId="tempRightFileId"
                          @dblclick.native="intoSubFolder(folder, 1)"
                          @commitFolder="commitFolder"
                        />
                      </div>
                    </div>
                    <div v-else>
                      <div class="list-group">
                        <FolderItem 
                        v-for="folder in exchangeNodeListsInCoop"
                        :key="folder.id"
                        :folder="folder"
                        :isWorkFolder=false
                        :isLoading="localFolderLoadStateMap[folder.folderPath]"
                        @onRightMenuActive="oneFileRightBtnClick"
                        @onDownloadAll="downloadFolder"
                        :activeRightMenuId="tempRightFileId"
                        @dblclick.native="intoSubFolder(folder, 1), isShowStartNodeFolders = !isShowStartNodeFolders, topFolderInCoop = folder"
                        @commitFolder="commitFolder"
                      />
                    </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="showdowfix" id="bottomoShadow" v-show="isShowShadow"></div>

            </div>

            <!-- 右键菜单 -->
            <div
              v-show="rightMenuvisible"
              :style="{ left: rightMenuleft + 'px', top: rightMenuTop + 'px' }"
              class="contextmenu"
            >
              <!--新建文件分组-->
              <ul
                class="rightMenu"
              >
                <li
                  @click="newCreateFolderGroup"
                >
                  新建文件夹
                </li>
                <li
                  @click="openNativeCurrentFolder"
                  v-if="isClient && this.localWorkspacePrefix"
                >
                  打开本地工作目录
                </li>
              </ul>
            </div>
          </div>
    
      </div>
    </div>

    <!-- 文件在线预览 -->
    <el-dialog
    width="900px"
    :visible.sync="isVideo"
    :close-on-click-modal="false"
    @close="videoClose"
    >
    <div class="filePreview">
      <video :src="videoSrc" controls="controls"></video>
    </div>

    </el-dialog>

    <!-- 创建文件夹组 -->
    <el-dialog
      title="创建文件夹"
      @submit.native.prevent
      :visible.sync="dialogNewFolderGroup"
      width="460px"
      :close-on-click-modal="false"
    >
      <el-form>
        <div class="appImgiconbox">
          <img src="/static/img/folder.png" alt />
        </div>
        <el-form-item>
          <el-input
            v-model="folderGroupData.FolderName"
            @keyup.enter.native="createSubFolder"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogNewFolderGroup = false">取 消</el-button>
        <el-button @click="createSubFolder()" type="primary">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 创建样本文件分组 -->
    <el-dialog v-if="currentSelectTempFile" class="temp-file-dialog"
    :title="showNewTemplateFileDialogTitle"
    @submit.native.prevent
    :visible.sync="isShowNewTemplateFileDialog"
    width="460px"
    :show-close="false"
    :close-on-click-modal="false"
    >
    <el-form>
      <div class="appImgiconbox"
      v-if="oneOf(currentSelectTempFile.extension, ['doc','docx','dwg','dxf','gif','jpeg','jpg','max','nwc','pdf','png','ppt','pptx','rar','rvt','skp','txt','xls','xlsx','xmind','zip'])">
        <img  
        :src="
          '/static/img/files/file_sample_' + currentSelectTempFile.extension + '.svg'
        "
        alt
        />
      </div>
      <div v-else class="img-container">
          <!-- 非图片文件图标 -->
          <div
          v-if="notPicIcon()"
          class="defultImage-small"
          :class="`${currentSelectTempFile.extension}-mid`"
          />
            <!-- 图片文件图标 -->
          <div
              v-else-if="picIcon()"
              class="defultImage-small img_bg-mid"
          >
            <div class="file_Im gbox-mid">
              <img v-lazy="currentSelectTempFile.alias" alt class="file_Img" />
            </div>
          </div>
          <!-- 视频文件图标 -->
          <div
          v-else
          class="video-small"
          >
        </div>
      </div>
      <div class="guide-template-file-name">{{projectName + '_' + currentNodeFolder.folderName + '_' + currentSelectTempFile.fileName + '.' + currentSelectTempFile.extension}}</div>
      <el-form-item>
        <el-input
          v-model="currentSelectTempFile.fileName"
          @keyup.enter.native="createTemplateFile"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="isShowNewTemplateFileDialog = false">取 消</el-button>
      <el-button @click.stop="createTemplateFile()" type="primary">完成创建</el-button>
    </div>
  </el-dialog>
  </div>
</template>

<script>
import Vue from "vue";
import AppHeader from "@/components/app-header";
import SearchBar from "@/components/search-bar/search-bar";
import ChangeBtn from "@/components/change-btn/change-btn";
import commonJs from "@/common/webCommon";
// import forgeview from "@/views/components/forgeview/forgeview.vue";
// import gismap from "@/views/components/gismap/gismap.vue";
// import officeview from "@/views/components/officeview/officeview.vue";
// import imageview from "@/views/components/imageview/imageview.vue";
// import BMapComponent from "@/views/components/map/bmap";
// import DistWork from "@/views/components_web/distWork/distWork";
import WorkLine from "./components/workLine";
import AddFileButton from './components/add-file-button';
// import ProjSetting from "@/views/components_web/projSetting/projSetting";
// import FileShare from "@/views/components_web/share_setting/fileshare";
// import draggable from "vuedraggable";
import vuetify from "vuetify";
import system from '@/services/system';
import { queryAllTemplateNodeModelFile, queryNestTemplateByTemplateId } from '@/services/template.js';
import * as services from './service';
import * as tempalteService from '@/services/template.js';
import { firstCharToLowerCase, firstCharToUpperCase, notify } from '@/utils/tool';
import FileItem from './components/file-item';
import FolderItem from './components/folder-item';
import { FileWorkStatus, getFileStoreKey, injectionFileLocalStatus, LoadingEnum, VirtualFolder, analyzeRelativePath, imgExtensionList, RecExtensionList, VideoExtensionList, office, filePreviewList } from './helper';
import { propertyOf, uniqBy, throttle, flatten, debounce, cloneDeep } from 'lodash';
import { fetchApi } from '@/utils/request';
import template_marketVue from '../../manage_company/template_market.vue';
const $ = window.jQuery;
const Velocity = window.Velocity;
Vue.use(vuetify);
const { DOWNLOADING, UPLOADING } = LoadingEnum;
const { WORKING, NOT_WORKING } = FileWorkStatus;

const initialTempFile = (folderGroupID, folderGroupName) => ({
  archID: null,
  childCount: 0,
  createTime: "",
  createUserID: "",
  deleted: 0,
  folderGroupID,
  folderGroupName,
  folderID: "",
  levelId: "",
  modifyTime: "",
  modifyUserID: "",
  superID: "",
});

const initialFolderData = () =>({
  Id:"",
  ProjId:"",
  SuperId:"",
  LevelId:"",
  FirstFolderId:"",
  FolderName:"",
  TemplateId:"",
  NodeId:"",
  SysCode:"",
  FileCount:0,
  ChildCount:0,
  Deleted:0,
  Customed:0,
  CreateUserId:"",
  CreateTime:"",
  ModifyUserId:"",
  ModifyTime:"",
});

// const fileIsDownloaded = file => file.downloadStatus === DownloadStatus.DOWNLOADED;

export default {
  components: {
    AppHeader,
    SearchBar,
    ChangeBtn,
    WorkLine,
    AddFileButton,
    // draggable,
    FileItem,
    FolderItem,
  },
  data(){
    return {
      videoSrc:'',
      isVideo:false,
      loading: false, // 不一定用得上
      isClient: system.isClient,
      userId: sessionStorage.userId, // 当前用户id
      projectId: sessionStorage.projId, // 当前项目id
      projectName: sessionStorage.projName, // 当前项目名称
      isShowpageIcon: true, //	协作空间折叠按钮状态
      isCollapse: true,//协作空间底部协作文件一开始是属于折叠状态
      closepageH: '', //	底部协作文件展开高度   默认为空，展开后高度为closepageH
      showWorkline: false, // 工作链显示开关 原为isShowworklink
      nodeFolders: [], // 节点文件夹
      currentNodeFolder: {}, // 当前节点文件夹
      currentFolder: {}, // 当前文件夹，可以是节点文件夹，可以是子文件夹
      currentFolderInCoop: {},//协作文件下当前的文件夹
      topFolderInCoop: {},//在协作文件中 点击的文件夹
      /* 右键菜单 */
      rightMenuvisible: false,
      rightMenuleft: 0,
      rightMenuTop: 0,
      dialogNewFolderGroup: false, // 新建文件分组组弹窗
      folderGroupData: initialFolderData(), // 文件分组数据

      localWorkspacePrefix: '', // 本地工作目录前缀
      socketIns: null, // 监听文件变化的socket实例
      timerIns: null, // 文件定时任务实例
      folderMap: {}, // 节点文件夹id哈希： { [folderId]: folder } 
      subFolderMap: {}, // 子文件夹哈希: { [folderPath]: VirtualFolder }

      breadcrumbFolderList: [], // 面包屑导航对应的文件夹队列
      breadcrumbFolderListInCoop: [],//协作文件夹对应额面包屑导航

      uploadFileList: [], // 上传文件的队列
      workFileList: [], // 工作文件队列

      listTempFiles: [],//样板文件列表
      currentSelectTempFile: null,//选择创建的样本文件
      isShowNewTemplateFileDialog: false,//显示新建样本文件弹框

      workSubFolderList: [], // 工作文件夹队列
      coopSubFolderList: [],//协作文件夹队列
      tempWorkSubFolderList: [], // 临时的工作文件夹队列
      cooperationFileList: [], // 协作文件队列

      neibianju: "neibianju", // 协作文件槽样式
      isShowShadow: false,
      localFileHashMap: null, // { `${节点名称}\\${文件名称}.${文件扩展名}`: `${ipfsCid}` }
      /**
       * 文件本地加载状态表
       * 格式: {
       *  [file.id]: {
       *    type: DOWNLOADING | UPLOADING
       *    loadProgress: number | string
       *    loadSize: number | string
       *    totalSize: number | string
       *    unit: string
       *  }
       * }
       */
      localFileLoadStateMap: {},
      /**
       * 文件夹本地加载状态表
       * 格式: {
       *  [folder.folderPath]: boolean
       * }
       */
      localFolderLoadStateMap: {},

      tempRightFileId: "", // 存储点击了右键菜单的id
      isShowStartNodeFolders: true,//协作文件是否显示一开始的节点文件夹
      isfinishGetExchangeNodes: false,
      allNodeFolders: [],//保存除去项目节点 公共文件夹后 的所有节点
      exchangeNodeListsInCoop: [],//存储与当前节点具有交换关系的节点列表
      reverseLocalFileHashMap: {},//键名是 ipfscid 键值是localFileHashMap的键名
      
      currentBtnIndex: 0,//0 是工作文件按钮 1是协作文件按钮
      titleList: ['工作文件', '协作文件'],
      isShowSearchBar: false,//控制搜索框显示隐藏
      searchContent: '',//搜索的文件名称
      searchWorkFileList: [],//搜索得到的工作文件列表
      searchCoopFileList: [],//搜索得到的协作文件列表

      isAllFileLoaded: false,//当前工作节点下的文件状态是否都加载完毕
      hackWorkLine: null,

      nestTemplateLists: [],
    };
  },
  mounted: function () {
    this.hackWorkLine = this.$refs.hackworkline;
    window.addEventListener("scroll", this.onscroll, true);

    this.$nextTick(()=> {
      this.listenBottomHeight();
    })
    // window.addEventListener("resize", this.listenBottomHeight, true);
    if(this.isClient) {
      this.initWorkspaceDropEvent();
    }
    //添加鼠标移入齿轮事件
    // window.addEventListener("mouseenter", this.setIconMouseEnter, true);
    this.fetchNodeFolders();
    this.fetchFoldersByProjId();
    this.getNestNode(sessionStorage.templateID);

    this.socketIns = system.entryProject(
      sessionStorage.projName, sessionStorage.accountName,
      this.onSocketFileChangeDetected.bind(this),
       (localWorkspacePrefix) => { this.localWorkspacePrefix = localWorkspacePrefix;},
      errorEvent => { 
        this.$notify({
          message:'本地网关通讯失败',
          title:'502错误',
          type:'error'
        })
       }
    );
    this.timerIns = setTimeout(() => { this.intervalTask(); }, 3000);
  },
  destroyed: function () {
    window.removeEventListener("scroll", this.onscroll);
    // window.removeEventListener("resize", this.listenBottomHeight);
    // window.removeEventListener("mouseenter", this.setIconMouseEnter);
    
    window.clearTimeout(this.timerIns);
    this.timerIns = null;
    system.leaveProject(this.socketIns);
    sessionStorage.removeItem('nowFolderIndex');
  },
  computed: {
    // 搜索文件时 中间导航栏的标题
    showTitle() {
      return this.isShowSearchBar && this.searchContent ? `“${this.searchContent}”搜索结果` : this.projectName;
    },
    isShowSearchPage() {
      const rg = /^\s*$/;
      return this.isShowSearchBar && !rg.test(this.searchContent);
    },
    // 创建样板文件的标题 创建XXX文件
    showNewTemplateFileDialogTitle() {
      return `创建${this.currentSelectTempFile ? this.currentSelectTempFile.extension : ''}文件`;
    },
    // 当前节点文件夹在节点文件夹数组中的顺序
    nowFolderIndex() {
      return this.nodeFolders && this.nodeFolders.indexOf(this.currentNodeFolder);
    },
    // 当前节点文件夹的名称
    nowFolderName() {
      return this.currentNodeFolder.folderName;
    },
    subFolderList() {
      const uniqSubFolderList = uniqBy(this.workSubFolderList.concat(this.tempWorkSubFolderList), folder => folder.id);
      return uniqSubFolderList
    },
    // 得到协作文件展示区域的实际高度
    coopBoxRealHeight() {
      return document.getElementById('coopFileBox') ? document.getElementById('coopFileBox').offsetHeight : 0;
    }
  },
  methods: {
    async getNestNode(id){
      const res1 = await queryNestTemplateByTemplateId(id);
      const temp = res1.Data || [];
      const resList = [...res1.Data]
      circulateGetNestNode(temp, resList);
      this.nestTemplateLists= resList;
      
      function circulateGetNestNode(targetList, resList) {
        targetList.forEach(async item => {
          const res2 = await queryNestTemplateByTemplateId(item.TemplateId);
          const resData = res2.Data || [];
          if(resData.length > 0) {
            resList.push(...resData);
          }
        })
      }
    },
    // 搜索框字数超出35个字
    maxTextLengthArrived() {
      this.$notify({
        message: '请输入35个字之内的搜索内容',
        type: ["warning"],
      })
    },
    /**
    * 搜索文件
    */
    //切换点击工作文件 协作文件
    changeContentBtnClick(index) {
      this.currentBtnIndex = index;
    },
    changeSearchContent(content) {
      this.searchContent = content;
    },
    hideSearchBar() {
      this.isShowSearchBar = false;
      this.searchContent = '';
      this.currentBtnIndex = 0;
    },
    showSearchBar() {
      this.isShowSearchBar = true;
    },
    searchForFile: debounce(async function() {
      const rg = /^\s*$/;
      if(rg.test(this.searchContent)) {
        return;
      } else {
        const folderId = this.currentNodeFolder.id;
        const res = await services.searchFileListByFolderIdAndFileName(folderId, this.searchContent);
        if(res.Code === 0) {
          const tempWorkFileList = res.Data.workFile || [];
          const tempCoopFileList = res.Data.coordinationFiles || [];
          
          this.searchWorkFileList = tempWorkFileList.length > 0 ? tempWorkFileList.map(f => firstCharToLowerCase(f)) : [];
          this.searchCoopFileList = tempCoopFileList.length > 0 ? tempCoopFileList.map(cf => firstCharToLowerCase(cf)) : [];

          this.currentBtnIndex = 0;
        } else {
            this.$notify({
              type: ['error'],
              message:'查询数据失败, 请稍后重试。'
            })
          }
      }
    }, 500),
    notPicIcon() {
     return !this.oneOf(this.currentSelectTempFile.extension, imgExtensionList) && !this.oneOf(this.currentSelectTempFile.extension, VideoExtensionList)
    },
    picIcon() {
      return this.oneOf(this.currentSelectTempFile.extension, imgExtensionList);
    },
    // 创建样本文件
   async createTemplateFile() {
      let tempName = this.currentSelectTempFile.fileName;
      let temExtension = this.currentSelectTempFile.extension;
      //判断输入的名字是否重复 
      let isExists = this.workFileList.findIndex(file => file.archName === tempName && file.extension == temExtension);
      if(isExists > -1) {
        this.$notify({
          type: "warning",
          message: `文件名重复 请重新输入。`,
          offset: 100,
          duration: 2500,
        });
        return;
      }
      const time = new Date();
      const fileRelativePath = this.currentFolder.folderPath ? this.currentFolder.folderPath : '';
      let file = {
      "id": this.currentSelectTempFile.id,
      "projId":this.projectId,
      "folderId": this.currentNodeFolder.id,
      "archName":tempName,
      "extension":temExtension,
      "ipfsCid":this.currentSelectTempFile.hash,
      "fileSize":this.currentSelectTempFile.fileSize,
      "folderLevelId":this.currentNodeFolder.levelId,
      "status":0,
      "workStatus":0,
      "commonStatus":0,
      "deleted":this.currentSelectTempFile.deleted,
      "milestone":0,
      "version":0,
      "showUrl":"",
      "createUserId":this.userId,
      "createTime":time,
      "modifyUserId":this.userId,
      "modifyTime":time,
      "isShowRecycle":0,
      "relativePath":fileRelativePath}

      const addFileRes = await services.addFile(file);

      if(addFileRes.Code == 0) {
        this.fetchFolderFiles();
        this.isShowNewTemplateFileDialog = false;
        this.$notify({
          message: `文件 “${tempName}” 创建成功。`,
          type: "success",
          offset: 100,
          duration: 2500,
        });
        return;
      } else {
        // this.fetchFolderFiles();
        this.isShowNewTemplateFileDialog = false;
        this.$notify({
          message: `文件 “${tempName}” 创建失败 请稍后重试。`,
          type: "error",
          offset: 100,
          duration: 2500,
        });
        return;
      }
  
    },
    // 点击了样本文件
    fileTempClick(item) {
      this.isShowNewTemplateFileDialog = true;
      this.currentSelectTempFile = {...item};
    },
    // 加载样本文件列表
    async loadListTempFiles() {
      if(this.nodeFolders && this.nodeFolders[this.nowFolderIndex]) {
        const nodeId = this.nodeFolders[this.nowFolderIndex].nodeId;
        const res = await queryAllTemplateNodeModelFile(nodeId);
        if (res.Code !== 0) return;
        if(res.Data.length > 0) {
          this.listTempFiles = res.Data.map(f => firstCharToLowerCase(f));
        } else {
          this.listTempFiles = [];
        }
      }
    },
    //预览文件
    async filePreview(file,type){
      const url = await services.filePreview(sessionStorage.companyId);
      const params={
        API:'company/queryFileOnlineUrlByCompanyId',
        Action:'打开文件',
        CompanyName:sessionStorage.CompanyName,
        Subject:file.archName+"."+file.extension,
        Source:sessionStorage.client,  
        ProjectName:sessionStorage.projName,
      }
      fetchApi('operation/record',params);
      const Url="http://"+url.Data;
      if(type == 2){
        //const link=encodeURIComponent(Url)
        const officeApi="http://www.lockingos.org:8012/onlinePreview?url=";
        const fullfilename="?fullfilename="+file.archName+"."+file.extension;
        console.log(officeApi+Url + file.ipfsCid + fullfilename )
        const link = officeApi + encodeURIComponent(Url + file.ipfsCid + fullfilename) + '&officePreviewType=pdf';
        window.open(link,'');
      }else if(type == 1){
        this.isVideo=true;
        this.videoSrc=Url+file.ipfsCid;        
      }else{
        return;
      }

    },
    //
    videoClose(){
      this.videoSrc="";
    },
    // 删除文件夹 递归删除文件夹下面的所有文件
    deleteFolderClick(id) {
      const { isClient, subFolderList, workFileList, subFolderMap, userId, localFileHashMap, reverseLocalFileHashMap } = this;
      const deleteFolderName = subFolderMap[id].folderName;
      const thisApp = this;
      const totalDeleteFileLists = [];
      this.$confirm(`确认删除文件夹“${deleteFolderName}”吗？`, "", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          showClose: false,
          type: "warning",
        }).then(async function () {
          circulateDelete(id);
          const totalNum = totalDeleteFileLists.length;
          console.log('要删除的文件总数是', totalNum);
          let isFileInWorking = totalDeleteFileLists.find(f => f.workStatus == 2 && f.modifyUserId !== userId);
          if(isFileInWorking) {
            // 提示 该文件夹下有他人正在工作中的文件 -> 删除失败
            thisApp.$notify({
                message: `“${deleteFolderName}”文件夹下存在“工作中”文件,删除失败。`,
                type: "error",
                offset: 100,
                duration: 2500,
              });
          } else {
            // 删除文件夹
            let counter = 0;
            totalDeleteFileLists.forEach(async delFile => {
             isClient && delete localFileHashMap[reverseLocalFileHashMap[delFile.ipfsCid]];
              const res = await services.deleteFile(delFile.id);
              counter = res.Code == 0 ? counter+1 : counter;
              if(counter == totalNum) {
                thisApp.$notify({
                  message: `“${deleteFolderName}”文件夹已删除。`,
                  type: ["success"],
                  duration: 2500,
                });
              }
            thisApp.fetchFolderFiles();
          })
        }
      })
          
      function circulateDelete(deleteFolderId) {
        const delFolderLists = subFolderList.filter(folder => folder.parentFolderPath == deleteFolderId);
        if(delFolderLists.length == 0) {
          //表明到了最底层的文件夹 删除deleteFolderId对应这个文件夹下面的所有文件
          let delFileLists =  workFileList.filter(file => file.relativePath == deleteFolderId);
         
          // 删除与这个要删除文件夹同级的文件
          const parentFolderPath = subFolderMap[deleteFolderId].parentFolderPath
          if(parentFolderPath !== "") {
            const tempLists = workFileList.filter(wf => wf.relativePath == parentFolderPath);
            delFileLists.push(...tempLists);
          }
          totalDeleteFileLists.push(...delFileLists);
        }
        delFolderLists.forEach(df => {
          circulateDelete(df.id);
        })
      }
    
    },
    // 当workLine组件获得节点的交换节点的时候 调用函数
    finishGetExchangeNodes() {
      this.isfinishGetExchangeNodes = true;
      this.getExchangeNodes(); 
    },
    // 协作文件一开始显示的文件夹要显示具有节点交换关系的文件夹 但是这个时候listShareFrom[1]还没有塞入值
    getExchangeNodes() {
      const froms = this.currentNodeFolder.listsShareFrom[1];
      const tempMap = froms.map(f => f.id);
      this.exchangeNodeListsInCoop = this.allNodeFolders.filter(folder => tempMap.includes(folder.id));
      //注意： 这里的nodeFolders只会包含当前账户能看到的节点 不是全部的节点
    },
    async fetchFoldersByProjId() {
      const data = await this.$fetchApi('folder/queryNodeFolderListByProjectId', { projectId: sessionStorage.projId });
      let [topFoler, commonFolder, ...resFolders] = data.Data.folder;
      this.allNodeFolders = resFolders.map(f => firstCharToLowerCase(f)) || [];
      
    },
    // 对协作文件的relativePath处理 生成文件夹
    dealWithCoopFiles(fileList) {
      const folderList = [];
      const folderMap = {};

      fileList.forEach(file => {
        const relativePath = file.relativePath;
          if(relativePath) {
            const paths = relativePath.split('/');
            paths.forEach((folderName, idx) => {
              const fullRelativePath = paths.slice(0, idx + 1).join('/');
              if(folderMap[fullRelativePath]) return;
              const folder = new VirtualFolder(fullRelativePath);
              folder.topFolderId = file.folderId;
              const parentRelativePath = folder.parentFolderPath;
              folderList.push(folder);
              folderMap[fullRelativePath] = folder;
              if(folderMap[parentRelativePath]) {
                folderMap[parentRelativePath].childCount++;
              }
            });
            folderMap[relativePath].fileCount++;
          } 
      });
      this.coopSubFolderList = folderList;
    },
    // 接收到了一个文件的右键菜单点击事件
    oneFileRightBtnClick(id) {
      this.tempRightFileId = id;
      this.rightMenuvisible = false;
    },
    // 文件展示过滤
    filterFiles(fileList) {
      // 子文件会有这个属性，节点文件夹不会有
      const { folderPath = '' }  =  this.currentFolder ;
      return fileList.filter(file => {
        if(file.relativePath !== folderPath) return false;
        return true;
      });
    },
    // 文件夹展示过滤
    filterFolders(folderList) {
      // 子文件会有这个属性，节点文件夹不会有
      const { folderPath = '' }  =  this.currentFolder;
      return folderList.filter(folder => {
        if(folder.parentFolderPath !== folderPath) return false;
        return true;
      });
    },
    // 协作文件下的文件展示过滤
    filterFilesInCoop(fileList){
      const { folderPath = '' }  =  this.currentFolderInCoop;
      return fileList.filter(file=> {
        if(file.relativePath !== folderPath) {
          return false;
        } else if(file.relativePath == folderPath && file.folderId == this.topFolderInCoop.id) {
          return true;
        }
      });
    },
    // 协作文件下的文件夹展示过滤 
    filterFoldersInCoop(folderList) {
      const { folderPath = ''}  =  this.currentFolderInCoop;
      return folderList.filter(folder => {
        if(folder.parentFolderPath !== folderPath) {
          return false;
        } else if(folder.parentFolderPath == folderPath && folder.topFolderId == this.topFolderInCoop.id) {
          return true;
        }
        
      });
    },
    // removeMilestone(filesList){
    //   return filesList.filter(file=>{
    //     return file.milestone != 2;
    //   })
    // },
    oneOf(target, list) {
      return list.indexOf(target) !== -1;
    },
    /* 全局监听事件 */
    initWorkspaceDropEvent() {
      const dropbox = document.getElementById('workspace');
      dropbox.addEventListener("dragenter", this.stopPropagation);
      dropbox.addEventListener("dragover", this.stopPropagation);
      dropbox.addEventListener("dragleave", this.stopPropagation);
      dropbox.addEventListener('drop', this.fileDropEvent, false);
    },
    // 从客户端外拖入文件并上传
    fileDropEvent(e) {
      const files = propertyOf(e)('dataTransfer.files');
      if(!files || files.length === 0 || e.dataTransfer.effectAllowed == 'copyLink') return;
      const itemPaths = Array.from(files).map(file => file.path);
      this.clientUpload(itemPaths);
      // itemPaths.forEach(async fullPath => {
      //   const maybeTasks = await system.analyzeSystemPath(fullPath);
      //   const tasks = maybeTasks || [];
      //   tasks.forEach(uploadTask => this.clientUpload(uploadTask));
      // });
    },
    stopPropagation(e) {
      e.stopPropagation();
      e.preventDefault();
    },
    // 从文件列表中拖到本地
    onfileDragStart(file, e) {
      e.dataTransfer.effectAllowed = 'move';
      this.stopPropagation(e);
      if(!this.isClient) return;
      const { nodeName, id: fileId } = file;
      const isCooperationFile = !!nodeName;
      const fileStoreKey = getFileStoreKey(file, this.currentNodeFolder);
      // 本地没文件，不能拖拽
      if(!this.localFileHashMap[fileStoreKey]) return;
      
      if(!isCooperationFile) { 
        if(file.workStatus === WORKING && sessionStorage.userId !== file.modifyUserId) { // 同节点其他人正在操作的文件不能拖拽
          return; 
        }
        services.changeFileWorkStatus(fileId, WORKING)
          .then(flagRes => {
            if(flagRes.Code !== 0) return;
            file.workStatus = WORKING;
            file.modifyUserId = sessionStorage.userId;
            this.fetchFolderFiles();
          });
      }
      // 协作文件可以打开

      const { ipcRenderer } = global.electron;
      ipcRenderer.invoke('project-file-dnd', `${this.localWorkspacePrefix}\\${fileStoreKey}`);
    },
    async intervalTask() {
      await this.fetchFolderFiles();
      this.timerIns ? setTimeout(()=> { this.intervalTask(); }, 3000) : "";
      // this.timerIns = setTimeout(() => { this.intervalTask(); }, 3000);
    },
    /**
     * @description: 滚动条
     * @return:
     */
    onscroll: function () {
      // if (this.$route.name == "workspace") {
      //   var topScroll = document.body.scrollTop; //滚动的距离,距离顶部的距离
      //   var bignav = document.getElementById("bignav"); //获取到导航栏id
      //   if (topScroll > 350) {
      //     //当滚动距离大于250px时执行下面的东西
      //     bignav.style.position = "fixed";
      //     bignav.style.top = "120px";
      //     bignav.style.zIndex = "9999";
      //   } else {
      //     //当滚动距离小于250的时候执行下面的内容，也就是让导航栏恢复原状
      //     bignav.style.position = "static";
      //   }
      // }
    },
    listenBottomHeight() {
      let oDivH = document.getElementById('coopFileBox') ? document.getElementById("coopFileBox").offsetHeight: 0;
 
      if (oDivH > 259) {
        this.isShowShadow = true;
      } else {
        this.isShowShadow = false;
      }
    },
    onSocketFileChangeDetected({ data }){
      try {
        /**
         * 格式：
         * {
         *  `${节点名称}\\${文件名称}.${文件扩展名}`: `${ipfsCid}`
         * }
         */
        const hash = JSON.parse(data);
        this.localFileHashMap = hash;
      }catch(e) {
        console.log('socket file change message error:', e);
      }
      // console.log('socket file change message detected:', args);
    },
    addLocalFileRecord(fileStoreKey, ipfsCid) {
      // this.localFileHashMap[fileStoreKey] = ipfsCid;
      this.localFileHashMap = { ...this.localFileHashMap, [fileStoreKey]: ipfsCid };
    },
    updateFileLoadState(file, type, loadProgress = 0, loadSize, loadUnit, totalSize, unit){
      if(!file.id) {
        debugger;
      }
      const updateState = {
        type, loadProgress, loadSize, totalSize, unit, loadUnit, fileRelativePath: file.relativePath || '',
      }
      this.localFileLoadStateMap = { ...this.localFileLoadStateMap, [file.id]: updateState };
    },
    removeFileLoadingState(fileId) {
      console.log(`going to remove file: ${fileId}`);
      delete this.localFileLoadStateMap[fileId];
      this.localFileLoadStateMap = { ...this.localFileLoadStateMap };
    },
    /* 工作链API */
    /**
     * 工作链页面点击
     */
    goFolderAndBack(index) {
      this.goFolder(index);
      this.hideWorklinkPage();
    },
    /**
     * todo Deprecated
     * @description: 查看工作链页面
     * @return:
     */
    showWorklinkPage: function () {
      // this.$emit("isShowOutWorkSpace", true);
      if(this.hackWorkLine) {
        // this.hackWorkLine.showWorklinkPage();
        this.hackWorkLine.isShowworklink = true;
        this.hackWorkLine.workheight = "workheight";
      }
      this.showWorkline = true;
      // this.workheight = "workheight";
    },
    /**
     * @description: 隐藏工作链页面
     * @return:
     */
    hideWorklinkPage: function () {
      if(this.hackWorkLine) {
        this.hackWorkLineisShowworklink = false;
        this.hackWorkLine.workheight = "workheightinit";
      }
      this.showWorkline = false;
      // this.workheight = " workheightinit";
    },
    /**
     * 查看上一个文件夹文件
     */
    previousFolder () {
      this.goFolder(this.nowFolderIndex - 1);
      this.isShowStartNodeFolders = true;
    },
    /**
     * 查看下一个文件夹文件
     */
    nextFolder(){
      this.goFolder(this.nowFolderIndex + 1);
    },
    /**
     * 跳转到当前工作
     */
    goFolder: function (nextFolderIndex) {
      if(nextFolderIndex < 0) {
        notify.error('不能再向前了');
        return;
      }
      if(nextFolderIndex > this.nodeFolders.length - 1) {
        notify.error('不能再向后了');
        return;
      }
      sessionStorage.nowFolderIndex = nextFolderIndex; // 用于刷新页面时使用
      this.currentNodeFolder = this.nodeFolders[nextFolderIndex];
      if(this.currentNodeFolder !== this.currentFolder) {
        this.clearCurrentFolderFiles();
      }
      this.currentFolder = this.currentNodeFolder;
      this.currentFolderInCoop = this.currentNodeFolder;
      this.breadcrumbFolderList = [];
      this.breadcrumbFolderListInCoop = [];
      this.fetchFolderFiles();
      this.loadListTempFiles();
    },
    /**
     * 进入子文件夹
     */
    intoSubFolder(folder, flag) {
      if(flag == 0) {
        this.currentFolder = folder;
        this.breadcrumbFolderList.push(folder);
      } else if(flag == 1) {
        // this.listenBottomHeight();
        this.currentFolderInCoop = folder;
        this.breadcrumbFolderListInCoop.push(folder);
        this.$nextTick(()=> {
           this.listenBottomHeight();
        })
      }

      // this.clearCurrentFolderFiles();
      // this.fetchFolderFiles();
    },
    /**
     * 当前工作点击
     */
    nowFolderClick(nextFolderIndex) {
      this.goFolder(nextFolderIndex);
      this.isShowStartNodeFolders = true;//上面切换点击到另一个工作节点的时候 协作文件先显示总的节点入口
    },

    /* 文件夹及文件API */
    async fetchNodeFolders() {
      const userId = this.userId;
      const projId = this.projectId;
      const workList = await services.fetchWorkFlow(projId, userId);
      const folderList = workList.filter(folder => folder.nodeId !== folder.templateId && folder.folderName !== '公共文件夹');

      this.nodeFolders = folderList;
      this.copyNodeFolders = cloneDeep(folderList);
      this.folderMap = folderList.reduce((h, f) => (h[f.id] = f, h), {});
      if(!folderList.length) return;
      const paramsFolderId = this.$route.params.folderId;
      // 匹配存在
      if (paramsFolderId) {
        this.currentNodeFolder = folderList.find(folder => folder.id === paramsFolderId) || folderList[0];
      } else if(sessionStorage.nowFolderIndex) {
        this.currentNodeFolder = folderList[sessionStorage.nowFolderIndex] ||  folderList[0];
      } else {
        this.currentNodeFolder = folderList[0];
      }
      this.currentFolder = this.currentNodeFolder;
      this.currentFolderInCoop  = this.currentNodeFolder;
      this.fetchFolderFiles();
      this.loadListTempFiles();
    },
    /**
     * 查询当前文件夹内容
     */
    fetchFolderFiles: throttle(async function fetchFolderFiles() {
      const nodeFolder = this.currentNodeFolder;
      const userId = this.userId;
      if(!nodeFolder || !nodeFolder.id) return;
      // 先清空当前的文件队列 在这清空队列会有闪烁问题，得放在切换显示文件夹内容的地方触发
      // this.uploadFileList = [];
      // this.workFileList = [];
      // this.workSubFolderList = [];
      // this.cooperationFileList = [];
      // todo 接口去除公共文件夹配置
      const folderResInfo = await services.fetchFolderFileList(nodeFolder.id, userId, nodeFolder.id);
      if(!folderResInfo) return;
      // 快速切换节点的时候
      if(this.currentNodeFolder.id !== nodeFolder.id) return;
      this.workFileList = folderResInfo.file;
      this.subFolderMap = { ...this.subFolderMap, ...folderResInfo.folderMap };
      this.resolveUploadFileList(this.workFileList);
      this.workSubFolderList = folderResInfo.folder;
      // this.workSubFolderList = uniqBy(this.workSubFolderList.concat(folderResInfo.folder), folder => folder.id);
      // resolve dupilicate folders
      this.tempWorkSubFolderList = this.tempWorkSubFolderList.filter(tempFolder => !folderResInfo.folder.some(folder => folder.id === tempFolder.id));
      this.cooperationFileList = folderResInfo.coordinationFiles;
      this.dealWithCoopFiles(this.cooperationFileList);
      this.resolveUploadFileList(this.cooperationFileList);
    }, 1000),
    /**
     * 去掉上传队列中已经上传成功的文件
     */
    resolveUploadFileList(fileList) {
      this.uploadFileList = this.uploadFileList.filter(uploadFile => {
        const targetFile = fileList.find(iFile => iFile.relativePath === uploadFile.relativePath && iFile.archName === uploadFile.archName && iFile.extension === uploadFile.extension);
        this.removeFileLoadingState(uploadFile.id);
        return !targetFile;
      });
    },
    /**
     * 点击确定 保存文件夹组
     */
     async createSubFolder(){
      if (!this.folderGroupData.FolderName) {
        notify.warning('请输入文件夹名称！');
        return;
      }
      const folderName = this.folderGroupData.FolderName;
      const parentFolderPath = this.currentFolder.folderPath || '';
      const folderPath = parentFolderPath ? `${parentFolderPath}/${folderName}` : folderName;
      if(this.subFolderMap[folderPath]) {
        notify.warning('创建失败，已存在同名文件夹！');
        return;
      }
      const newVirtualFolder = new VirtualFolder(folderPath, folderName, parentFolderPath);
      this.subFolderMap[folderPath] = newVirtualFolder;
      this.tempWorkSubFolderList.push(newVirtualFolder);
      notify.success('文件夹创建成功！');
      this.dialogNewFolderGroup = false;
    },
    /**
     * 新建文件夹显示弹窗
     */
    newCreateFolderGroup: function () {
      this.dialogNewFolderGroup = true;
      this.folderGroupData = initialFolderData();
    },
    clearCurrentFolderFiles() {
      this.uploadFileList = [];
      this.workFileList = [];
      this.workSubFolderList = [];
      this.tempWorkSubFolderList = [];
      this.cooperationFileList = [];
      // this.localFileHashMap = {};
      this.localFileLoadStateMap = {};
      this.localFolderLoadStateMap = {};
      this.tempRightFileId = '';
    },
    /**
     * 面包屑导航点击
     */
    clickBreadcrumb(breadFolderIdx, flag) {
      if(flag == 0) {
        // 工作文件
        const targetFolder = breadFolderIdx === -1
        ? this.currentNodeFolder
        : this.breadcrumbFolderList[breadFolderIdx];
        this.currentFolder = targetFolder;
        // this.fetchFolderFiles();
        // 重置面包屑导航数组
        this.breadcrumbFolderList = this.breadcrumbFolderList.slice(0, breadFolderIdx + 1);
      } else if(flag == 1) {
        // 协作文件
        const targetFolderInCoop = breadFolderIdx === -1
        ? this.currentNodeFolder
        : this.breadcrumbFolderListInCoop[breadFolderIdx];
        this.currentFolderInCoop = targetFolderInCoop;
        this.isShowStartNodeFolders = breadFolderIdx === -1;
        // this.fetchFolderFiles();
        // 重置面包屑导航数组
        this.breadcrumbFolderListInCoop = this.breadcrumbFolderListInCoop.slice(0, breadFolderIdx + 1);
      }
      
    },
    /**
     * 客户端选择文件列表并上传
     */
    async selectSystemFiles() {
      if(!this.isClient) return;
      const filePaths = await system.chooseFiles();
      if(!filePaths) return;
      this.clientUpload(filePaths);
      // filePaths.forEach(async fullPath => {
      //   const maybeTasks = await system.analyzeSystemPath(fullPath);
      //   const tasks = maybeTasks || [];
      //   tasks.forEach(uploadTask => this.clientUpload(uploadTask));
      // });
    },
    /**
     * 客户端选择文件夹列表并上传
     */
    async selectSystemFolders() {
      if(!this.isClient) return;
      const folderPaths = await system.chooseFolders();
      if(!folderPaths) return;
      this.clientUpload(folderPaths);
      // folderPaths.forEach(async fullPath => {
      //   const maybeTasks = await system.analyzeSystemPath(fullPath);
      //   const tasks = maybeTasks || [];
      //   tasks.forEach(uploadTask => this.clientUpload(uploadTask));
      // });
    },
    generateVirtualFolder(relativePath, prefixPath = '') {
      if(!relativePath) return;
      const hash = {};
      const list = [];
      const subFolderMap = this.subFolderMap;
      analyzeRelativePath(relativePath, prefixPath, (folderPath) => {
        if(subFolderMap[folderPath]) return;
        const newSubFolder = new VirtualFolder(folderPath);
        hash[newSubFolder.folderPath] = newSubFolder;
        list.push(newSubFolder);
      });
      this.subFolderMap = { ...subFolderMap, ...hash };
      this.tempWorkSubFolderList = this.tempWorkSubFolderList.concat(list);
    },
    /**
     * 客户端上传文件
     * uploadTask: {
     *  fullPath: 本地完整路径
     *  fileName: 文件名
     *  extension: 扩展名
     *  relativePath: 相对路径
     * }
     */
    async clientUpload(filePaths) { // uploadTask
      const tasksGroup = await Promise.all(filePaths.map(path => system.analyzeSystemPath(path)));
      const uploadTasks = flatten(tasksGroup);
      const { folderName, levelId, id: folderId } = this.currentNodeFolder; 
      const { folderPath = '' } = this.currentFolder;
      const workFileList = this.workFileList;
      // 检查是否存在文件重名，有则提示
      const ifHaveRepeatFile = uploadTasks.some(uploadTask => {
        const { fileName, extension: fileExtension, relativePath } = uploadTask;
        const extensionedFileName = fileExtension ? `${fileName}.${fileExtension}`: fileName;
        const distFileRelativePath = `${folderPath ? `${folderPath}\\`:''}${relativePath ? `${relativePath}`:''}`.replace(/(\\)+/g, '/');
        return workFileList.some(iFile => distFileRelativePath === iFile.relativePath && `${iFile.archName}${iFile.extension ? `.${iFile.extension}` : ''}` === extensionedFileName)
      });
      if(ifHaveRepeatFile) {
        let confirmRes = false;
        try {
          await Vue.prototype.$confirm('监测到文件夹存在同名文件，是否继续上传并覆盖同名文件？',"",{
            showClose: false,
            type: "warning"
          });
          confirmRes = true;
        } catch(e) { console.log('user canceled'); }
        if(!confirmRes) return;
      }

      let tempNumWrap = {//为了了让这个数量被保存使用修改  这里用作为对象属性传递
        tempNumCount: 0
      }
      const totalReadyUploadNum = uploadTasks ? uploadTasks.length : 0;//全部要上传的文件数量
      uploadTasks.forEach(uploadTask => {
        const { fullPath: sourceFilePath, fileName, extension: fileExtension, relativePath } = uploadTask;
        // 生成
        this.generateVirtualFolder(relativePath, folderPath);
        const params = {
          projectId: this.projectId,
          projectName: this.projectName,
          folderId, folderName, folderLevelId: levelId, distFileRelativePath: [folderPath, relativePath].filter(a => a).join('\\').replace(/(\\)+/g, '/'),
          fileName, fileExtension, sourceFilePath,
          fileList: workFileList,
          onSuccess: (file) => { // onSuccess
            const {ArchName, IpfsCid, Extension, RelativePath} = file;
            // 注入到文件下载检测表中
            const key = `${folderName}\\${RelativePath ? `${RelativePath.replace(/\//g, '\\')}\\`: ''}${ArchName}${Extension ? `.${Extension}`: ''}`;
            this.addLocalFileRecord(key, IpfsCid);
            this.removeFileLoadingState(file.Id);
            this.fetchFolderFiles();
          },
          onProgress: (progressData, upperUploadFile) => { // onLoading
            const { process, hash, size, currentSize, currentUnit, unit } = progressData;
            const uploadFile = firstCharToLowerCase(upperUploadFile);
            // 避免使用最后一次progreessData中size被修正为Kb的数据
            if(!hash) {
              this.updateFileLoadState(uploadFile, UPLOADING, process, currentSize, currentUnit, size, unit);
            }
            // 覆盖已有的同名文件
            if(uploadFile.id.indexOf('upload:') === -1) {
              return;
            }
            // 插入上传队列
            if(!this.uploadFileList.find(f => f.id === uploadFile.id)) {
              this.uploadFileList.push(uploadFile);
            }
          },
          onError: (e, upperFile) => {
            this.removeFileLoadingState(upperFile.Id);
            this.uploadFileList = this.uploadFileList.filter(iFile => iFile.id !== upperFile.Id);
          },
        }
        // console.log(folderName, levelId, folderId);
    
    
        system.uploadFile({...params, totalReadyUploadNum, tempNumWrap});
      })
    },
    /**
     * 客户端下载方法
     */
    clientDownLoad: function (file) {
      if(!this.isClient) return;
      // console.log('下载的文件对象', file);
      const { ipfsCid, archName: fileName, extension, folderId, nodeName, relativePath } = file;
      const folderMap = this.folderMap;
      // const { levelId } = folderMap[folderId] || {};
      const nodeFolderName = nodeName || this.currentNodeFolder.folderName;
      const extensionedFileName = `${fileName}${extension ? `.${extension}`:''}`;
      const isCooperateFile = !!nodeName;
      const targetFolderName = `${nodeFolderName}${isCooperateFile ? '\\协作文件': ''}`;
      const dirName = `${targetFolderName}${relativePath ? `\\${relativePath}`:''}`.replace(/\//g, '\\');
      // const fileStoreKey = `${targetFolderName}\\${extensionedFileName}`;
      const fileStoreKey = getFileStoreKey(file, this.currentNodeFolder);
      const errorHandler = () => {
        this.removeFileLoadingState(file.id);
      }
      this.updateFileLoadState(file, DOWNLOADING, 0);
      system.downloadFile(ipfsCid, sessionStorage.projName, extensionedFileName, dirName, (resMessage, socketIns) => {
        console.log('receive download file message:', resMessage, socketIns);
        // {"size":"11","currentSize":"11","unit":"B","process":100,"hash":""}
        try {
          const { process, hash } = JSON.parse(resMessage.data);
          this.updateFileLoadState(file, DOWNLOADING, process);
          if(process !== 100) return;
          this.addLocalFileRecord(fileStoreKey, ipfsCid);
          this.removeFileLoadingState(file.id);
          this.$notify({
            type:["success","download"],
            title:"文件已下载",
            message:`${fileName}`
          })
          socketIns.close();
          // this.$forceUpdate();
        } catch (e) {
          console.error('socket-download-file parse data have error:', e);
          errorHandler();
          socketIns.close();
        }
      }, errorHandler);
    },
    /**
     * 下载文件夹
     */
    downloadFolder(folder) {
      this.workFileList.forEach(file => {
        if(file.relativePath.indexOf(folder.folderPath) === 0) {
          this.clientDownLoad(file);
        }
      })
    },
    /**
     * 打开本地文件夹
     */
    openNativeCurrentFolder(){
      const { folderName } = this.currentNodeFolder;
      const path = `${this.localWorkspacePrefix}\\${folderName}`;
      system.openFolder(path);
    },
    /**
     * 提交本地文件
     */
     async commitFile(file) {
      if(!this.isClient) return;
      const { folderName, levelId, id: folderId } = this.currentNodeFolder;
      const { archName, extension, id: fileId, relativePath } = file;
      this.updateFileLoadState(file, UPLOADING, 0);
      const errorHandler = () => {
        this.removeFileLoadingState(file.id);
      }
      // const fileList = this.currentPageType === 0 ? this.folderFileList.listMyFiles : this.folderFileList.listOtherFiles;
      // const fileKey = `${folderName}\\${archName}${extension ? `.${extension}`:''}`;
      const fileStoreKey = getFileStoreKey(file, this.currentNodeFolder);
      system.updateFile(
        file, this.localWorkspacePrefix,
        this.projectName, `${folderName}${relativePath ? `\\${relativePath}`.replace(/\//g, '\\'):''}`,
        async (fileNewState) => {
          const resFlag = await services.changeFileWorkStatus(file.id, 1);
          if(resFlag.Code !== 0) return;
          notify.success(`${file.archName}，已更新。`);
          const {IpfsCid} = fileNewState;
          // 注入到文件下载检测表中
          // 同时更新文件队列中file对象的ipfsCid属性这样才能在下次刷新前使文件的记录保持一致
          this.addLocalFileRecord(fileStoreKey, IpfsCid);
          this.removeFileLoadingState(fileId);
          this.workFileList = this.workFileList.map(iFile => iFile.id === file.id ? { ...iFile, ipfsCid: IpfsCid, workStatus: NOT_WORKING } : iFile);
          // 同步搜索栏中展示的工作文件状态
          if(this.currentBtnIndex == 0 && this.isShowSearchPage) {
            this.searchWorkFileList = this.searchWorkFileList.map(iFile => iFile.id === file.id ? { ...iFile, ipfsCid: IpfsCid, workStatus: NOT_WORKING } : iFile);
          }
        },
        (progressData) => {
          const { process, hash, size, currentSize, currentUnit, unit } = progressData;
          // 避免使用最后一次progreessData中size被修正为Kb的数据
          if(hash) return;
          this.updateFileLoadState(file, UPLOADING, process, currentSize, currentUnit, size, unit);
        },
        errorHandler,
      );
    },
    commitFolder(folder) {
      const path = `${this.localWorkspacePrefix}\\${this.currentNodeFolder.folderName}${folder.folderPath ? `\\${folder.folderPath}`:''}`.replace(/\//g, '\\');
      this.clientUpload([path]);
    },
    /**
     * 文件打开方式
     */
    async openFileWith(file) {
      const localWorkspacePrefix = this.localWorkspacePrefix;
      const fileStoreKey = getFileStoreKey(file, this.currentNodeFolder);
      if(!this.localFileHashMap[fileStoreKey]) return;   
      const filePath = `${localWorkspacePrefix}\\${fileStoreKey}`;
    
      // 若文件在协作文件中，则不更改状态
      const { archName, extension, id: fileId, nodeName } = file;
      const isCooperationFile = !!nodeName;
      console.log(filePath);
      if(isCooperationFile) {  system.clientOpenFileWith(filePath); return; }
      // 将文件状态设置为编辑中
      const flagRes = await services.changeFileWorkStatus(fileId, 2);
      if(flagRes.Code !== 0) return;
      file.workStatus = 2;
      file.modifyUserId = sessionStorage.userId;
      system.clientOpenFileWith(filePath);
      this.fetchFolderFiles();
     },
    /**
     * 点击文件事件：直接打开文件
     */
    fileClick: async function (file) {

      //debugger;
      if(!this.isClient) return;
      const { archName, extension, id: fileId, nodeName } = file;
      const folderName = nodeName || this.currentFolder.folderName;
      const localWorkspacePrefix = this.localWorkspacePrefix;
      const isCooperationFile = !!nodeName;
      // const fileStoreKey = `${folderName}${isCooperationFile ? '\\协作文件': ''}\\${archName}${extension ? `.${extension}` : ''}`;
      const fileStoreKey = getFileStoreKey(file, this.currentNodeFolder);
      if(!this.localFileHashMap[fileStoreKey]) return;                   
      const filePath = `${localWorkspacePrefix}\\${fileStoreKey}`;
      
      if(!isCooperationFile && (file.workStatus === 2 && sessionStorage.userId !== file.modifyUserId)) {
       console.log("1111")
       this.$notify({
         type:["warning"],
         title:"暂不能打开此文件",
         message:`${file.modifyName}正在编辑此文件，请在“工作中”标识消失后再尝试打开。`
       })
        return;
      }
      
      // 若文件在协作文件中，则不更改状态
      if(isCooperationFile) { system.openFile(filePath); return; }
      // 将文件状态设置为编辑中
      const flagRes = await services.changeFileWorkStatus(fileId, 2);
      if(flagRes.Code !== 0) return;
      file.workStatus = 2;
      file.modifyUserId = sessionStorage.userId;
      system.openFile(filePath);
      this.fetchFolderFiles();
    },
    /**
     * 设置历史文件界面
     */
    showFileMilestone: function (file) {
      // todo 待修正，思考是否可以放到file组件中去
      debugger;
      if (file.status == 1 && file.modifyUserID != sessionStorage.userId) {
        this.$notify({
          message: "其他人编辑中，不能设置历史文件",
          type: "warning",
          offset: 100,
          duration: 5000,
        });
        return;
      }
      this.currentMilestone=file;
      this.dialogFileHistory = true;
      //返回与该文件同名的所有文件并把自己过滤掉
      this.listMilestones=this.getMilstoneFile(file);
      console.log(this.listMilestones)
      this.currentArchID = file.archID;
    },
    /**
     * 右键菜单
     */
    rightShowMenu(e, file, type) {
      const menuMinWidth = 10;
      const offsetLeft = this.$el.getBoundingClientRect().left; // container margin left
      const offsetWidth = this.$el.offsetWidth; // container width
      const maxLeft = offsetWidth - menuMinWidth; // left boundary
      const left = e.clientX - offsetLeft; // 15: margin right
      this.rightMenuvisible = true;
      this.tempRightFileId = 'currentWorkFolder';
      // todo 边界修正
      this.rightMenuleft = e.clientX; // fix 位置bug
      this.rightMenuTop = e.clientY;
    },
    /**
     * 关闭
     */
    closeShowMenu: function () {
      this.rightMenuvisible = false;
    },
    /**
     * 协作文件展开
     */
    openCopage: function () {
      this.isShowpageIcon = false;
      this.isCollapse = false;
      this.neibianju = "neibianju1";
      this.closepageH = "closepageH";
    },
    /**
     * 协作文件折叠
     */
    closeCopage: function () {
      this.isShowpageIcon = true;
      this.isCollapse = true;
      this.neibianju = "neibianju";
      this.closepageH = "";
  
    },
    /**
    * 点击了复制文件副本的按钮
    */
   async copyWorkFileBtnClick(targetFile) {
      const copyFile = {...targetFile};
      let nowNum = 1, tempName = "";

      //先添加 - 副本字样 再判断是否重复 如果重复就修改版本信息
      tempName = targetFile.archName + '-副本';
      let isExists = this.workFileList.find(file => file.archName === tempName);
      while(isExists) {
        // - 副本存在 -》修改为 -副本(x) 的字样
        tempName = targetFile.archName + `-副本(${ ++ nowNum})`;
        isExists = this.workFileList.find(file => file.archName === tempName); 
      }
      let hour = '0' + new Date().getHours();
      let minute ='0' + new Date().getMinutes();
      let seconds = '0' + new Date().getSeconds();
      hour = hour.substr(hour.length-2);
      minute = minute.substr(minute.length-2);
      seconds = seconds.substr(seconds.length-2);
      
      copyFile.archName = tempName + '-' + hour + minute + seconds;
      copyFile.modifyUserId = sessionStorage.userId;
      copyFile.modifyTime = new Date();
      copyFile.createUserId = sessionStorage.userId;
      copyFile.createTime = new Date();
      // console.log(copyFile);

      const addFileRes = await services.addFile(copyFile);
      this.fetchFolderFiles();
    },
    deleteFileClick(fileId, createUserId, archName, ipfscid) {
      var thisApp = this;
        if (createUserId != sessionStorage.userId) {
          thisApp.$notify({
            message: "不能删除其他用户创建的文件。",
            type: ["error"],
            //offset: 100,
            duration: 2500,
          });
          return;
        }
        this.$confirm(`确认删除“${archName}”吗？`, "", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          showClose: false,
          type: "warning",
        }).then(async function () {
          const res = await services.deleteFile(fileId);
          if(res.Code === 0) {
            thisApp.$notify({
                message: `“${archName}”文件已移除。`,
                type: ["success"],
                duration: 2500,
              });
              for(let key in thisApp.localFileHashMap) {
                if(thisApp.localFileHashMap[key] === ipfscid) {
                  delete thisApp.localFileHashMap[key];
                  break;
                }
              }
            thisApp.fetchFolderFiles();
          }
        })
      }
  },
  watch: {
    isShowSearchBar(val) {
      if(!val) {
        if(this.currentBtnIndex == 0) {
          this.searchWorkFileList = [];
        } else if(this.currentBtnIndex == 1) {
          this.searchCoopFileList = [];
        }
      }
    },
    searchContent() {
      this.searchForFile();
    },
    localFileHashMap(val) {
      let temp = {};
      for(let key in val) {
        temp[val[key]] = key;
      }
      this.reverseLocalFileHashMap = temp;
    },
    nowFolderIndex() {
      this.isfinishGetExchangeNodes && this.getExchangeNodes(); 
    },
    rightMenuvisible(value) {
      if (value) {
        document.body.addEventListener("click", this.closeShowMenu);
      } else {
        document.body.removeEventListener("click", this.closeShowMenu);
      }
    },
    localFileLoadStateMap(obj) {
      const hash = {};
      Object.values(obj).forEach(state => {
        const relativePath = state.fileRelativePath;
        if(!relativePath) return;
        analyzeRelativePath(relativePath, '', (folderPath) => {
          hash[folderPath] = true;
        });
      })
      this.localFolderLoadStateMap = hash;
    }
  }
}
</script>

<style>
.section_item.section_item_aside_fl {
  overflow: hidden;
}
.el-message-box--center .el-message-box__status.el-icon-warning {
  position: absolute;
  left: 0;
}
.yywenjiantitle_text1 {
  position: relative;
  top: 2px;
}
.youbian {
  color: #a7a8b7;
  position: relative;
  top: 2px;
}
.app-header-style {
  background-color: #f0f0f0;
}
.app-header-style .app-header-content-right {
    display: flex;
}

</style>
<style lang="scss" scoped>
  .titleBox {
    position: relative;
  }
  .app-header-style {
    background-color: #f0f0f0;
  }

  .titlebar_head {
    flex-direction: column;
  }

  .yiyun_section_top {
    overflow: visible;
  }

  .folder_breadcrumb {
    ::v-deep .el-breadcrumb__item {
      user-select: none;
      font-size: 18px;
      display: inline-block;
      height: 40px;
      line-height: 40px;
      .el-breadcrumb__separator {
        color: #a7a8b7;
      }
      &:not(:last-child) {
        cursor: pointer;
      }
    }
  }

  ::v-deep .readytodownload-icon {
    position: relative;
    top: 40px;
    margin: 0 auto;
  }
  ::v-deep .progress-circle , ::v-deep .readytodownload-icon {
    width: 45px;
    height: 45px;
    background-color: #fff;
    border-radius: 50%;
  }
 ::v-deep .progress-circle , ::v-deep .readytodownload-icon img, ::v-deep .progress-circle .bg-pic{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
 
 ::v-deep .progress-circle svg {
    position:relative !important;
  }

  ::v-deep .progress-circle svg .el-progress-circle__track {
    stroke: #fff !important;
  }
  .filePreview{
    text-align: center;
    video{
        width: 820px;
        height: 600px;
    }
  }

  .img-container {
    margin: 0 auto;
  }
  /* 新建样本文件弹框样式 */
  .temp-file-dialog {
   
    /* 新建样板文件弹框的提示文件名 */
    .guide-template-file-name {
      color: rgba(0, 0, 0, 1);
      font-size: 14px;
      text-align: center;
      font-family: PingFangSC-Regular;
      padding: 16px;
      text-align: center;
    }
  }

</style>
<style lang="scss">
  .temp-file-dialog {
    .el-dialog {
      background-color: #fcfcfc;

      .el-dialog__header {
      padding: 19px 0;
      }
      .el-dialog__body {
        padding: 0 !important;
        .el-form {
          padding: 20px 0 0 0;
          background-color: #f1f1f1;
          .el-form-item {
            margin:0 0 0 0;
          }
        }
      }
      .el-form-item__content {
        padding: 0 16px;
        .el-input__inner {
          background-color: #ddd;
          margin: 0 0 20px 0;
        }
      }
      .dialog-footer {
        display: flex;
        justify-content: space-between;
        padding: 16px;
      }
      .el-dialog__footer {
        padding: 0;
        .el-button {
          border-radius: 8px;
          /* &.el-button--primary {
            background-color: #7850ff;
          } */
        }
      }
    }
  }
  

</style>
<style scoped lang="scss">
  .set-bg {
    background-color: #f6f6f6;
  }
  .operate-bar {
    width: 162px;
    margin: 28px auto 15px;
  }

  .search-res-page-wrap {
    margin: 0 64px;
    box-sizing: border-box;
  }
  .out-wrap {
    height: calc(100vh - (60px + 28px + 28px + 15px));
    overflow: scroll;
  }
  .out-wrap::-webkit-scrollbar{
    width: 8px;
    border-radius: 4px;
  }

  .out-wrap::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    height: 10px;
    background-color: #adadad;
  }

  /*当前窗口失去焦点时的滑块样式*/
  .out-wrap::-webkit-scrollbar-thumb:window-inactive {
    background-color: #adadad;
  }
  .no-file-tips {
    font-size: 22px;
    text-align: center;
    margin: 100px auto;
  }
</style>

<style scoped lang="scss">
  .my-workline {
    text-align: center;
  }

  .adjust-workline-pos-client {
    position: relative;
    top: -12px;
  }
  .adjust-workline-pos-web {
    position: relative;
    top: -2.5px;
  }
  .ml-4-mt-20 {
    margin: 20px 0 0 4px;
  }
  .height-0 {
    height: 0;
  }

  .layout_content2 {
    height: calc(100vh - 64px);
  }
// 调整协作文件显示区域的高度
  .coopBox-max-height {
    height: 300px;
  }

</style>

<style scoped>

</style>