<template>
  <LayoutVue>
    <div class="flex flex-col w-full h-full">
      <div class="flex items-center">
        <Search v-model="searchValue" 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 class="flex items-center">
          <syButton
            style="width: 128px"
            mode="elementBtn"
            size="large"
            @click="
              () => {
                $router.push('/filingPersonManagement');
              }
            "
            type="default"
          >
            <img
              src="@/assets/img/filingPersonManage.png"
              style="margin-right: 3px"
              class="h-5"
            />
            备案人管理</syButton
          >
          <syButton
            style="width: 113px"
            mode="elementBtn"
            size="large"
            @click="
              () => {
                $router.push('/draftBox');
              }
            "
            type="default"
          >
            <img
              src="@/assets/img/draftBox.png"
              style="margin-right: 3px"
              class="h-5"
            />
            草稿箱</syButton
          >
          <syButton
            style="width: 113px"
            mode="elementBtn"
            size="large"
            @click="
              $router.push({
                name: 'addCopyRight',
              })
            "
            type="primary"
            >添加版权</syButton
          >
        </div>
      </div>
      <div class="flex-grow overflow-hidden mt-4">
        <CopyrightTable
          v-show="activedMenu === eTableTab.going"
          :data="tableData"
          :loading="loading"
          :show-state-filter-icon="true"
          height="100%"
          @scrollToEnd="fetchNextPage"
          @clickStatusFilter="handleClickStatusFilter"
        >
        </CopyrightTable>
      </div>
    </div>
    <CopyRightNotify v-model:visible="copyRightNotifyVisible"></CopyRightNotify>
  </LayoutVue>
</template>
<script lang="ts" setup>
import LayoutVue from "@/components/Layout.vue";
import { ref, watch } from "vue";
import Search from "@/components/Search/index.vue";
import Avatar from "@/components/Avatar/index.vue";
import Title from "@/components/Title.vue";
import { syButton } from "cqk-sy-ui";
import Icon from "@/components/Icon/index.vue";
import { eStatusOfCopyright } from "@/components/ApproveStatus/status";
import CopyrightTable from "./CopyrightTable.vue";
import { eTableTab } from "./types";
import { useTableData } from "@/components/Table/hooks";
import { debounce } from "lodash";
import CopyRightNotify from "@/components/Dialogs/CopyRightNotify/index.vue";

const copyRightNotifyVisible = ref(false);
const searchValue = ref("");

const activedMenu = ref(eTableTab.going);
const currentStatusForGoing = ref(eStatusOfCopyright.ALL); // 进行中的表格的状态

const fetchTableData = ({
  page,
  page_size,
  currentStatus,
}: {
  page: number;
  page_size: number;
  currentStatus: eStatusOfCopyright;
}) => {
  /* 请求所需要的参数 */
  page;
  page_size;
  // 当前状态
  currentStatus;
  return new Promise<any>((r) => {
    setTimeout(() => {
      r({
        total: 100,
        data: "1"
          .repeat(page_size)
          .split("")
          .map((i, index) => ({
            name: index + (page - 1) * page_size + currentStatus,
            status:
              currentStatus === eStatusOfCopyright.ALL
                ? eStatusOfCopyright.RECORD_SUCCESS
                : currentStatus,
            address: searchValue.value,
          })),
      });
    }, 1000);
  });
};

const generateFetchTableData = (getCurrentStatus: () => eStatusOfCopyright) => {
  return ({ page, page_size }: { page: number; page_size: number }) => {
    return fetchTableData({
      page,
      page_size,
      currentStatus: getCurrentStatus(),
    });
  };
};

const {
  fetchNextPage: fetchNextPage,
  tableData: tableData,
  refetch: refetch,
  loading: loading,
} = useTableData({
  fetchData: generateFetchTableData(() => currentStatusForGoing.value),
});

const refetchDebounce = debounce(() => {
  refetch();
}, 500);

const handleClickStatusFilter = (status: eStatusOfCopyright) => {
  currentStatusForGoing.value = status;
  refetch();
};

watch(searchValue, () => {
  refetchDebounce();
});
</script>
<style lang="scss" scoped></style>
