<template>
  <header
    class="fixed w-full top-0 z-100 bg-white border-b border-[#f0f2f5] shadow-sm"
  >
    <div
      class="w-full mx-auto flex items-center justify-between px-10 pr-0 h-18"
    >
      <div class="flex items-center gap-2 cursor-pointer" @click="goHome">
        <img :src="logo" alt="logo" class="w-20 h-9" />
        <span class="text-[#02409b] text-[20px] font-bold border-l-2 pl-1"
          >DeepOil</span
        >
      </div>

      <nav class="hidden lg:flex flex-1 mx-4 ml-10 text-sm">
        <ul class="flex items-center gap-6 text-[#303133]">
          <li><a class="hover:text-[#409EFF] cursor-pointer">产品</a></li>
          <li><a class="hover:text-[#409EFF] cursor-pointer">解决方案</a></li>
          <li><a class="hover:text-[#409EFF] cursor-pointer">典型案例</a></li>
          <li><a class="hover:text-[#409EFF] cursor-pointer">平台服务</a></li>
          <li><a class="hover:text-[#409EFF] cursor-pointer">应用市场</a></li>
          <li><a class="hover:text-[#409EFF] cursor-pointer">开源社区</a></li>
        </ul>
      </nav>

      <div class="hidden lg:flex items-center gap-3 h-full">
        <div class="flex items-center gap-2 cursor-pointer">
          <Icon icon="mdi:server" class="w-4 h-4" />
          <span class="text-sm">控制台</span>
        </div>

        <template v-if="isLoggedIn">
          <el-dropdown @command="onUserCommand" trigger="click">
            <span class="flex items-center gap-2 cursor-pointer pr-2">
              <div class="avatar-wrapper">
                <img
                  :src="userAvatar || person"
                  alt="avatar"
                  class="w-8 h-8 rounded-full avatar-image"
                />
              </div>
              <span class="text-sm text-[#303133]">{{ userName }}</span>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="18"
                    height="18"
                    viewBox="0 0 16 16"
                  >
                    <g fill="none">
                      <path
                        fill="url(#SVG3BqCJdyi)"
                        d="M11.5 8A1.5 1.5 0 0 1 13 9.5v.5c0 1.971-1.86 4-5 4s-5-2.029-5-4v-.5A1.5 1.5 0 0 1 4.5 8z"
                      />
                      <path
                        fill="url(#SVGfKhxtenh)"
                        d="M11.5 8A1.5 1.5 0 0 1 13 9.5v.5c0 1.971-1.86 4-5 4s-5-2.029-5-4v-.5A1.5 1.5 0 0 1 4.5 8z"
                      />
                      <path
                        fill="url(#SVGJYCMTblH)"
                        d="M8 1.5A2.75 2.75 0 1 1 8 7a2.75 2.75 0 0 1 0-5.5"
                      />
                      <defs>
                        <linearGradient
                          id="SVG3BqCJdyi"
                          x1="5.378"
                          x2="7.616"
                          y1="8.798"
                          y2="14.754"
                          gradientUnits="userSpaceOnUse"
                        >
                          <stop offset=".125" stop-color="#9c6cfe" />
                          <stop offset="1" stop-color="#7a41dc" />
                        </linearGradient>
                        <linearGradient
                          id="SVGfKhxtenh"
                          x1="8"
                          x2="11.164"
                          y1="7.286"
                          y2="17.139"
                          gradientUnits="userSpaceOnUse"
                        >
                          <stop stop-color="#885edb" stop-opacity="0" />
                          <stop offset="1" stop-color="#e362f8" />
                        </linearGradient>
                        <linearGradient
                          id="SVGJYCMTblH"
                          x1="6.558"
                          x2="9.361"
                          y1="2.231"
                          y2="6.707"
                          gradientUnits="userSpaceOnUse"
                        >
                          <stop offset=".125" stop-color="#9c6cfe" />
                          <stop offset="1" stop-color="#7a41dc" />
                        </linearGradient>
                      </defs>
                    </g>
                  </svg>
                  <span class="pl-2">个人中心</span>
                </el-dropdown-item>
                <el-dropdown-item command="logout">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="18"
                    height="18"
                    viewBox="0 0 24 24"
                  >
                    <g fill="none">
                      <path
                        fill="url(#SVG0pAmxd9w)"
                        d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2"
                      />
                      <path
                        fill="url(#SVGFnXqmeDt)"
                        d="m15.53 8.47l-.084-.073a.75.75 0 0 0-.882-.007l-.094.08L12 10.939l-2.47-2.47l-.084-.072a.75.75 0 0 0-.882-.007l-.094.08l-.073.084a.75.75 0 0 0-.007.882l.08.094L10.939 12l-2.47 2.47l-.072.084a.75.75 0 0 0-.007.882l.08.094l.084.073a.75.75 0 0 0 .882.007l.094-.08L12 13.061l2.47 2.47l.084.072a.75.75 0 0 0 .882.007l.094-.08l.073-.084a.75.75 0 0 0 .007-.882l-.08-.094L13.061 12l2.47-2.47l.072-.084a.75.75 0 0 0 .007-.882z"
                      />
                      <defs>
                        <linearGradient
                          id="SVG0pAmxd9w"
                          x1="5.125"
                          x2="18.25"
                          y1="3.25"
                          y2="22.625"
                          gradientUnits="userSpaceOnUse"
                        >
                          <stop stop-color="#f83f54" />
                          <stop offset="1" stop-color="#ca2134" />
                        </linearGradient>
                        <linearGradient
                          id="SVGFnXqmeDt"
                          x1="8.685"
                          x2="12.591"
                          y1="12.332"
                          y2="16.392"
                          gradientUnits="userSpaceOnUse"
                        >
                          <stop stop-color="#fdfdfd" />
                          <stop offset="1" stop-color="#fecbe6" />
                        </linearGradient>
                      </defs>
                    </g>
                  </svg>
                  <span class="pl-2">退出登录</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
        <template v-else>
          <div
            class="bg-[#0050b3] hover:bg-[#0050b3]/90 text-white text-sm flex items-center justify-center cursor-pointer h-full px-10 py-4"
            @click="login"
          >
            登录
          </div>
        </template>
      </div>

      <div class="lg:hidden">
        <el-button link @click="drawer = true">
          <i class="el-icon" />
          <Icon icon="fa:bars" class="icon" />
        </el-button>
      </div>
    </div>

    <el-drawer
      v-model="drawer"
      placement="right"
      size="80%"
      :with-header="false"
    >
      <div class="p-4 space-y-3">
        <ul class="flex flex-col gap-3 text-[#303133]">
          <li><a class="block py-2">产品</a></li>
          <li><a class="block py-2">解决方案</a></li>
          <li><a class="block py-2">典型案例</a></li>
          <li><a class="block py-2">平台服务</a></li>
          <li><a class="block py-2">应用市场</a></li>
          <li><a class="block py-2">开源社区</a></li>
        </ul>
        <div class="flex items-center gap-3 mt-3">
          <el-button type="primary" class="flex-1 bg-[#0050b3]!" @click="login"
            >登录</el-button
          >
        </div>
      </div>
    </el-drawer>
  </header>
</template>

<script setup lang="ts">
import { Icon } from "@iconify/vue";
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import logo from "@/assets/images/logo.png";
import person from "@/assets/images/person.png";
import { useUserStoreWithOut } from "@/stores/useUserStore";
const userStore = useUserStoreWithOut();

const isLoggedIn = computed(
  () => !!userStore.isSetUser || !!userStore.user?.id,
);
const userAvatar = computed(() => userStore.user?.avatar || "");
const userName = computed(() => userStore.user?.nickname || "");

const router = useRouter();
const drawer = ref(false);

const goHome = () => {
  router.push({ path: "/" });
};

const login = () => {
  router.push({
    path: "/login",
  });
};

const onUserCommand = async (command: string) => {
  if (command === "logout") {
    await userStore.loginOut();

    router.replace("/login");
  }
};
</script>

<style scoped>
.avatar-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

.avatar-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  transition: none;
  z-index: 1;
  opacity: 0;
}

.avatar-wrapper:hover::before {
  animation: shine 0.5s ease-out;
}

@keyframes shine {
  0% {
    left: -100%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}
</style>
