<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="tip flex-grow">草稿将在7日后删除，请尽快完成版权登记</div>
        <div class="flex items-center">
          <syButton
            style="width: 113px"
            mode="elementBtn"
            size="large"
            @click="
              () => {
                $router.push('/copyrightManagement');
              }
            "
            type="default"
          >
            <Icon icon-name="iconbanquan" style="margin-right: 3px"></Icon>
            版权列表</syButton
          >
          <syButton
            style="width: 113px"
            mode="elementBtn"
            size="large"
            @click="copyRightNotifyVisible = true"
            type="primary"
            >添加版权</syButton
          >
        </div>
      </div>
      <div class="flex-grow overflow-hidden" style="padding-top: 60px">
        <DraftBoxTable
          :loading="loading"
          :data="tableData"
          @scrollToEnd="fetchNextPage"
        ></DraftBoxTable>
      </div>
    </div>
    <CopyRightNotify v-model:visible="copyRightNotifyVisible"></CopyRightNotify>
  </LayoutVue>
</template>

<script setup lang="ts">
import LayoutVue from "@/components/Layout.vue";
import Avatar from "@/components/Avatar/index.vue";
import Title from "@/components/Title.vue";
import Search from "@/components/Search/index.vue";
import Icon from "@/components/Icon/index.vue";
import { syButton } from "cqk-sy-ui";
import { ref, watch } from "vue";
import DraftBoxTable from "./draftBoxTable.vue";
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 fetchTableData = ({
  page,
  page_size,
}: {
  page: number;
  page_size: number;
}): Promise<any> => {
  return new Promise<any>((r) => {
    setTimeout(() => {
      r({
        total: 100,
        data: "1"
          .repeat(page_size)
          .split("")
          .map((i, index) => ({
            name: index + (page - 1) * page_size,
            id: searchValue.value,
          })),
      });
    }, 1000);
  });
};

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

const refetchDebounce = debounce(refetch, 500);
watch(searchValue, () => {
  refetchDebounce();
});
</script>

<style scoped lang="scss">
.tip {
  margin-left: 9px;
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #717171;
}
</style>
