<template>
  <div class="table">
    <div class="mb8">
      <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
      >
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </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="organize"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="文件大小"
        align="center"
        prop="fileSize"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{ $file.calculateFileSize(scope.row.fileSize) }}</span>
        </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="el-icon-star-off"
            @click="handleCollect(scope.row)"
          >
            收藏
          </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
      v-show="list.total > 0"
      :total="list.total"
      :page.sync="queryParams.currentPage"
      :limit.sync="queryParams.pageCount"
      @pagination="getList"
    />
    <!-- 多选文件下载，页面隐藏 -->
    <a :href="batchDownloadLink" ref="batchDownloadRef"></a>
  </div>
</template>

<script>
import { list } from "../../mockData";
export default {
  props: {
    list: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      selectedFiles: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        currentPage: 1,
        pageCount: 10,
        fileName: "", //文件名称
        shareStatus: "", //分享状态
      },
      // 批量取消的弹窗可见性
      multiCancelVisible: false,
    };
  },
  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: {
    getList() {
      this.$emit("getList");
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selectedFiles = selection;
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    // 点击打开文件
    handleOpenFile(file) {
      this.$file.handleFileNameClickNew(file);
    },
    // 批量收藏
    handleMultiCollect() {},

    // 点击收藏
    handleCollect(file) {},
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-link--inner {
  display: flex;
  align-items: center;
}
.table {
  margin: 40px 0 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
}
</style>
