<template>
  <div class="box flex justify-between items-center md:py-1 h-[50px]" ref="menuH">
    <div class="md:hidden flex items-center">
      <div class="logo ml-8 mr-20 flex items-center" @click="toHome">
        <img class="rounded-full" src="@/assets/柚子娘.jpg" width="40" alt="">
        <img src="@/assets/youzi_title.png" width="200" height="50" alt="">
      </div>
      <n-menu v-model:value="activeKey" :options="menuInfo.options" mode="horizontal" />
    </div>
    <n-icon size="30" class="menuIcon ml-2 hidden md:block text-pp-500" @click="active = true">
      <MdMenu />
    </n-icon>

    <div class="right flex items-center">
      <div class="wea text-white md:hidden">
        <wea />
      </div>
      <div v-if="!userinfo" class="login mx-8">
        <n-button color="#8a2be2" size="small" @click="goLogin">登录</n-button>
      </div>
      <div v-else class="uinfo flex items-center">
        <n-dropdown :options="userOp" @select="handleSelect" :show-arrow="true">
          <div class="uinfo mx-8 text-white flex items-center">
            <n-avatar round size="small" :src="userinfo.avaUrl" />
            <div class="ml-2"></div>
            <n-button text class="userinfo">
              {{ userinfo.nickname }}
            </n-button>
          </div>
        </n-dropdown>
      </div>
    </div>
  </div>

  <n-drawer v-model:show="active" width="40%" :auto-focus="false" placement="left" show-mask="transparent">
    <n-drawer-content>
      <template #header>
        <div class="flex items-center" :style="{ height: menuH.clientHeight + 'px' }">
          <n-icon size="24" class="orange mx-2">
            <orange />
          </n-icon>
          菜单
        </div>
      </template>
      <n-menu v-model:value="activeKey" mode="vertical" :options="menuInfo.options.slice(1)"
        @click="active = false"></n-menu>
    </n-drawer-content>
  </n-drawer>
</template>

<script setup>
import wea from "@/components/wea.vue";
import orange from "@/icon/orange.svg";
import { usesizeStore } from "@/stores/size.js";
import { renderIcon } from "@/util/h.js";
import menuInfo from "@/util/menu.js";
import { IosLogOut, IosSettings, MdHome, MdMenu } from "@vicons/ionicons4";
import cookie from "vue-cookies";
import { useRoute, useRouter } from "vue-router";

let activeKey = ref("1");
const active = ref(false);
const menuH = ref(null);
const sizeStore = usesizeStore();
let { setMenuH } = sizeStore

const route = useRoute()

const { path, fullPath } = route;

const router = useRouter()
const { push } = router;




let userinfo = ref(cookie.get("userinfo"));
let userOp = [
  {
    label: "控制台",
    key: "profile",
    icon: renderIcon(MdHome),
  },
  {
    label: "退出登录",
    key: "logout",
    icon: renderIcon(IosLogOut),
  },
  {
    label: "设置",
    key: "2",
    icon: renderIcon(IosSettings),
  },
];

menuInfo.menuList.forEach((i, idx) => {
  if (path == i) {
    activeKey.value = idx + 1 + "";
  }
});
const homeItem = ref(null)
onMounted(() => {
  // console.log(5555, setMenu);
  setMenuH(menuH.value.clientHeight);
});

function goLogin() {
  push("/login");
}
function toHome() {
  push("/home");
  const i = document.querySelector(".n-menu-item .n-menu-item-content-header");
  i.click();
  
}
function handleSelect(k) {
  switch (k) {
    case "logout":
      logout();
      break;
    case "profile":
      goConsole();
      break;
  }
}
function logout() {
  cookie.remove("token");
  cookie.remove("userinfo");
  userinfo.value = "";
  // log.setLoginStatus(false);
  $dialog.success({
    title: "登出",
    content: "已退出登录，是否重新登录？",
    positiveText: "登录",
    negativeText: "回首页",
    onPositiveClick: () => {
      push({
        path: "/login",
        query: {
          redirect: fullPath,
        },
      });
    },
    onNegativeClick: () => {
      push("/");
    },
  });
}
function goConsole() {
  if (document.documentElement.clientWidth < 1000) {
    push("/m");
    return
  }
  push("/console");
}
</script>

<style scoped lang="less">
.login {
  :deep(.n-button) {
    background-color: @purple;
    width: 80px;
  }
}

:deep(.orange) {
  color: #ffa500;
  font-size: 24px;
}

:deep(.menu-item) {
  color: @orange !important;
}

:deep(.router-link-active) {
  color: @purple !important;
}

:deep(.n-drawer-header),
:deep(.n-drawer-body-content-wrapper) {
  padding: 0 !important;
}

:deep(.n-menu-item-content--disabled) {
  opacity: unset !important;
}

@media screen and (min-width: 1023px) {
  :deep(.n-menu-item-content--selected::after) {
    content: "";
    display: inline-block;
    height: 3px;
    width: 70%;
    background-color: @purple;
    position: absolute;
    left: 15%;
    bottom: 1px;
  }
}
</style>
