<template>
  <div class="flex h-full">
    <div
      style="
        width: 220px;
        background: #fff;
        padding-right: 17px;
        box-sizing: border-box;
      "
      class="h-full flex-shrink-0"
    >
      <syBusinessMenu v-bind="menuState" :numList="numList"></syBusinessMenu>
    </div>
    <div class="h-full rightBox flex-grow relative overflow-scroll">
      <div class="px-4" v-show="menuState.current === 0">
        <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"
          @update="handleProofDeleted"
        >
          <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>
      </div>
      <syTraceTemplateManage
        v-show="menuState.current === 1"
        :navigate="navigate"
        :showTip="showTip"
        :setTemplateNum="setTemplateNum"
        :TemplateType="globalState.templateType"
        :setTemplateType="(v: number) => (globalState.templateType = v)"
        :templateData="globalState.templateData"
        :setTemplateData="
          (v: any) => {
            globalState.templateData = v;
          }
        "
      ></syTraceTemplateManage>
      <Deleted v-show="menuState.current === 2" :ToUpdate="toUpdate" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { router } from "@/router";
import {
  setChainStatus,
  setDepositCertificate,
  setGoodsNum,
  setListOfInformation,
  setTheAnchor,
} from "@/store/mutations";
import IncrementalTable from "./components/IncrementalTable.vue";
import { globalState } from "@/store/state";
import {
  syBusinessMenu,
  syTraceProofRecord,
  syTraceTemplateManage,
} from "cqk-sy-ui";
import { computed, reactive, ref } from "vue";
import Deleted from "./components/Deleted.vue";
import { showTip } from "@/components/GlobalMount/api";

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

const toUpdate = ref(0);

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

const menuState = reactive({
  current: globalState.selectedStatus,
  setCurrent: (v: number) => {
    menuState.current = v;
    globalState.selectedStatus = v;
  },
});

const numList = computed(() => {
  return [
    globalState.goodsNum,
    globalState.templateNum,
    globalState.deletedNum,
  ];
});

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

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

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

const handleProofDeleted = () => {
  toUpdate.value = Math.random();
};
</script>
<style scoped>
.rightBox {
  background-color: var(--bg-gray);
}
</style>
