<template>
  <LayoutVue>
    <div class="flex flex-col w-full h-full">
      <div class="flex items-center flex-shrink-0">
        <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',
            },
            {
              name: '专辑管理',
            },
          ]"
        ></Title>
        <div class="flex items-center">
          <syButton
            style="width: 113px"
            mode="elementBtn"
            size="large"
            @click="createAlbumShow = true"
            type="primary"
          >
            创建</syButton
          >
        </div>
      </div>
      <div class="flex-grow overflow-hidden relative" style="margin-top: 50px">
        <Empty
          v-if="!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">
          <syScrollBar
            @scroll-to-almost-end="scrollToAlmostEnd"
            ref="syScrollBarRef"
          >
            <AlbumList
              :list="tableData"
              @update="handleRefetch"
              @click-album="
                $router.push({
                  name: 'albumDetail',
                  query: {
                    id: $event.id,
                    name: $event.name,
                  },
                })
              "
            ></AlbumList>
          </syScrollBar>
        </div>
      </div>
      <CreateAlbumDialog
        v-model:visible="createAlbumShow"
        @update="handleAlbumCreate"
      ></CreateAlbumDialog>
    </div>
  </LayoutVue>
</template>
<script lang="ts" setup>
import { ref } from "vue";

import { syButton, syScrollBar } 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 { useTableData } from "@/components/Table/hooks";
import { watchDebounced } from "@vueuse/core";
import AlbumList from "./components/Album/AlbumList.vue";
import CreateAlbumDialog from "./components/CreateAlbumDialog/index.vue";
import Empty from "../../../components/Empty/index.vue";
import { watchStrChangeDebounceTime } from "@/config/time";
import { $ajax } from "@/service";
import { URLS } from "@/service/URL";

const searchStr = ref("");
const searchingStr = ref("");
const createAlbumShow = ref(false);
const syScrollBarRef = ref<InstanceType<typeof syScrollBar>>();

const fetchTableData = async ({
  page,
  page_size,
}: {
  page: number;
  page_size: number;
}) => {
  /* 请求所需要的参数 */
  page;
  page_size;
  // 当前状态
  const ret = await $ajax({
    url: URLS.categories,
    type: "get",
    params: {
      page,
      page_size,
      name: searchStr.value,
    },
  });
  return {
    total: ret?.data.total,
    data: ret?.data.results || [],
  };
};

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

function handleRefetch() {
  (syScrollBarRef.value as any).scrollTo(0, 0);
  return __refetch();
}

watchDebounced(
  searchStr,
  () => {
    handleRefetch().then(() => {
      searchingStr.value = searchStr.value;
    });
  },
  { debounce: watchStrChangeDebounceTime }
);

const handleAlbumCreate = () => {
  setTimeout(() => {
    handleRefetch();
  }, 500);
};

const scrollToAlmostEnd = () => {
  console.log("toend");
  fetchNextPage();
};
</script>
<style lang="scss" scoped></style>
