<template>
  <el-dialog :title="type === 'DOWNLOAD' ? '下载记录' : '预览记录'" :close-on-click-modal="false" :visible.sync="visible" custom-class="file-operation-record-dialog" width="40%" append-to-body>
    <el-table :data="list" size="small">
      <el-table-column prop="userName" :label="type === 'DOWNLOAD' ? '下载用户' : '预览用户'"></el-table-column>
      <el-table-column prop="createTime" :label="type === 'DOWNLOAD' ? '下载时间' : '预览时间'"></el-table-column>
    </el-table>
    <div class="pagination-box">
      <el-pagination layout="prev, pager, next" :total="total" :current-page.sync="pageNumber" :page-size="pageSize" @current-change="currentChange"> </el-pagination>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "DownloadOrPreviewRecords",
  data() {
    return {
      visible: false,
      list: [],
      pageNumber: 1,
      pageSize: 10,
      total: 0,
    };
  },
  props: {
    fileId: {
      require: true,
      type: String,
    },
    type: {
      validator: (val) => {
        if (["DOWNLOAD", "PREVIEW"].indexOf(val) !== -1) {
          return true;
        } else {
          throw new Error("组件【DownloadOrPreviewRecords】参数 type 的可选值为 'DOWNLOAD' / 'PREVIEW'");
        }
      },
      require: true,
    },
  },

  methods: {
    init() {
      this.visible = true;
      //   this.getUploadReviewList();
      this.getList();
    },
    clickHandle(data) {},
    currentChange() {
      this.getList();
    },
    getList() {
      this.$http
        .post(this.$http.adornUrl("/fileOperationRecord/list", false), {
          fileId: this.fileId,
          type: this.type,
          pageNumber: this.pageNumber,
          pageSize: this.pageSize,
        })
        .then(({ data }) => {
          this.list = data.data.records;
          this.total = data.data.total;
        });
    },
  },
};
</script>

<style lang="scss">
.file-operation-record-dialog {
  //   background-color: #000;
  .el-dialog__body {
    padding: 0 !important;
  }
  .pagination-box {
    padding: 4px 8px;
    border-bottom: 1px solid #dfe2ed;
  }
}
</style>
