<template>
  <div class="main !h-screen">
    <div class="!h-full">
      <Menu></Menu>
    </div>
    <div class="col_right bHeader">
      <syBusinessHeader
        v-if="$route.name === 'editTemplate'"
        :handle-logout="handleLogout"
        style="box-shadow: 0px 2px 40px 0px rgb(65 70 76 / 7%); z-index: 1"
        :logo-url="logo"
        :invisible="true"
      ></syBusinessHeader>
      <div class="main_wrapper">
        <router-view />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import Menu from "@/components/Menu/index.vue";
import { router } from "@/router";
import { $ajax } from "@/service";
import { setuserInfos } from "@/store/mutations";
import { globalState } from "@/store/state";
import { sySideBar, syBusinessHeader, GO_URLS } from "cqk-sy-ui";
import { onMounted, reactive } from "vue";
import { useRoute } from "vue-router";

const logo = import.meta.env.VITE_loginIconSrc as string;
const route = useRoute();

const sideBarState = reactive({
  menuList: [
    {
      name: "存证",
      icon: "&#xe62b;",
      path: "/categoryManage",
      pathAlsoSelect: [],
      fontSize: "14px",
      navigate: () => {
        router.push("/categoryManage");
      },
    },
    {
      name: "资产",
      // fontClass: "icon-a-pass-activec9b87262",
      slotName: "passList",
      path: "/passList",
      pathAlsoSelect: ["/transferRecord"],
      navigate: () => {
        router.push("/passList");
      },
    },
    {
      name: "溯源",
      icon: "&#xe629;",
      fontSize: "15px",
      path: "",
      navigate: () => {
        window.open(globalState.urlList.chain_browser_url);
      },
    },
    {
      name: "管理",
      icon: "&#xe62a;",
      fontSize: "16px",
      pathAlsoSelect: [
        "/choosePackage",
        "/initPassword",
        "/companyVerify",
        "/editPassword",
        "/editPhone",
        "/personVerify",
        "/editTemplate",
      ],
      path: "/userCenter",
      navigate: () => {
        router.push("/userCenter");
      },
    },
  ],
  current: 0,
  sideBarWidth: 62,
  backgroundColor: "#27272a",
  selectedLeftBorderWidth: 3,
  selectedMenuBgColor: "#39393e",
  selectedIconColor: "rgba(255, 255, 255, 0.6)",
  selectCurrent: (v: number) => {
    sideBarState.menuList[v].navigate();
    if (sideBarState.menuList[v].name !== "溯源") {
      sideBarState.current = v;
    }
  },
});

const menuIndex = sideBarState.menuList.findIndex(
  (i) => i?.path === route.path || i?.pathAlsoSelect?.includes(route.path)
);
sideBarState.current = menuIndex;

const handleLogout = () => {
  sessionStorage.removeItem("user");
  router.push("/");
};

onMounted(() => {
  getUserInfos();
});

const getUserInfos = async () => {
  const res = await $ajax({
    type: "get",
    url:
      GO_URLS.user +
      `/` +
      JSON.parse(String(sessionStorage.getItem("user"))).id,
  });
  if (res) {
    setuserInfos(res.data);
  }
};
</script>

<style scoped>
.main {
  display: flex;
  height: 100%;
}

.col_left {
  flex-shrink: 0;
}

.col_right {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.main_wrapper {
  flex: 1;
  min-height: 0;
  background-color: #f8f8f8;
  height: 100%;
}
</style>
