<template>
  <div class="tableBox">
    <div class="title-box-bg">
      <span>{{ pageVal.mouduleName }}</span>
    </div>
    <div v-if="pageVal.tableData.length">
      <div class="table">
        <el-table
          :data="pageVal.tableData"
          :show-header="false"
          @row-click="columnEvent"
        >
          <el-table-column
            prop="documentName"
            show-overflow-tooltip
            align="left"
          />
          <el-table-column
            prop="publishDate"
            :width="timeCellWidth"
            align="right"
          />
        </el-table>
      </div>
      <div class="paginationBox">
        <el-pagination
          :small="true"
          :total="pageVal.pagination.total"
          :page-size="pageVal.pagination.size"
          @current-change="handleCurrentChange"
          :currentPage="pageVal.pagination.current"
          layout="total, prev, pager, next, jumper"
        />
      </div>
    </div>
    <template v-else>
      <el-empty description="暂无数据" />
    </template>
  </div>
</template>
<script setup lang="ts" name="">
import { ref, defineEmits, watch } from "vue";
const pageVal = ref({});
const { pageData, timeCellWidth } = defineProps({
  pageData: {
    type: Object,
    required: true,
  },
  timeCellWidth: {
    type: Number,
    default: 120,
  },
});
const $emit = defineEmits(["columnEvent", "paginationEvent"]);
// 分页
function handleCurrentChange(val) {
  $emit("paginationEvent", val);
}
// 详情
function columnEvent(row) {
  $emit("columnEvent", row);
}

watch(
  () => pageData,
  (val) => {
    pageVal.value = val;
  },
  { immediate: true, deep: true }
);
</script>
<style scoped lang="less">
.tableBox {
  min-height: calc(100vh - 200px);
  .table {
    overflow: auto;
    margin-top: 10px;
    height: calc(100vh - 300px);
    ::v-deep(.el-table) {
      .el-table__body {
        .el-table__row {
          .el-table__cell {
            border: none;
            padding: 0;
            cursor: pointer;

            .cell {
              line-height: 48px;
            }
          }

          .is-right {
            .cell {
              color: #b2b2b2;
            }
          }
        }
      }
    }
  }

  .paginationBox {
    padding: 20px 0;
  }
  .el-empty {
    margin-top: 80px;
  }
}
</style>
