<template>
  <div id="file_moddle_manage" v-loading="loading">
    <!-- 左边模型文件夹列表 -->
    <el-col :span="5">
      <div class="grid-content grid-left">
        <el-card class="box-card" :body-style="{ padding: '0px' }">
          <div class="top_hand left_top_hand">
            <div class="folder-box">
              <el-tooltip class="item" effect="dark" content="新建文件夹" placement="top-start">
                <el-button icon="el-icon-folder-add" @click="addFolder" class="icon_font"></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除文件夹" placement="top-start">
                <el-button icon="el-icon-folder-remove" class="icon_font" @click="removeFolder"></el-button>
              </el-tooltip>
            </div>
            <div class="file-box">
              <el-tooltip class="item" effect="dark" content="编辑文件夹" placement="top-start">
                <el-button @click="editFolder" icon="el-icon-edit" class="icon_font"></el-button>
              </el-tooltip>
            </div>
          </div>
          <div class="folder-list">
            <div class="head">模型文件夹</div>
            <ul class="lists">
              <li
                @click="openFolder(index,item)"
                v-for="(item,index) in navigationModel"
                :key="index"
                :class="[choiceIndex == index + 1 ? 'li-active' : '']"
              >
                <i
                  :class="[choiceIndex == index + 1 ?  'el-icon-folder-opened':'el-icon-folder','icon_font']"
                  width="40"
                  height="40"
                ></i>
                <span>{{item.Name}}</span>
              </li>
            </ul>
          </div>
        </el-card>
      </div>
    </el-col>
    <!-- 右边文件表格 -->
    <el-col :span="19">
      <el-card class="box-card" :body-style="{ padding: '0px' }">
        <!-- 顶部操作栏 -->
        <div class="top_hand right_top_hand">
          <el-button @click="addFloorFile">添加楼层文件</el-button>
          <el-button @click="queryFloorFile(currentFolderId)">刷新</el-button>
        </div>
        <!-- 列表 -->
        <floorTable
          ref="floorTable"
          :tableData="tableData"
          @openModelLog="queryModelLog"
          @replaceModel="repliaceModel"
          :ceshiList="ceshiList"
        ></floorTable>
      </el-card>
    </el-col>
    <!-- 弹窗 开始-->

    <!-- 模型日志弹窗 -->
    <modelLog
      :modelLogVisible="modelLogVisible"
      @deleteFinish="updataLog"
      @CloseModelLogDia="modelLogVisible=false"
      :logData="logData"
    ></modelLog>
    <!-- 替换模型弹窗 -->
    <repliceModel
      :repliceModelVisible="repliceModelVisible"
      @closeReplaceModelDia="repliceModelVisible=false"
      :replaceModelItem="replaceModelItem"
      @updataModel="updateModelFile"
    ></repliceModel>
    <!-- 新增楼层 -->
    <addFloorDialog
      :addFloorFileVisible="addFloorFileVisible"
      :FolderName="currentFolderName"
      :FolderId="currentFolderId"
      @closeAddFloorDia="addFloorFileVisible=false"
      @finishCreateFloor="uploadModelFIle"
    ></addFloorDialog>
    <!-- 新增文件夹名称 -->
    <addFolder
      :addFolderVisible="addFolderVisible"
      @closeAddFolderVisible="addFolderVisible=false;folderName=''"
      :folderName="folderName"
      @getfolderModel="queryModel"
    ></addFolder>
    <!-- 编辑文件夹名字 -->
    <changeFolderName
      :currentFolderId="currentFolderId"
      :changeFolderNameVisible="changeFolderNameVisible"
      :folderName="folderName"
      @finishChangeFolderName="queryModel"
      @closeChangeFolderVisible="changeFolderNameVisible=false;folderName=''"
    ></changeFolderName>
    <!-- 弹窗 结束-->
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import request from "@/api/model/file.js";

import dasBoard from "@/views/dasboard/index";
import modelLog from "@/components/model/file/modelLog"; //模型日志弹窗
import repliceModel from "@/components/model/file/replaceModelDialog"; //替换模型弹窗
import addFloorDialog from "@/components/model/file/addFloorDialog"; //新增楼层弹窗
import addFolder from "@/components/model/file/addFolder"; //新增文件夹
import changeFolderName from "@/components/model/file/changeFolderName"; //编辑名字
import floorTable from "@/components/model/file/floorTable"; //右侧list表
export default {
  computed: {
    ...mapGetters("layout", ["projectId", "userInfo", "userId", "secret"])
  },
  components: {
    dasBoard,
    modelLog,
    repliceModel,
    addFloorDialog,
    addFolder,
    changeFolderName,
    floorTable
  },
  data() {
    return {
      addFolderVisible: false, //是否显示新增文件夹弹窗
      addFloorFileVisible: false, //是否显示增加楼层文件弹窗
      repliceModelVisible: false, //是否显示替换楼层模型弹窗
      modelLogVisible: false, //是否显示模型日志弹窗
      changeFolderNameVisible: false, //是否显示编辑文件夹弹窗
      folderName: "", //新建文件夹名称
      navigationModel: [
        {
          Name: ""
        }
      ], //文件夹模型list
      choiceIndex: 0, //当前文件夹index
      currentFolderId: "", //当前选择的文件夹id
      currentFolderName: "", //当前选择文件夹的Name
      currentFloorModelId: "", //当前选择的楼层文件id
      tableData: [],
      loading: false, //加载loading
      logData: [], //楼层文件对应的模型日志
      replaceModelItem: null, //替换文件的item
      uploadFloorModelIdList: [], //上传楼层文件得数组，上传完成则为空
      //请求头
      headers: {
        ProjectId: ""
      },
      updataData: {
        model: {}
      },
      ceshiList: [
        {
          Id: "239ce3d4c33811e993aceb3be9a05be5",
          precent: 0
        },
        {
          Id: "7d30fd76c33b11e993ac11710b8cb126",
          precent: 0
        }
      ]
    };
  },
  methods: {
    // 以下是模型文件夹

    // 打开模型文件夹
    openFolder(index, item) {
      this.choiceIndex = index + 1;
      this.currentFolderId = item.Id;
      this.currentFolderName = item.Name;
      // 获取模型文件夹对应得楼层文件
      this.queryFloorFile(this.currentFolderId);
    },
    //新增模型文件夹
    addFolder() {
      this.folderName = "";
      this.addFolderVisible = true;
    },
    //删除模型文件夹
    removeFolder() {
      this.$alert(`确定要删除文件夹 <${this.currentFolderName}> 吗?`, "提示", {
        confirmButtonText: "确定",
        callback: action => {
          if (action == "confirm") {
            let params = {
              Id: this.currentFolderId,
              ProjectId: this.projectId
            };
            request.deleteModel(params, res => {
              this.$message({
                message: "删除成功!",
                type: "success"
              });
              this.queryModel();
            });
          } else {
            this.$message({
              type: "info",
              message: `取消操作`
            });
          }
        }
      });
    },
    //编辑文件夹
    editFolder() {
      this.folderName = this.currentFolderName;
      this.changeFolderNameVisible = true;
    },
    // 查询所有文件夹模型
    queryModel() {
      this.loading = true;
      request.queryModel("", res => {
        this.navigationModel = res.Content;
        //默认选择第一个文件夹
        this.choiceIndex = 1;
        this.currentFolderName = this.navigationModel[0].Name;
        this.currentFolderId = this.navigationModel[0].Id;
        this.loading = false;
        this.queryFloorFile(this.currentFolderId);
      });
    },

    ///一下是楼层文件

    //获取楼层文件
    /**
     * @param currentFolderId 当前选择得楼层id
     */
    queryFloorFile(currentFolderId) {
      let data = {
        FolderId: currentFolderId,
        ProjectId: this.projectId
      };
      return new Promise((resolve, reject) => {
        request.queryFloorList(data, res => {
          res.Content.map(item => {
            Object.assign(item, { isDown: false, precent: 0 });
          });
          this.tableData = res.Content;
          this.loading = false;
          resolve();
          //测试代码
          this.ceshi();
        });
      });
    },
    ceshi() {
      // let a = setInterval(() => {
      //  this.ceshiList[0].precent += 5 ;
      //    this.ceshiList[1].precent += 8
      //   if (this.ceshiList[0] >= 100) {
      //     clearInterval(a);
      //   }
      // }, 1000);
    },
    //添加楼层文件
    addFloorFile() {
      this.addFloorFileVisible = true;
    },

    //以下是文件模型

    //打开替换文件模型
    repliaceModel(item) {
      this.replaceModelItem = item;
      this.repliceModelVisible = true;
    },
    // 上传模型文件
    uploadModelFIle(data) {
      // 在列表中添加
      this.ceshiList.push({
        Id: data.FloorModelId,
        precent: 0
      });
      // 获取当前文件夹下所有模型文件
      this.queryFloorFile(this.currentFolderId).then(() => {
        // 开始上传文件
        // 开始处理数据
        let formData = new FormData();
        formData.append(
          "model",
          JSON.stringify({
            FloorModelId: data.FloorModelId,
            Id: data.CurrentModelId
          })
        );
        formData.append("file", data.Form.file.raw);
        // 处理数据结束

        // 修改isdown得值
        this.tableData.map(item => {
          if (item.Id == data.FloorModelId) {
            item.isDown = true;
            item.precent = 0;
          }
        });

        // 开始上传
        request.uploadModelFile(
          formData,
          this.projectId,
          res => {
            let loaded = res.loaded, //加载量
              total = res.total; //文件大小
            this.$nextTick(() => {
              let precent = Math.round((loaded / total) * 100);
              // this.$refs.floorTable.filterTag(data.FloorModelId, precent);
              this.ceshiList.map(item => {
                if (item.Id == data.FloorModelId) {
                     item.precent = precent
                }
              });
            });
          },
          res => {
            if (res.code === "200") {
              this.$message({
                message: "文件上传成功",
                type: "success"
              });
            }
          }
        );
      });
    },
    //更新模型文件；
    updateModelFile(data) {
      // 修改isdown得值
      this.tableData.map(item => {
        if (item.Id == data.FloorModelId) {
          item.isDown = true;
          item.precent = 0;
        }
      });
      // 开始上传
      request.upDateModelFile(
        data,
        this.projectId,
        this.userInfo.username,
        res => {
          let loaded = res.loaded, //加载量
            total = res.total; //文件大小
          this.$nextTick(() => {
            let precent = Math.round((loaded / total) * 100);
            this.$refs.floorTable.filterTag(data.FloorModelId, precent);
          });
        },
        res => {
          if (res.code === "200") {
            this.$message({
              message: "文件上传成功",
              type: "success"
            });
          }
        }
      );
    },
    //查看模型日志
    queryModelLog(item) {
      this.FloorModelId = item.Id; //楼层模型文件
      request.queryModelFile(this.FloorModelId, res => {
        this.logData = res.Content;
        this.modelLogVisible = true;
      });
    },
    // 刷新日志
    updataLog() {
      request.queryModelFile(this.FloorModelId, res => {
        this.logData = res.Content;
      });
    }
  },
  mounted() {
    this.queryModel();
  }
};
</script>
<style lang="less" scoped>
#file_moddle_manage {
  width: 100%;
  .box-card {
    min-height: 700px;
  }
  .grid-left {
    padding-right: 10px;
    box-sizing: border-box;
  }
  // 顶部
  .top_hand {
    height: 60px;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
  }
  .left_top_hand {
    align-items: center;
    justify-content: space-between;
    .folder-box {
      display: flex;
      height: 40px;
      flex-direction: row;
    }
    .box-icon {
      width: 40px;
      height: 40px;
      font-size: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      float: left;
    }
  }
  // 左侧文件夹列表
  .folder-list {
    width: 100%;
    .head {
      height: 42px;
      width: 100%;
      padding-left: 10px;
      box-sizing: border-box;
      background: #ccc;
      color: #000;
      display: flex;
      justify-content: left;
      align-items: center;
      font-weight: bold;
    }
    .lists {
      width: 100%;
      margin-top: 10px;
      li {
        height: 42px;
        display: flex;
        justify-content: left;
        align-items: center;
        padding-left: 20px;
        box-sizing: border-box;
        cursor: pointer;
        span {
          padding-left: 6px;
        }
      }
      li:hover {
        background: rgb(240, 238, 238);
        font-weight: bold;
      }
      .li-active {
        background: rgb(240, 238, 238);
        font-weight: bold;
      }
    }
  }
  .icon_font {
    font-size: 18px;
  }
}
</style>
