<template>
  <syMoreOperate
    teleport
    :list="operateList.filter((i) => i.hide === false)"
    :margin-left="-50"
    @click-item="handleClickItem"
  >
    <div
      class="avatar flex-shrink-0 flex justify-center items-center text-white cursor-pointer"
    >
      {{
        (globalState.userInfos.user &&
          globalState.userInfos.user.slice(0, 1)) ||
        "&nbsp"
      }}
    </div>
  </syMoreOperate>
</template>
<script lang="ts" setup>
import { syMoreOperate } from "cqk-sy-ui";

import { globalState } from "@/store/state";
import { router } from "@/router";

const simpleMenu = import.meta.env.VITE_simpleAvatarClickMenu === "1";

const operateList = [
  {
    name: "我的个人主页",
    value: Symbol(),
    click() {
      router.push("/userCenter");
    },
    hide: false,
  },
  {
    name: "存证溯源官网",
    value: Symbol(),
    click() {
      router.push("/");
    },
    insertLineAfter: true,
    hide: simpleMenu,
  },
  {
    name: "切换企业版",
    value: Symbol(),
    click() {
      location.href = "https://slc.8n.cn/";
    },
    hide: simpleMenu,
  },
  {
    name: "退出登录",
    value: Symbol(),
    click() {
      sessionStorage.removeItem("user");
      router.push("/");
    },
    hide: false,
  },
];

const handleClickItem = (v: any) => {
  operateList
    .filter((i) => i.hide === false)
    .find((i) => i.value === v)
    ?.click();
};

globalState;
</script>

<style lang="scss" scoped>
.avatar {
  width: 35px;
  height: 35px;
  background: var(--sy-blue);
  border-radius: 100%;
}
</style>
