<template>
  <div class="file-list-wrapper">
    <!-- 操作按钮 -->
    <el-header height="auto">
      <OperationMenu
        :fileType="fileType"
        :filePath="filePath"
        @getSearchFileList="getSearchFileList"
        @getTableDataByType="getTableDataByType"
      ></OperationMenu>
    </el-header>
    <div class="middle-wrapper">
      <!-- 面包屑导航栏 -->
      <BreadCrumb
        class="breadcrumb"
        :fileType="fileType"
        :filePath="filePath"
        @getTableDataByType="getTableDataByType"
      ></BreadCrumb>
    </div>
    <!-- 文件列表-表格模式 -->
    <FileTable
      :fileType="fileType"
      :filePath="filePath"
      :fileList="fileList"
      :loading.sync="loading"
      v-if="fileModel == 0"
      @getTableDataByType="getTableDataByType"
      @click.native.right="handleClickRight"
    ></FileTable>
    <!-- 文件列表-网格模式 -->
    <FileGrid
      :fileType="fileType"
      :filePath="filePath"
      :fileList="fileList"
      :loading="loading"
      v-if="fileModel == 1"
      @getTableDataByType="getTableDataByType"
      @click.native.right="handleClickRight"
    ></FileGrid>
    <!-- 图片-时间线模式 -->
    <FileTimeLine
      class="image-model"
      :fileList="fileList"
      :loading.sync="loading"
      v-if="fileModel === 2 && fileType === 1"
      @getTableDataByType="getTableDataByType"
      @click.native.right="handleClickRight"
    ></FileTimeLine>
    <div class="pagination-wrapper">
      <div class="current-page-count">当前页{{ fileList.length }}条</div>
      <!-- 回收站不展示分页组件 -->
      <el-pagination
        :current-page="pageData.currentPage"
        :page-size="pageData.pageCount"
        :total="pageData.total"
        :page-sizes="[10, 50, 100, 200]"
        :layout="
          screenWidth <= 768
            ? 'total, prev, next, jumper'
            : 'sizes, total, prev, pager, next'
        "
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        v-if="fileType !== 6"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import OperationMenu from "./components/OperationMenu.vue";
import BreadCrumb from "@/components/common/BreadCrumb.vue";
import FileTable from "@/components/common/FileTable.vue";
import FileGrid from "./components/FileGrid.vue";
import FileTimeLine from "./components/FileTimeLine.vue";

import {
  getFileListByPath,
  getFileListByType,
  getRecoveryFile,
  getMyShareFileList,
  searchFile,
} from "@/api/qwFile";
import { fileTypeConstant, collectConstant } from "@/constants";

export default {
  name: "FileList",
  components: {
    OperationMenu,
    BreadCrumb,
    FileTable,
    FileGrid,
    FileTimeLine,
  },
  data() {
    return {
      fileNameSearch: "",
      loading: true, //  表格数据-loading
      fileList: [], //  表格数据-文件列表
      // 分页数据
      pageData: {
        currentPage: 1,
        pageCount: 10,
        total: 0,
      },
      searchFileName: "", //当前搜索的文件名称，支持文件名和文件夹名
      ...fileTypeConstant,
      ...collectConstant,
    };
  },
  computed: {
    // 左侧菜单选中的文件类型
    fileType() {
      return this.$route.query.fileType
        ? Number(this.$route.query.fileType)
        : 0;
    },
    // 当前所在路径
    filePath() {
      return this.$route.query.filePath || "";
    },
    // 文件查看模式 0列表模式 1网格模式 2 时间线模式
    fileModel() {
      return this.$store.getters.fileModel;
    },
    // 屏幕宽度
    screenWidth() {
      return this.$store.state.common.screenWidth;
    },
  },
  watch: {
    filePath(value) {
      if (value) {
        this.setPageCount();
        this.getTableDataByType();
      }
    },
    // 暂不监听fileType
    // fileType() {
    //   this.setPageCount();
    //   this.getTableDataByType();
    // },
    // 监听文件查看模式
    fileModel() {
      this.setPageCount();
    },
    // 监听搜索文件
    searchFileName() {
      this.setPageCount();
      this.getTableDataByType();
    },
  },
  created() {
    this.setPageCount();
    this.getTableDataByType();
  },
  methods: {
    /**
     * 文件展示区域的空白处右键事件
     * @param {Document} event 右键事件对象
     */
    handleClickRight(event) {
      event.preventDefault();
      // 只有在全部页面才可以进行以下操作
      if (![6, 8].includes(this.fileType)) {
        this.$openBox
          .contextMenu({
            selectedFile: undefined,
            domEvent: event,
            serviceEl: this,
          })
          .then((res) => {
            if (res === "confirm") {
              this.getTableDataByType(); //  刷新文件列表
              // this.$store.dispatch("showStorage"); //  刷新存储容量
            }
          });
      }
    },
    /**
     * 表格数据获取相关事件 | 调整分页大小
     */
    setPageCount() {
      this.pageData.currentPage = 1;
      if (this.fileModel === 0) {
        this.pageData.pageCount = 10;
      }
      if (this.fileModel === 1) {
        this.pageData.pageCount = 100;
      }
    },
    /**
     * 表格数据获取相关事件 | 获取文件列表数据
     */
    getTableDataByType() {
      this.loading = true;
      this.showFileList();
    },
    /**
     * 表格数据获取相关事件 | 获取当前路径下的文件列表
     */
    showFileList() {
      if (!this.filePath) {
        return;
      }
      let data = {
        fileType: this.fileType,
        filePath: this.filePath,
        currentPage: this.pageData.currentPage,
        pageCount: this.pageData.pageCount,
        fileName: this.searchFileName,
      };
      // 我的收藏界面只显示已收藏的

      if (this.fileType == this.MY_COLLECT.code) {
        data.removeFlag = this.COLLECTED;
      }
      const params = new URLSearchParams();
      for (const key in data) {
        params.append(key, data[key]);
      }
      getFileListByPath(params).then((res) => {
        if (res.code == 200) {
          this.fileList = res.data.records;
          this.pageData.total = res.data.total;
          this.loading = false;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    /**
     * 表格数据获取相关事件 | 分页组件 | 当前页码改变
     */
    handleCurrentChange(currentPage) {
      this.pageData.currentPage = currentPage;
      this.getTableDataByType();
    },
    /**
     * 表格数据获取相关事件 | 分页组件 | 页大小改变时
     */
    handleSizeChange(pageCount) {
      this.pageData.pageCount = pageCount;
      this.getTableDataByType();
    },
    /**
     * 表格数据获取相关事件 | 获取回收站文件列表
     */
    showFileRecovery() {
      getRecoveryFile().then((res) => {
        if (res.code == 200) {
          this.fileList = res.data.records;
          this.loading = false;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    /**
     * 获取搜索文件结果列表
     * @param {string} fileName 文件名称
     */
    getSearchFileList(fileName) {
      this.searchFileName = fileName;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/varibles.scss";

.file-list-wrapper {
  padding: 20px;
  ::v-deep .el-header {
    padding: 0;
  }

  .middle-wrapper {
    margin-bottom: 8px;
  }

  .pagination-wrapper {
    position: relative;
    // border-top: 1px solid $BorderBase;
    height: 44px;
    line-height: 44px;
    text-align: center;
    padding-top: 10px;

    .current-page-count {
      position: absolute;
      left: 16px;
      height: 32px;
      line-height: 32px;
      font-size: 13px;
      color: $RegularText;
    }
  }
}
</style>
