<template>
  <div class="table">
    <div class="tools">
      <!-- <el-button
        type="primary"
        plain
        size="mini"
        :disabled="multiple"
        @click.native="handleMultiCollect"
        >批量收藏</el-button
      > -->
      <!-- <el-button
        type="primary"
        plain
        size="mini"
        :disabled="multiple"
        @click.native="handleMultiDownload"
        >批量下载</el-button
      > -->
      <el-button
        v-if="previewType == 'caj'"
        type="text"
        size="mini"
        class="caj"
        @click="handleDownloadCajViewer"
      >
        <svg-icon icon-class="caj-logo" style="font-size: 24px"></svg-icon>
        下载Caj阅读器
      </el-button>

      <el-button
        v-if="previewType == 'pdf'"
        class="upload"
        size="mini"
        type="primary"
        icon="el-icon-upload2"
        id="uploadFileId"
        @click.native="handleUploadFileBtnClick(FILE_UPLOAD)"
        >上传文件</el-button
      >
    </div>
    <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">
            <!-- <el-link @click="handleOpenFile(scope.row)"> -->
            <!-- <img
                :src="$file.setFileImg(scope.row, 'showType')"
                style="width: 20px; height: 20px; margin-right: 4px"
              /> -->
            {{ scope.row.name }}
            <!-- </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
      >
      </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="getDownloadFilePath(scope.row)"
            :download="getDownloadFileName(scope.row)"
          >
            下载
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="list[totalKey]"
      :page.sync="list[currentKey]"
      :limit.sync="list[sizeKey]"
      @pagination="getList"
    />
    <!-- 多选文件下载，页面隐藏 -->
    <a :href="batchDownloadLink" ref="batchDownloadRef"></a>
  </div>
</template>

<script>
import { addFavorite, cancelCollect } from "@/api/user/collect";
import { handleDownloadCajViewer } from "@/utils/file";
import { uploadModeConstant, fileTypeConstant } from "@/constants/index";
const { INTERNAL_RESOURCE } = fileTypeConstant;
export default {
  props: {
    list: {
      type: Object,
      default: () => ({}),
    },
    // 第三方资源暂时用Caj，内部资源预览使用pdf
    previewType: {
      type: String,
      default: "pdf",
    },
    currentKey: {
      type: String,
      default: "current",
    },
    sizeKey: {
      type: String,
      default: "size",
    },
    totalKey: {
      type: String,
      default: "total",
    },
  },
  data() {
    return {
      // 遮罩层
      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.getList();
  },
  methods: {
    // 下载caj阅读器
    handleDownloadCajViewer,
    getList() {
      this.$emit("getList");
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selectedFiles = selection;
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },

    // 点击打开文件
    handleOpenFile(file) {
      this.$file.handleFileNameClickNew(file, this.$fileKeys.kbase);
    },
    // 获取下载地址
    getDownloadFilePath(file) {
      return file.weburl;
    },

    // 获取下载文件名
    getDownloadFileName(file) {
      const { name, weburl } = file;
      const suffix = weburl.split(".")[1];
      return name + "." + suffix;
    },

    // 点击收藏
    async handleCollect(file) {
      let request;
      let params;
      if (file.collected) {
        request = cancelCollect;
        const { id } = file;
        params = {
          fileIds: id,
        };
      } else {
        request = addFavorite;
        const extendName = "pdf";
        const { fileSize, id, name, weburl } = file;
        params = {
          fileSize,
          fileId: id,
          fileName: name,
          fileUrl: weburl,
          extendName,
          filePath: "/我的收藏",
          userId: this.$store.getters.userInfo.userId,
          //以下字段必填但可为空
          deleteFlag: null,
          timeStampName: null,
          storageType: null,
          pointCount: null,
          identifier: null,
          userFileId: null,
          isDir: null,
          uploadTime: null,
          deleteTime: null,
          deleteBatchNum: null,
          imageWidth: null,
          imageHeight: null,
          removeFlag: null,
        };
      }
      let res = await request(params);
      if (res.code == 200) {
        let message = file.collected ? "取消收藏成功！" : "收藏成功！";
        this.$message.success(message);
        this.getList();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-link--inner {
  display: flex;
  align-items: center;
}
.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;
    ::v-deep .caj {
      & > span {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
