<template>
  <div class="table-box history-page">
    <ProTable ref="proTable" :columns="columns" :request-api="getTableList" :init-param="initParam" :data-callback="dataCallback">
      <template #tableHeader>
        <div class="table-header-btn">
          <span class="page-title">历史分析</span>
        </div>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="ts" name="businessDataHistory">
import { reactive, ref } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";

const DEFAULT_PAGE_SIZE = 10;

const proTable = ref<ProTableInstance>();

const columns = reactive<ColumnProps<any>[]>([
  {
    prop: "index",
    label: "序号",
    width: 80,
    render: (scope: any) => {
      const { pageable } = proTable.value || {};
      const pageNum = pageable?.pageNum ?? 1;
      const pageSize = pageable?.pageSize ?? DEFAULT_PAGE_SIZE;
      return scope.$index + (pageNum - 1) * pageSize + 1;
    }
  },
  { prop: "placeholder", label: "占位列", minWidth: 120 }
]);

const initParam = reactive<Record<string, any>>({});

const dataCallback = (data: any) => ({
  list: data?.records ?? data?.list ?? [],
  total: data?.total ?? 0
});

const getTableList = async (_params: any) => {
  return Promise.resolve({ data: { list: [], total: 0 } });
};
</script>

<style lang="scss" scoped>
.table-box {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.table-header-btn {
  .page-title {
    font-size: 16px;
    font-weight: 500;
  }
}
</style>
