<template>
  <div class="centenr">
    <div class="left-box">
      <div class="ds-box" :class="{'actbox' : tabIndex == 1 }" @click="clickType(null,1)">
        <span>全部文件 </span>
      </div>
      <div class="ds-box" :class="{'actbox' : tabIndex == 2 }" @click="clickType(1,2)">
        <el-icon :size="22">
          <Picture/>
        </el-icon>
        <div class="size-right">图片</div>
      </div>
      <div class="ds-box" :class="{'actbox' : tabIndex == 3 }" @click="clickType(2,3)">
        <el-icon :size="22">
          <Film/>
        </el-icon>
        <div class="size-right">视频</div>
      </div>
      <div class="ds-box" :class="{'actbox' : tabIndex == 4 }" @click="clickType(3,4)">
        <el-icon :size="22">
          <Document/>
        </el-icon>
        <div class="size-right">文档</div>
      </div>
      <div class="ds-box" :class="{'actbox' : tabIndex == 5 }" @click="clickType(4,5)">
        <el-icon :size="22">
          <Headset/>
        </el-icon>
        <div class="size-right">音频</div>
      </div>
      <div class="hs-box" :class="{'actbox' : tabIndex == 6 }" @click="getListRecycled(6)">
        <span>回收站</span>
      </div>
    </div>
    <div class="right-box">
      <div class="right-box-top">
        <div class="left-ds-box">
          <div style="display: flex; align-items: center">
            <el-button class="lan-bottom" @click="openUpload()" v-if="tabIndex != 6">上传文件</el-button>
            <el-button class="lan-bottom" @click="Bfolder()" v-if="tabIndex != 6">新建文件夹</el-button>

            <el-button class="hong-bottom" v-if="tabIndex != 6" @click="handleDelete">批量删除</el-button>
            <el-button class="hong-bottom" v-if="tabIndex == 6" @click="handleRealDelete">批量删除</el-button>
            <el-button class="hong-bottom" @click="returnDir" v-if="tabIndex != 6">返回</el-button>
          </div>

          <div class="input-box">
            <!-- <input type="text" @input="findAllDocLists()" v-model="queryParams.originalFilename" placeholder="输入搜索关键词"> -->
            <el-input @input="findAllDocLists()" v-model="queryParams.originalFilename" placeholder="输入搜索关键词" />
          </div>
        </div>
        <el-table
            v-loading="loading"
            ref="multipleTableRef"
            :data="tableData"
            row-key="id"
            style="width: 100%"
            @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"/>
          <el-table-column  property="curFilename" label="名称" width="360">
            <template #default="scope">
              <div style="display: flex;align-items: center" @click="shijian(scope.row)">
                <img src="../../assets/images/wjj.png" v-if=" scope.row.type == '0' " @click="enterDir(scope.row)"
                     style="width: 28px; height: 28px;margin-right: 5px">
                <img src="../../assets/images/wd.png" v-if=" scope.row.type == '3'  " @click="view(scope.row)"
                     style="width: 28px; height: 28px;margin-right: 5px">
                <img src="../../assets/images/zp.png" v-if=" scope.row.type == '1'  " @click="view(scope.row)"
                     style="width: 28px; height: 28px;margin-right: 5px">
                <img src="../../assets/images/yp.png" v-if=" scope.row.type == '4'  " @click="view(scope.row)"
                     style="width: 28px; height: 28px;margin-right: 5px">
                <img src="../../assets/images/sp.png" v-if=" scope.row.type == '2'  " @click="view(scope.row)"
                     style="width: 28px; height: 28px;margin-right: 5px">
                <div v-if="scope.row.curFilename" style="cursor:pointer" > {{ scope.row.curFilename }}</div>
                <div v-else > {{ scope.row.curFilename }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column property="fileSize" label="大小">
            <template #default="scope">
              <span >{{ (scope.row.fileSize/(1024*1024)).toFixed(1) }}MB</span>


            </template>
          </el-table-column>
          <el-table-column property="type" label="类型">
            <template #default="scope">
              <span v-if="scope.row.type == 0">文件夹</span>
              <span v-if="scope.row.type == 1">图片</span>
              <span v-if="scope.row.type == 2">视频</span>
              <span v-if="scope.row.type == 3">文档</span>
              <span v-if="scope.row.type == 4">音频</span>
            </template>
          </el-table-column>
          <el-table-column property="createTime" label="创建时间" v-if="tabIndex != 6 ">
            <template #default="scope">
              <span>{{ formatDate(scope.row.createTime)  }}</span>
            </template>
          </el-table-column>
          <el-table-column property="updateTime" label="删除日期" v-if="tabIndex == 6 ">
            <template #default="scope">
              <span>{{ scope.row.updateTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <div class="bot-box">
                <div style="margin-right: 15px" v-if="tabIndex == 6 " @click="restores(scope.row)">还原</div>
                <div style="margin-right: 15px" v-show="scope.row.isDir ==1" v-else @click="down(scope.row)">下载</div>
                <div style="margin-right: 15px" v-if="tabIndex == 6" @click="handleRealDelete(scope.row)">删除</div>
                <div style="margin-right: 15px" v-else @click="handleDelete(scope.row)">删除</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="box-fy">
          <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"
            @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle" :current-page="queryParams.pageNo" />
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="centerDialogVisible" title="上传文件" width="500" center>
      <div style="display: flex">
        <span style="color: red;margin-right: 10px">*</span>
        <FileUpload v-if="centerDialogVisible" v-model="fileInfos" :limit="5"></FileUpload>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="addFile()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog :visible.sync="folder" title="新建文件夹" width="500" center>
      <div class="wj-box">
        <div><span style="color: red">*</span> 名称：</div>
        <el-input v-model="form.curFilename" style="width: 240px" placeholder="请输入新建文件夹名称"/>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDir">取消</el-button>
          <!--          <el-button type="primary" @click="folder = false">-->
          <el-button type="primary" @click="createDir">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { findAll, save, delByIds, ackDelete, restore, getParentId, findAllDocList } from "@/api/knowledge/tarchives/tarchives";
import { getPreViewUrl } from "@/utils/auth";
import { downloadFileUrl, downloadFile } from "../util/file";

export default {
  data() {
    return {
      loading: true,
      tabIndex: 1,
      folder: false,
      input: '',
      parentId: '',
      tableData: [],
      ids: null,
      idList: null,
      selectIds: null,
      total: 0,
        form: {},
        queryParams: {
          originalFilename: "",
          parentId: null,
          isRecycled: 1,
          type: null,
          pageNo: 1,
          pageSize: 10
        },
        rules: {
          parentId: [{ required: true, message: "上级部门不能为空", trigger: "blur" }],
          deptName: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
          orderNum: [{ required: true, message: "显示排序不能为空", trigger: "blur" }],
          email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
          phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
        },
      centerDialogVisible: false,
      presentId: null,
      fileInfos: []
    };
  },
  methods: {
    formatDate(value) {
      const date = new Date(value);
      // 使用toISOString将日期格式化为YYYY-MM-DD
      const isoString = date.toISOString();
      // 将ISO字符串分割并取前面的日期部分
      return isoString.slice(0, 10);

    },
    padLeftZero(str) {
      return ('00' + str).substr(str.length)
    },

    openUpload(){
      console.log(193)
      this.centerDialogVisible = true
    },
    /**
     * 上传文件
     */
    uploadUrl(obj) {
      this.fileInfos = obj;
    },
    cancel() {
      this.centerDialogVisible = false;
      this.fileInfos = [];
    },
    addFile() {
      console.log(this.fileInfos,207)
      if (!this.fileInfos) {
        this.$modal.msgError("请选择文件");
        return;
      }

      this.fileInfos.forEach(fileInfo => {
        let data = {
          parentId: this.presentId,
          originalFilename: fileInfo.name,
          fileUrl: fileInfo.url,
          fileSize: fileInfo.size
        };
        save(data).then(res => {
          if (res.code === 0) {
            this.folder = false;
            this.form = {};
          } else {
            // this.$modal.msgError(res.data.msg);
          }
          this.getList();
          this.centerDialogVisible = false
        });

      });

      this.$modal.msgSuccess("上传成功");

    },
    shijian(data) {
      if (data.type === '0') {
        this.enterDir(data);
      } else {
        this.view(data);
      }
    },
    enterDir(data) {
      this.queryParams.pageNo = 1;
      if (data.isRecycled === 1 && data.isDir === 0) {
        this.queryParams.parentId = data.id;
        this.parentId = data.id;
        this.form.parentId = data.id;
        this.getList();
      }
      this.presentId = data.id;
    },
    returnDir() {
      let data = {
        id: this.presentId
      };
      this.queryParams.pageNo = 1;
      getParentId(data).then(res => {
        if (res.data.parentId) {
          this.queryParams.parentId = res.data.parentId;
          this.form.parentId = res.data.parentId;
          this.presentId = res.data.parentId;
        } else {
          this.queryParams.parentId = '';
          this.form.parentId = '';
        }
        this.getList();
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      let tempId = selection.map(item => item.id);
      this.selectIds = tempId.join(',');
      this.ids = tempId.join(',');
    },
    /** 文件查看 */
    getList() {
      this.loading = true;
      findAll(this.queryParams).then(response => {
        console.log(response,274)
        this.tableData = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    pageCurrentChangeHandle(val) {
      this.loading = true;
      this.queryParams.pageNo = val;
      findAll(this.queryParams).then(response => {
        this.tableData = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    pageSizeChangeHandle(val) {
      this.loading = true;
      this.queryParams.pageNo = 1;
      this.queryParams.pageSize = val;
      findAll(this.queryParams).then(response => {
        this.tableData = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 文件查看 */
    findAllDocLists() {
      this.loading = true;
      findAllDocList(this.queryParams).then(response => {
        this.tableData = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    clickType(type, idx) {
      this.queryParams.pageNo = 1;
      this.tableData = [];
      this.form.parentId = null;
      this.tabIndex = idx;
      this.loading = true;
      this.queryParams.parentId = null;
      this.queryParams.isRecycled = 1;
      this.queryParams.type = type;
      this.getList();
    },
    getListRecycled(idx) {
      this.tabIndex = idx;
      this.loading = true;
      this.queryParams.type = null;
      this.queryParams.parentId = null;
      this.queryParams.isRecycled = 0;
      this.getList();
    },
    closeDir() {
      this.form = {};
      this.folder = false;
    },
    /** 文件保存 */
    createDir() {
      if (!this.form.curFilename) {
        this.$modal.msgWarning("请填写文件名称");
        return;
      }
      if (this.form.id!== undefined) {
        save(this.form).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.folder = false;
          this.getList();
        });
      } else {
        save(this.form).then(response => {
          if (response.code === 200) {
            this.$modal.msgSuccess("新增成功");
            this.folder = false;
            this.form = {};
            this.getList();
          } else {
            this.$modal.msgError(response.msg);
          }
        });
      }
    },
    /** 文件删除 */
    handleDelete(row) {
      const ids = row.id || this.selectIds;
      this.$modal.confirm('是否确认删除此项数据?').then(() => {
        let data = {
          ids: ids
        };
        return delByIds(data);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 彻底删除 */
    handleRealDelete(row) {
      const ids = row.id || this.selectIds;
      this.$modal.confirm('是否确认删除此项数据?').then(() => {
        let data = {
          ids: ids
        };
        return ackDelete(data);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    handleExport() {
      this.$download("/knowledge/system/tArchives/export", this.queryParams, `档案管理_${new Date().getTime()}`);
    },
    /** 还原 */
    restores(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认还原此项数据?').then(() => {
        let data = {
          ids: ids
        };
        return restore(data);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("还原成功");
      }).catch(() => {
      });
    },
    down(row) {
      downloadFile(row.fileUrl,row.originalFilename);
    },
    view(row) {
      var preViewUrl = getPreViewUrl(downloadFileUrl + "?fileName=" + row.fileUrl, row.fileUrl, "连铝");
      window.open(preViewUrl);
    },
    Bfolder() {
      this.folder = true;
    }
  },
  created() {
    this.getList();
  }
};
</script>
<style scoped lang="scss">

.centenr {
  width: 100%;
  background: #FFFFFF;
  border-radius: 10px;
  display: flex;
  box-sizing: border-box;
  padding: 20px;


}

.left-box {
  width: 15%;
  border-right: 1px solid #D8D8D8;

}

.right-box {
  width: 84%;

  box-sizing: border-box;
  //padding: 0px 15px;
  margin-left: 20px;
}

.actbox {
  background: #F1F7FF !important;
  color: #237EFF !important;
}

.hs-box {
  width: 90%;
  height: 40px;
  border-radius: 3px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #D8D8D8;
  margintop: 20px;
  cursor: pointer;
}

.ds-box {
  width: 90%;
  height: 40px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin-bottom: 20px;
  cursor: pointer;
}

.size-right {
  margin-left: 10px;
  cursor: pointer;
}

right-box-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

}

.input-box {
  width: 20%;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 5px 15px;

}

.left-ds-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;


}

.lan-bottom {
  width: 112px;
  height: 40px;
  background: #0052D9;
  border-radius: 3px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  cursor: pointer;

}

.dlan-bottom {
  width: 112px;
  height: 40px;
  border: 1px solid #0052D9;
  border-radius: 3px;
  color: #0052D9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  cursor: pointer;

}

.hong-bottom {
  width: 112px;
  height: 40px;
  border: 1px solid #D54941;
  border-radius: 3px;
  color: #D54941;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  cursor: pointer;

}

.box-fy {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 20px;
}

.bot-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #237EFF;
}

.wj-box {
  display: flex;
  align-items: center;

}

</style>

