<template>
  <Layout class="flex flex-col">
    <div class="flex items-center flex-shrink-0">
      <Search placeholder="搜索" v-model="searchStr"></Search>
      <Avatar class="ml-7"></Avatar>
    </div>
    <div class="flex justify-between flex-shrink-0" style="margin-top: 26px">
      <Title>{{ debouncedSearchStr !== "" ? "搜索结果" : "溯源管理" }}</Title>
      <div class="flex items-center" v-if="debouncedSearchStr === ''">
        <syButton
          style="width: 113px"
          mode="elementBtn"
          size="large"
          type="default"
        >
          模板管理</syButton
        >
        <syButton
          style="width: 113px"
          mode="elementBtn"
          @click="addProofVisible = true"
          size="large"
          type="primary"
        >
          新建</syButton
        >
      </div>
    </div>
    <div v-show="debouncedSearchStr === ''">
      <syMoreOperate
        :teleport="true"
        :list="sortList"
        :width="170"
        @click-item="(v) => handleClickSortList(v)"
      >
        <div style="font-size: 13px; font-weight: 400; color: #717171">
          {{ sortList.find((i) => i.value === sortBy)?.name }}
        </div>
      </syMoreOperate>
    </div>
    <div class="flex-grow overflow-hidden -mr-2">
      <syScrollBar class="syScrollBarInTraceManagement">
        <div class="h-full pr-2">
          <IntroCard
            v-if="debouncedSearchStr === ''"
            style="margin-top: 14px"
            class="flex-shrink-0"
          ></IntroCard>
          <ProofTable
            style="margin-top: 22px"
            ref="proofTableRef"
            :data="tableData"
            :loading="loading"
            @scroll-to-end="fetchNextPage"
          ></ProofTable>
        </div>
      </syScrollBar>
    </div>
    <!-- <syTraceProofRecord
      :showTip="showTip"
      :setDepositCertificate="setDepositCertificate"
      :userInfos_auth_suc="userInfos_auth_suc"
      :navigate="navigate"
      :setListOfInformation="setListOfInformation"
      :setGoodsNum="setGoodsNum"
      :setChainStatus="setChainStatus"
      :theAnchor="theAnchor"
      :setTheAnchor="setTheAnchor"
      :depositCertificate="depositCertificate"
      :page="page"
      :setPage="setPage"
    >
      <template #table="slotProps">
        <IncrementalTable
          @increment="slotProps.incrementOperation"
          @delete-goods="slotProps.deleteGoodsShow"
          @upload="slotProps.upload"
          @delete-incremental="slotProps.deleteTheIncremental"
          @incremental-chain="slotProps.incrementalOnChain"
          @create-copy="slotProps.createCopy"
          @privacy-settings="slotProps.privacySettings"
          @update="slotProps.getList"
        ></IncrementalTable>
      </template>
    </syTraceProofRecord> -->
    <syCommonDialog
      :visible="addProofVisible"
      @closePopup="addProofVisible = false"
      showMask
      type="element"
      :elementDialogProps="{
        title: '添加存证',
      }"
      :btnConfig="{
        type: 'noBorder',
        btns: [{
            name: '取消',
            disabled: false,
            loading: false,
            type: 'default' as const,
          },
          {
              name: '确定',
              disabled: false,
              loading: false,
              type: 'primary' as const,
          }
        ],
        btnFunctions: [
          {
            name: '取消',
            async click() {
              return true;
            },
          },
          {
            name: '确定',
            click: () => {
              return addProofRef.determine();
            },
          },
        ],
      }"
    >
      <AddProof
        v-if="addProofVisible"
        ref="addProofRef"
        @cancel="addProofVisible = false"
        :navigate="navigate"
      >
      </AddProof>
    </syCommonDialog>
  </Layout>
</template>
<script lang="ts" setup>
import {
  syButton,
  syMoreOperate,
  syCommonDialog,
  GO_URLS,
  syScrollBar,
} from "cqk-sy-ui";

import Search from "@/components/Search/index.vue";
import IncrementalTable from "../components/IncrementalTable.vue";
import { showTip } from "@/components/GlobalMount/api";
import {
  setChainStatus,
  setDepositCertificate,
  setGoodsNum,
  setListOfInformation,
  setTheAnchor,
} from "@/store/mutations";
import { router } from "@/router";
import { globalState } from "@/store/state";
import { computed, ref } from "vue";
import Layout from "@/components/Layout.vue";
import Avatar from "@/components/Avatar/index.vue";
import Title from "@/components/Title.vue";
import IntroCard from "@/views/category/tracingManagement/components/IntroCard.vue";
import AddProof from "@/views/category/tracingManagement/components/AddProof.vue";
import ProofTable from "./components/ProofTable/index.vue";
import { useTableData } from "@/components/Table/hooks";
import { $ajax } from "@/service";
import { watchDebounced } from "@vueuse/core";
import { watchStrChangeDebounceTime } from "@/config/time";

const proofTableRef = ref<InstanceType<typeof ProofTable> | null>(null);
const addProofRef = ref<any>();
const addProofVisible = ref(false);
const searchStr = ref("");
const debouncedSearchStr = ref("");
const sortBy = ref("modified");
const sortList = [
  {
    name: "最新修改",
    value: "modified",
    click() {
      sortBy.value = "modified";
    },
  },
  {
    name: "最早创建",
    value: "created",
    click() {
      sortBy.value = "created";
    },
  },
];
const handleClickSortList = (v: string) => {
  sortList.find((i) => i.value === v)?.click();
};

const navigate = router.push;
const userInfos_auth_suc = computed(() => {
  return globalState.userInfos.auth_suc;
});

const theAnchor = computed(() => {
  return globalState.theAnchor;
});

const depositCertificate = computed(() => {
  return globalState.depositCertificate;
});

const page = computed(() => {
  return globalState.page;
});

const setPage = (v: number) => {
  globalState.page = v;
};

watchDebounced(
  searchStr,
  (newV) => {
    proofTableRef.value?.tableRef?.scrollTo(0, 0);
    refetch().then(() => {
      debouncedSearchStr.value = newV;
    });
  },
  { debounce: watchStrChangeDebounceTime }
);

const { tableData, refetch, loading, fetchNextPage } = useTableData({
  fetchData: async (pageConfig: { page: number; page_size: number }) => {
    const res = await $ajax({
      type: "post",
      url: GO_URLS.list,
      params: {
        status: [],
        is_valid: 0,
        page: pageConfig.page,
        key_words: searchStr.value,
        page_size: pageConfig.page_size,
      },
    });
    return {
      total: res?.data.total || 0,
      data: res?.data.results || [],
    };
  },
});
</script>
<style lang="scss">
.syScrollBarInTraceManagement {
  .el-scrollbar__view {
    height: 100%;
  }
}
</style>
