<template>
  <div>
    <div class="header header-top">
      <div class="header-logo">
        <router-link to="/">
          <img src="../../assets/img/home/header-logo.png" alt=""
        /></router-link>
      </div>
      <div class="nav">
        <a
          class="nav-item duration-200"
          v-for="(nav, i) in navList"
          :class="i == activeIndex ? 'active-nav-item' : ''"
          :key="i"
          @click="handNavCurent(nav)"
        >
          <span> {{ nav.name }}</span>
          <div class="dropdown" v-show="showNavMenu">
            <ul>
              <li v-for="(item, index) in nav.submenu" :key="index">
                <div  class="link-content" v-if="i !== 2">
                  <div>
                    <a class="link-name" :href="item.link">{{ item.label }}</a>
                  </div>
                  <div>
                    <img
                      class="link-img"
                      src="../../assets/img/home/link-icon.png"
                      alt=""
                    />
                  </div>
                </div>
                <div v-else class="link-label">{{ item.label }}</div>
              </li>
            </ul>
          </div>
        </a>
        <div class="header-right">
          <div
            v-if="!chain.logined"
            class="login-btn login-btn-active"
            @click="login"
          >
            LOGIN
          </div>
          <div v-else class="avatar" @click="showMenu = !showMenu">
            <img
              class="avatar-img"
              src="../../assets/img/home/avatar.png"
              alt="用户头像"
            />
            <!-- 下拉菜单 -->
            <div class="menu" v-show="showMenu">
              <div class="menu-item-top">
                <div class="title">{{ formatAddress }}</div>
                <div @click="copyToClipboard">
                  <img src="../../assets/img/home/copy.png" alt="" />
                </div>
              </div>
              <div class="menu-item" @click="logout">Logout</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ChainModel></ChainModel>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watchEffect } from "vue";
import { useChainStore } from "@/store/chain";
import { useAppStore } from "@/store/app";

import { useRouter, useRoute } from "vue-router";
import ChainModel from "../../components/home/ChainModel.vue";
import { useCopyToClipboard } from "./../../hooks/useCopyToClipboard";

const AppModule = useAppStore();
const router = useRouter();
const route = useRoute();
const chain = useChainStore();
const app = useAppStore();

function click(event) {
  router.push(event.key);
}
const { copied, copyToClipboard } = useCopyToClipboard(AppModule.accountId);
const message = copied.value
  ? "Text copied!"
  : "Click the button to copy text.";
const formatAddress = computed(() => {
  const accountId = AppModule.accountId;
  if (!accountId) return "-";
  if (accountId.length >= 10) {
    return `${accountId.substring(0, 6)}......${accountId.slice(-4)}`;
  }
  return accountId;
});
async function login(event) {
  if (!chain.logined) {
    // 没有登录情况下执行登录
    await chain.chainManager.login();
    console.log("logined:", chain.chainManager.isLogined);
    chain.logined = chain.chainManager.isLogined;
  }
}
const logout = async () => {
  await chain.chainManager.logout();
  console.log("logined:", chain.chainManager.isLogined);
  chain.logined = chain.chainManager.isLogined;
};
const avatarUrl = ref("https://example.com/avatar.jpg");
const showMenu = ref(false);
const showNavMenu = ref(false);
const activeIndex = ref(0);
const navList = reactive([
  { id: 0, name: "HOME", path: "/" },
  { id: 1, name: "ABOUT", path: "/about" },
  {
    id: 2,
    name: "MARKETPLACE",
    path: "/marketpalce",
    submenu: [{ label: "Coming soon", link: "/products/1" }],
  },
  {
    id: 3,
    name: "COMMUNITY",
    path: "/contact",
    submenu: [
      { label: "Twitter", link: "https://twitter.com/CEBG_GAME" },
      {
        label: "Youtube",
        link: "https://youtube.com/c/CryptoElitesBattlegrounds",
      },
      {
        label: "Facebook",
        link: "https://www.facebook.com/profile.php?id=100090965821157&mibextid=LQQJ4d",
      },
      { label: "Medium", link: "https://medium.com/@CEBG-BATTLEGROUNDS" },
      { label: "Telegram", link: "https://t.me/CEBG_Rally" },
    ],
  },
]);

function handNavCurent(nav) {
  activeIndex.value = nav.id;
  if (nav.id > 1) {
    showNavMenu.value = true;
  } else {
    router.push(nav.path);
  }
}
watchEffect(() => {
  const index = navList.findIndex((navItem) => navItem.path === route.path);
  activeIndex.value = index !== -1 ? index : 0;
});
</script>

<style lang="scss" scoped>
.header {
  position: fixed;
  z-index: 19;
  top: 0;
  left: 0;
  background-color: rgb(255, 255, 255);
  width: 100%;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
  .header-logo {
    margin-left: 29px;
    width: 64px;
    height: 63px;
  }
  .nav {
    padding-left: 83px;
    display: flex;
    justify-content: space-between;
    width: 830px;
    a {
      padding-top: 20px;
      padding-bottom: 20px;
    }
    .nav-item {
      font-size: 16px;
      position: relative;
      font-weight: 800;
      transition-property: color;
      transition-duration: 0.15s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      font-family: "Big John";

      color: #cccccc;
      .dropdown {
        position: absolute;
        top: 100%;
        left: -4px;
        background: rgba(0, 0, 0, 0.84);
        border-radius: 0px 0px 12px 12px;
        z-index: 1;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease-out;
      }
      .dropdown ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .dropdown li {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
        cursor: pointer;
      }
      .link-content{
        display: flex;
        width: 90px;
        align-items: center;
        justify-content: space-between;

      }
      .link-label{
        font-size: 15px;
        font-family: Arial;
        font-weight: 400;
        color: #ffffff;
      }
      .dropdown li a {
        font-size: 16px;
        font-family: Arial;
        font-weight: 400;
        color: #ffffff;
      }
      .dropdown li span {
        font-size: 15px;
        font-family: Arial;
        font-weight: 400;
        color: #ffffff;
      }
    }
    .duration-200 {
      transition-duration: 0.2s;
    }
    .nav-item:hover {
      transition-property: color;
      transition-duration: 0.15s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      font-family: "Big John";
      color: rgba(215, 68, 88, 1);
    }
    .nav-item:hover .dropdown {
      opacity: 1;
      visibility: visible;
    }
    .nav-item::after {
      content: "";
      height: 7px;
      overflow: hidden;
      display: block;
      left: 0;
      bottom: 0;
      position: absolute;
      width: 100%;
      // background: #1fc8ff;
      background: url("@/assets/img/home/nav-boder.png") no-repeat;
      background-size: 100% 100%;
      transform: scaleX(0);

      transition: all 0.3s;
    }
    .nav-item:hover::after {
      transform: scaleX(1);
    }

    .active-nav-item {
      font-size: 16px;
      font-family: "Big John";
      position: relative;
      font-weight: 800;
      transition-property: color;
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      color: rgba(215, 68, 88, 1);
    }

    .active-nav-item::after {
      content: "";
      height: 8px;
      overflow: hidden;
      display: block;
      left: -7%;
      bottom: 0;
      position: absolute;
      width: 120%;
      // background: #1fc8ff;
      background: url("@/assets/img/home/nav-boder.png") no-repeat;
      background-size: 100% 100%;
      transform: scaleX(0);
      transition: all 0.3s;
    }
    .active-nav-item::after {
      transform: scaleX(1);
    }
  }
}

.header-right {
  width: 228px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 0;
  .menu {
    position: absolute;
    top: 111%;
    right: -35px;
    width: 180px;
    z-index: 1;
    padding: 10px 0;
    background-color: #000000;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    list-style: none;
    transition: all 0.3s ease-out;
  }
  li {
    margin: 5px 0;
  }
  .menu-item-top {
    padding: 10px 15px;
    color: #f5f5f5;
    display: flex;
    align-items: center;
    position: relative;
    padding-bottom: 15px;
    .title {
      margin-right: 20px;
    }
  }
  .menu-item-top:before {
    position: absolute;
    top: 100%;
    left: 15px;
    content: "";
    width: 140px;
    height: 1px;
    background: #676767;
  }
  .menu-item {
    padding: 5px 15px;
    color: #f5f5f5;
    display: flex;
    padding-top: 10px;
    align-items: center;
    .title {
      margin-right: 10px;
    }
  }
  a:hover {
    background-color: #f5f5f5;
  }
}
.login-btn {
  position: relative;
  width: 228px;
  height: 72px;
  font-size: 26px;
  line-height: 72px;
  font-size: 22px;
  font-family: "Big John";
  color: #122326;
  text-align: center;
  cursor: pointer;
  background: url("@/assets/svg/login-active.svg") no-repeat;
  background-size: 100% 100%;
  z-index: 0;
  transition: background-image 1s;
  // transition:background-image 1s linear;
  // transform: scaleX(1);
  // transition: all 0.15s;
  // transition-property: background;
  // transition-duration: 0.15s;
  // transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.login-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 1;
  // transition: 0.5s;
  background: url("@/assets/svg/login.svg") no-repeat;
  background-size: 100% 100%;
  transform: scaleX(1, 1);
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  transition: all 0.3s ease-in-out;
  z-index: -1;
  // transition:background-image 1s linear;
  // transform: scaleX(0.98);
}
.login-btn:hover:after {
  opacity: 1;
  clip-path: polygon(
    calc(50% + 0px) calc(50% + 150px),
    calc(50% + 150px) calc(50% + 0px),
    calc(50% + 0px) calc(50% - 150px),
    calc(50% - 150px) calc(50% - 0px)
  );

  transition: all 0.3s ease-in-out;
  transform: scaleX(1, 1);
}
.login-btn:active:after {
  opacity: 1;
  transform: scaleX(1);
}
.avatar {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.avatar-img {
  width: 54px;
  height: 54px;
  margin-top: 5px;
  margin-right: 30px;
  border: 2px solid rgba(215, 68, 88, 1);
  border-radius: 50%;
}
.link-name {
  position: relative;
  .link-img {
    position: absolute;
    top: 24px;
    right: -18px;
  }
}
</style>
