<template>
  <LayoutVue>
    <div class="flex flex-col w-full h-full">
      <div class="flex items-center flex-shrink-0">
        <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="[
            { name: '版权管理', routerName: 'copyrightManagement' },
            {
              name: '草稿箱',
            },
          ]"
        ></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 mt-4">
        <DraftBoxTable
          ref="DraftBoxTableRef"
          :loading="loading"
          :data="tableData"
          @scrollToEnd="fetchNextPage"
          @refresh="handleRefresh"
        ></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 { 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";
import { getCopyRights } from "@/service/copyrightService";
import { eStatusOfCopyright } from "@/components/ApproveStatus/status";

const DraftBoxTableRef = ref<InstanceType<typeof DraftBoxTable>>();
const copyRightNotifyVisible = ref(false);
const searchValue = ref("");
const fetchTableData = async ({
  page,
  page_size,
}: {
  page: number;
  page_size: number;
}) => {
  const res = await getCopyRights({
    record_no: "",
    record_work_name: searchValue.value,
    record_work_status: [eStatusOfCopyright.WAITING_SUBMIT],
    page,
    page_size,
  });

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

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

function handleRefresh() {
  DraftBoxTableRef.value?.tableRef?.scrollTo(0, 0);
  refetch();
}

const refetchDebounce = debounce(handleRefresh, 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>
