<template>
  <Table
    class="filingPersonTable"
    ref="tableRef"
    :columns="tableColumns"
    height="100%"
    :data="tableData"
    v-loading="loading"
    element-loading-text="加载中..."
  >
    <template #fee="slotProps">
      <div
        :style="{
          color: (
            slotProps.amount !== 0
              ? slotProps.amount
              : slotProps.chain_times > 0
          )
            ? green.color
            : red.color,
        }"
      >
        {{ slotProps.amount !== 0 ? slotProps.amount + "元" : "" }}
        {{ slotProps.amount === 0 ? slotProps.chain_times + "次" : "" }}
      </div>
    </template>
    <template #type="slotProps">
      {{ (slotProps.type === 1 && "实名认证") || "" }}
      {{ (slotProps.type === 2 && "套餐购买") || "" }}
      {{ (slotProps.type === 3 && "存证上链") || "" }}
      {{ (slotProps.type === 4 && "文件上链") || "" }}
      {{ (slotProps.type === 5 && "版权备案") || "" }}
    </template>
    <template #create_time="slotProps">
      {{ formatTime(slotProps.create_time) }}
    </template>
  </Table>
</template>

<script setup lang="ts">
import Table from "@/components/Table/index.vue";
import { tableColumns } from "./table";
import { onMounted, ref } from "vue";
import { formatTime } from "cqk-sy-ui";
import { eStatusOfCopyright } from "@/components/ApproveStatus/status";
import { useTableData, useTableScrollListener } from "@/components/Table/hooks";
import { green, red } from "@/components/ApproveStatus/btnStyle";
import { getBills } from "@/service/copyrightService";

// defineProps<{
//   //   data: any[];
//   //   loading: boolean;
// }>();

const data = [] as any[];
const loading = false;

const emit = defineEmits<{
  (
    e: "clickOperate",
    payload: {
      type: Exclude<eStatusOfCopyright, eStatusOfCopyright.ALL>;
      raw: any;
    }
  ): void;
  (e: "clickStatusFilter", payload: eStatusOfCopyright): void;
}>();

const tableRef = ref<InstanceType<typeof Table>>();

const { tableData, fetchNextPage } = useTableData({
  fetchData: async ({ page, page_size }) => {
    const res = await getBills({
      name: "",
      page,
      page_size,
    });
    return {
      total: res?.data.total,
      data: res?.data.results || [],
    };
  },
});

useTableScrollListener(tableRef, () => {
  fetchNextPage();
});
</script>

<style lang="scss">
.filingPersonTable {
  .el-table__cell {
    height: 50px;
  }
}
</style>
