<template>
  <LayoutVue>
    <div class="flex flex-col w-full h-full">
      <div class="flex items-center">
        <Search placeholder="搜索" v-model="searchStr"></Search>
        <Avatar class="ml-7"></Avatar>
      </div>
      <div
        class="flex items-center justify-between flex-shrink-0"
        style="margin-top: 26px"
      >
        <Title
          :title="[
            {
              name: '藏品管理',
              routerName: 'collectionManagement',
              query: {
                type: type,
              },
            },
            {
              name: '划转记录',
            },
          ]"
        ></Title>
      </div>
      <div class="flex-grow overflow-hidden relative" style="margin-top: 50px">
        <Empty
          v-show="!loading && tableData.length === 0"
          class="absolute top-1/3 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
        >
          {{
            searchingStr === ""
              ? "暂无数据"
              : "没有找到匹配结果，尝试其他关键词搜索"
          }}
        </Empty>
        <div
          class="h-full overflow-auto"
          v-show="showTableCheck(loading, tableData)"
        >
          <TransferRecordsTable
            :type="type"
            :loading="loading"
            ref="transferRecordsTableRef"
            :data="tableData"
            @scroll-to-end="fetchNextPage"
            @update="refetch"
          ></TransferRecordsTable>
        </div>
      </div>
    </div>
  </LayoutVue>
</template>
<script lang="ts" setup>
import { computed, ref } from "vue";

import { GO_URLS } from "cqk-sy-ui";
import LayoutVue from "@/components/Layout.vue";
import Search from "@/components/Search/index.vue";
import Avatar from "@/components/Avatar/index.vue";
import Title from "@/components/Title.vue";
import TransferRecordsTable from "./components/TransferRecordsTable/index.vue";

import { useTableData } from "@/components/Table/hooks";
import { watchDebounced } from "@vueuse/core";
import Empty from "@/components/Empty/index.vue";
import { watchStrChangeDebounceTime } from "@/config/time";
import { $ajax } from "@/service";
import { useRoute } from "vue-router";
import { eCollectionType } from "../PassMaker/types";
import { showTableCheck } from "@/utils/show";

const searchStr = ref("");
const searchingStr = ref("");
const transferRecordsTableRef =
  ref<InstanceType<typeof TransferRecordsTable>>();

const route = useRoute();
const type = computed(() => {
  return route.query.type as eCollectionType;
});

const fetchTableData = async ({
  page,
  page_size,
}: {
  page: number;
  page_size: number;
}) => {
  // 当前状态
  let res: any;
  if (type.value === eCollectionType.copyright) {
    res = await $ajax({
      type: "get",
      url: GO_URLS.transferList,
      params: {
        page,
        page_size,
        pass_name: searchStr.value,
      },
    });
    return {
      total: res!.data.total,
      data: res!.data.results || [],
    };
  } else {
    res = await $ajax({
      type: "get",
      url: "/api/pass/batches",
      params: {
        page,
        page_size,
        name: searchStr.value,
        transfer_time_sort: 2,
        ignore_not_transfer: true,
        batch_type: route.query.type === "derivatives" ? 2 : 1,
      },
    });
    return {
      total: res!.data.total,
      data: (res!.data.results || []).map((i: any) => {
        return {
          pass_name: i.name,
          amount: i.amount,
          update_time: i.transfer_time,
          status: i.transfer_status,
          to: i.transfer_address,
          id: i.id,
          batch_num: i.batch_num,
        };
      }),
    };
  }
};

const {
  fetchNextPage: fetchNextPage,
  tableData: tableData,
  loading: loading,
  refetch: refetch,
} = useTableData({
  fetchData: fetchTableData,
  page_size: 20,
});

watchDebounced(
  searchStr,
  (newV) => {
    transferRecordsTableRef.value?.tableRef?.scrollTo(0, 0);
    refetch().then(() => {
      searchingStr.value = newV;
    });
  },
  { debounce: watchStrChangeDebounceTime }
);
</script>
<style lang="scss" scoped></style>
