<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: 113px"
            mode="elementBtn"
            size="large"
            @click="
              () => {
                $router.push('/draftBox');
              }
            "
            type="default"
          >
            <Icon icon-name="iconcaogao" style="margin-right: 3px"></Icon>
            草稿箱</syButton
          >
          <syButton
            style="width: 113px"
            mode="elementBtn"
            size="large"
            @click="copyRightNotifyVisible = true"
            type="primary"
            >添加版权</syButton
          >
        </div>
      </div>
      <syMenu v-model="activedMenu" :menu-list="menuList"></syMenu>
      <div class="flex-grow overflow-hidden">
        <CopyrightTable
          v-show="activedMenu === eTableTab.going"
          :data="tableDataForGoing"
          :loading="loadingForGoing"
          :show-state-filter-icon="true"
          height="100%"
          @scrollToEnd="fetchNextPageForGoing"
        >
        </CopyrightTable>
        <CopyrightTable
          v-show="activedMenu === eTableTab.end"
          :data="tableDataForEnd"
          :loading="loadingForEnd"
          height="100%"
          @scrollToEnd="fetchNextPageForEnd"
        >
        </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, syMenu } from "cqk-sy-ui";
import Icon from "@/components/Icon/index.vue";
import ApprovedStatus from "@/components/ApproveStatus/index.vue";
import { eStatus } from "@/components/ApproveStatus/status";
import HoverMe from "@/components/HoverMe/index.vue";
import CopyrightTable from "./CopyrightTable.vue";
import { eTableTab } from "./types";
import { useTableData } from "@/components/Table/hooks";
import { debounce, throttle } from "lodash";
import CopyRightNotify from "@/components/Dialogs/CopyRightNotify/index.vue";

const copyRightNotifyVisible = ref(false);
const searchValue = ref("");
const menuList = [
  {
    value: eTableTab.going,
    label: "进行中",
  },
  {
    value: eTableTab.end,
    label: "已完成",
  },
];
const activedMenu = ref(eTableTab.going);
const currentStatusForGoing = ref(eStatus.all); // 进行中的表格的状态

const fetchTableData = ({
  page,
  page_size,
  currentStatus,
}: {
  page: number;
  page_size: number;
  currentStatus: eStatus;
}) => {
  /* 请求所需要的参数 */
  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: eStatus.rejected,
            address: searchValue.value,
          })),
      });
    }, 1000);
  });
};

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

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

const {
  fetchNextPage: fetchNextPageForEnd,
  tableData: tableDataForEnd,
  loading: loadingForEnd,
  refetch: refetchForEnd,
} = useTableData({
  fetchData: generateFetchTableData(() => eStatus.approved),
});

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

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