<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 overflow-hidden flex-shrink-0"
        style="margin-top: 26px"
      >
        <Title
          :title="[
            {
              name: $route.name=== 'issuedDerivativesDetail' ? '衍生品': '专辑',
              routerName: 'collectionManagement',
              query: {
                type: $route.name=== 'issuedDerivativesDetail' ? 'derivatives': 'album'
              }
            },
            {
              name: $route.query.name as string,
            },
          ]"
        ></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"
        >
          {{
            debouncedSearchStr === ""
              ? "没有找到匹配结果，尝试其他关键词搜索"
              : "暂无数据"
          }}
        </Empty>
        <IssuedBatchesTable
          v-show="!(tableData.length === 0 && loading === false)"
          ref="issuedBatchesTableRef"
          :loading="loading"
          :tableData="tableData"
          @scroll-to-end="fetchNextPage"
        ></IssuedBatchesTable>
      </div>
    </div>
  </LayoutVue>
</template>
<script lang="ts" setup>
import { ref } from "vue";

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 Empty from "@/components/Empty/index.vue";
import IssuedBatchesTable from "./components/IssuedBatchesTable/index.vue";

import { watchDebounced } from "@vueuse/core";
import { useTableData } from "@/components/Table/hooks";
import { watchStrChangeDebounceTime } from "@/config/time";
import { $ajax } from "@/service";
import { useRoute } from "vue-router";
import { GO_URLS } from "cqk-sy-ui";

const searchStr = ref("");
const debouncedSearchStr = ref("");
const issuedBatchesTableRef = ref<InstanceType<
  typeof IssuedBatchesTable
> | null>(null);
const route = useRoute();

const fetchTableData = async ({
  page,
  page_size,
}: {
  page: number;
  page_size: number;
}) => {
  /* 请求所需要的参数 */
  page;
  page_size;
  // 当前状态
  const res = await $ajax({
    url: GO_URLS.passList,
    type: "get",
    params: {
      batch_num: route.query.batch_num as string,
      page,
      page_size,
      name: searchStr.value,
      time_sort: 1,
    },
  });
  return {
    total: res!.data.total,
    data: res!.data.results || [],
  };
};

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

function handleRefetch() {
  issuedBatchesTableRef.value?.tableRef?.scrollTo(0, 0);
  return refetch();
}

watchDebounced(
  () => searchStr.value,
  () => {
    handleRefetch().then(() => {
      debouncedSearchStr.value = searchStr.value;
    });
  },
  {
    debounce: watchStrChangeDebounceTime,
  }
);
</script>
<style lang="scss" scoped></style>
