<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: '藏品管理',
              routerName: 'collectionManagement',
            },
            {
              name: '专辑管理',
              routerName: 'albumManagement',
            },
            {
              name: $route.query.name as string,
            },
          ]"
        ></Title>
        <div class="flex items-center">
          <syButton
            style="width: 113px"
            mode="elementBtn"
            size="large"
            @click="handleClickDownloadTemplate"
          >
            <Icon icon-name="icona-bianzu52" style="margin-right: 3px"></Icon>
            导出专辑</syButton
          >
          <syButton
            style="width: 113px"
            mode="elementBtn"
            size="large"
            @click="uploadRemarkDialogVisible = true"
          >
            <Icon icon-name="icona-bianzu43" style="margin-right: 3px"></Icon
            >更新备注</syButton
          >
          <syButton
            style="width: 113px"
            mode="elementBtn"
            size="large"
            type="primary"
            @click="uploadFileDialogVisible = true"
          >
            增加藏品</syButton
          >
        </div>
      </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"
        >
          没有找到匹配结果，尝试其他关键词搜索
        </Empty>
        <AlbumTable
          v-show="!(tableData.length === 0 && loading === false)"
          ref="albumTableRef"
          :data="tableData"
          :loading="loading"
          @delete-album="handleDeleteAlbum"
          @scroll-to-end="fetchNextPage"
        ></AlbumTable>
      </div>
    </div>
    <UploadRemarkDialog
      @uploaded="handleRefetch"
      v-model:visible="uploadRemarkDialogVisible"
    ></UploadRemarkDialog>
    <UploadFileDialog
      @uploaded="handleRefetch"
      v-model:visible="uploadFileDialogVisible"
    ></UploadFileDialog>
  </LayoutVue>
</template>
<script lang="ts" setup>
import { ref } from "vue";

import { syButton } 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 Empty from "@/components/Empty/index.vue";
import Icon from "@/components/Icon/index.vue";
import UploadFileDialog from "./components/UploadFileDialog/index.vue";
import UploadRemarkDialog from "./components/UploadRemarkDialog/index.vue";
import AlbumTable from "./components/AlbumTable/index.vue";

import { watchDebounced } from "@vueuse/core";
import { useTableData } from "@/components/Table/hooks";
import { watchStrChangeDebounceTime } from "@/config/time";
import { showTip } from "@/components/GlobalMount/api";
import { $ajax } from "@/service";
import { URLS } from "@/service/URL";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { downloadExcelTemplate } from "@/service/Download";

const searchStr = ref("");
const uploadFileDialogVisible = ref(false);
const uploadRemarkDialogVisible = ref(false);
const albumTableRef = ref<InstanceType<typeof AlbumTable> | null>(null);
const route = useRoute();

const handleDeleteAlbum = (args: any) => {
  showTip(
    `确定要删除${args.name}吗？删除后无法找回，请谨慎操作。`,
    async () => {
      await $ajax({
        url: URLS.files,
        type: "delete",
        params: {
          ids: [args.id],
        },
      });
      ElMessage.success("删除成功");
      handleRefetch();
    },
    () => {},
    args.name
  );
};

function handleClickDownloadTemplate() {
  downloadExcelTemplate(Number(route.query.id));
}

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

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

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

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