<template>
  <div class="app-container container">
    <div class="search-input">
      <el-input
        placeholder="输入关键词搜索，马上在线阅读"
        v-model="keyword"
        clearable
        @keyup.native.enter="handleSearch"
      ></el-input>
      <el-button icon="el-icon-search" type="primary" @click="handleSearch"
        >搜索
      </el-button>
    </div>
    <div class="table">
      <el-button
        class="upload"
        size="mini"
        type="primary"
        icon="el-icon-upload2"
        id="uploadFileId"
        @click.native="handleUploadFileBtnClick(FILE_UPLOAD)"
        >上传文件</el-button
      >
      <el-button
        type="primary"
        plain
        size="mini"
        :disabled="multiple"
        @click.native="handleMultiDownload"
        >批量下载</el-button
      >

      <el-table
        v-loading="loading"
        :data="list.records"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          label="文件名称"
          align="center"
          prop="name"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div class="fileName">
              <img :src="$file.setFileImg(scope.row)" />
              <el-link @click="handleOpenFile(scope.row)">
                {{ scope.row.fileName }}
              </el-link>
            </div>
          </template>
        </el-table-column>

        <!-- <el-table-column
          label="作者"
          align="center"
          prop="author"
          show-overflow-tooltip
        >
        </el-table-column> -->
        <!-- <el-table-column
          show-overflow-tooltip
          label="年份"
          prop="year"
          align="center"
        /> -->
        <!-- <el-table-column
          show-overflow-tooltip
          label="机构"
          prop="organize"
          align="center"
        >
        </el-table-column> -->
        <el-table-column
          label="文件大小"
          align="center"
          prop="fileSize"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ $file.calculateFileSize(scope.row.fileSize) }}
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              :icon="
                scope.row.collected ? 'el-icon-star-on' : 'el-icon-star-off'
              "
              @click="handleCollect(scope.row)"
            >
              {{ scope.row.collected ? "已收藏" : "收藏" }}
            </el-link>
            <el-divider direction="vertical"></el-divider>

            <el-link
              type="primary"
              icon="el-icon-view"
              @click="handleOpenFile(scope.row)"
            >
              预览
            </el-link>

            <el-divider direction="vertical"></el-divider>
            <el-link
              target="_blank"
              type="primary"
              icon="el-icon-download"
              :href="$file.getDownloadFilePath(scope.row)"
              :download="scope.row.fileName + '.' + scope.row.extendName"
            >
              下载
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="list.total"
        :page.sync="list.current"
        :limit.sync="list.size"
        @pagination="loadData"
      />
    </div>
  </div>
</template>
<script>
import { getInnerFileList } from "@/api/resource";
import { uploadModeConstant, fileTypeConstant } from "@/constants/index";
import { newfile } from "@/api/wps";
const { INTERNAL_RESOURCE } = fileTypeConstant;
export default {
  data() {
    return {
      keyword: "",
      list: {
        records: [],
        total: 0,
        size: 10,
        current: 1,
      },
      INTERNAL_RESOURCE,
      // 遮罩层
      loading: false,
      // 选中数组
      selectedFiles: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      ...uploadModeConstant,
      INTERNAL_RESOURCE,
    };
  },
  computed: {
    // 批量下载文件链接
    batchDownloadLink() {
      return `${
        process.env.VUE_APP_BASE_API
      }/v1/api/folder/transfer/batchDownloadFile?userFileIds=${this.selectedFiles
        .map((item) => item.userFileId)
        .join(",")}`;
    },
  },
  mounted() {
    this.loadData();
  },
  methods: {
    handleSearch(keyword) {
      this.loadData();
    },

    // 点击打开文件
    handleOpenFile(file) {
      this.$file.handleFileNameClickNew(file,this.$fileKeys.qiwen);
    },

    async loadData() {
      this.loading = true;
      const { size, current } = this.list;
      let params = {
        fileType: this.INTERNAL_RESOURCE.code,
        filePath: this.INTERNAL_RESOURCE.path,
        currentPage: current,
        pageCount: size,
        fileName: this.keyword,
      };
      let res = await getInnerFileList(params);
      this.loading = false;
      if (res.code == 200) {
        this.list = res.data;
        this.list.current = Number(this.list.current);
        this.list.size = Number(this.list.size);
      }
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selectedFiles = selection;
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },

    /**
     * 上传文件按钮点击事件
     * @description 通过Bus通信，开启全局上传文件流程
     * @param {boolean} uploadWay 上传方式 0-文件上传 1-文件夹上传 2-粘贴图片或拖拽上传
     */
    handleUploadFileBtnClick(uploadWay) {
      const params = { filePath: this.INTERNAL_RESOURCE.path, isDir: 0 };
      this.$openBox.uploadFile({
        params,
        uploadWay,
        serviceEl: this,
        callType: 1, //  callType 调用此服务的方式：1 - 顶部栏，2 - 右键菜单
      });
    },

    // 点击收藏
    handleCollect(row) {
      this.loading = true;
      const { extendName, fileName } = row;
      const filePath = "/我的收藏";
      const WORD = ["docx", "doc"]; //暂时只考虑新建word的情况
      let filetype = "w";
      // const PDF = ["pdf", "doc"];
      // const EXCEL = ["xlsx", "xls"];
      if (WORD.includes(row.extendName)) {
        filetype = "w";
      }
      const params = {
        filetype,
        extendName,
        filePath,
        fileName,
        isTemplate: false,
        templateId: "",
      };
      newfile(params)
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            this.$message.success("收藏成功！");
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  background-color: #f7f8fa;
  padding: 20px;
}
.upload {
  margin-bottom: 10px;
}
.search-input {
  display: flex;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  .el-button {
    margin-left: 20px;
  }
  ::v-deep .el-input {
    input {
      background-color: #f7f8fa;
      border: none;
    }
  }
}
.table {
  margin: 0 0 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  .tools {
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.fileName {
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    margin-right: 4px;
  }
}
</style>
