<template>
  <Layout>
    <div class="flex flex-col w-full h-full">
      <div class="flex items-center flex-shrink-0">
        <Search v-model="currentSearchStr" placeholder="搜索"></Search>
        <Avatar class="ml-7"></Avatar>
      </div>
      <div
        class="flex items-center justify-between flex-shrink-0"
        style="margin-top: 26px"
      >
        <Title>回收站</Title>
      </div>
      <div class="flex-grow overflow-hidden relative" v-loading="loading">
        <RecycleBinTable
          v-show="!(tableData.length === 0)"
          ref="RecycleBinTableRef"
          :data="tableData"
          @scroll-to-end="fetchNextPage"
          @update="refetch"
        ></RecycleBinTable>
        <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>
    </div>
  </Layout>
</template>
<script lang="ts" setup>
import { ref } from "vue";

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

import { useTableData } from "@/components/Table/hooks";
import { watchDebounced } from "@vueuse/core";
import { $ajax } from "@/service";
import { watchStrChangeDebounceTime } from "@/config/time";
import Empty from "@/components/Empty/index.vue";

const currentSearchStr = ref("");
const searchingStr = ref("");
const RecycleBinTableRef = ref<InstanceType<typeof RecycleBinTable>>();

const { fetchNextPage, tableData, loading, refetch } = useTableData({
  fetchData: async ({ page, page_size }) => {
    const res = await $ajax({
      type: "post",
      url: GO_URLS.list,
      params: {
        page: page,
        key_words: currentSearchStr.value,
        page_size: page_size,
        is_valid: 1,
      },
    });

    return {
      total: res?.data.total || 0,
      data: res?.data.results || [],
    };
  },
});

const handleRefetch = async () => {
  searchingStr.value = currentSearchStr.value;
  RecycleBinTableRef.value?.tableRef?.scrollTo(0, 0);
  refetch();
};

watchDebounced(
  currentSearchStr,
  () => {
    handleRefetch();
  },
  {
    debounce: watchStrChangeDebounceTime,
  }
);
</script>
<style lang="scss"></style>
