<script lang="ts" setup>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/UserStore";
import { ElMessage } from "element-plus";

const router = useRouter();
const userStore = useUserStore();
const isMobileMenuOpen = ref(false);

// 计算属性：判断用户是否已登录
const isLoggedIn = computed(() => {
  return !!userStore.token;
});

// 计算属性：获取用户昵称
const userNickname = computed(() => {
  return userStore.userInfo?.nickname || userStore.userInfo?.username || "用户";
});

// 跳转登录页
const goToLogin = () => {
  router.push("/user/login");
  isMobileMenuOpen.value = false;
};

// 跳转注册页
const goToRegister = () => {
  router.push("/user/register");
  isMobileMenuOpen.value = false;
};

// 用户退出登录
const handleLogout = () => {
  userStore.clearUserInfo();
  ElMessage.success("退出登录成功");
  router.push("/user/login");
};

// 跳转到个人中心
const goToProfile = () => {
  router.push(`/user/profile/${userStore.userInfo?.id}`);
  isMobileMenuOpen.value = false;
};
</script>

<template>
  <div class="flex flex-col min-h-screen bg-slate-50">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm">
      <div class="container mx-auto px-4 py-3">
        <div class="flex items-center justify-between">
          <!-- 网站Logo -->
          <div class="flex items-center space-x-2">
            <i class="fa-solid fa-store text-2xl text-blue-600"></i>
            <h1 class="text-xl font-bold text-gray-800">致微商城</h1>
          </div>

          <!-- PC端导航 -->
          <nav class="hidden md:flex items-center space-x-8">
            <a
              href="#"
              class="text-gray-600 hover:text-blue-600 transition-colors"
              >首页</a
            >
            <a
              href="#"
              class="text-gray-600 hover:text-blue-600 transition-colors"
              @click.prevent="$router.push('/product/product')"
              >购买商品</a
            >
            <a
              href="#"
              class="text-gray-600 hover:text-blue-600 transition-colors"
              @click.prevent="$router.push('/shoppingcart/content')"
              >购物车</a
            >
            <a
              href="#"
              class="text-gray-600 hover:text-blue-600 transition-colors"
              @click.prevent="$router.push('/order/content')"
              >我的订单</a
            >
            <a
              href="#"
              class="text-gray-600 hover:text-blue-600 transition-colors"
              @click.prevent="$router.push('/user/address')"
            >
              地址管理
            </a>
          </nav>

          <!-- 登录/注册按钮 或 用户信息 (PC端) -->
          <div class="hidden md:flex items-center space-x-4">
            <template v-if="isLoggedIn">
              <el-dropdown>
                <div class="flex items-center cursor-pointer">
                  <el-avatar size="small" class="mr-2">{{
                    userNickname.charAt(0)
                  }}</el-avatar>
                  <span>{{ userNickname }}</span>
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="goToProfile"
                      >个人中心</el-dropdown-item
                    >
                    <el-dropdown-item @click="handleLogout"
                      >退出登录</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
            <template v-else>
              <button
                @click="goToLogin"
                class="px-4 py-2 text-blue-600 border border-blue-600 rounded-lg hover:bg-blue-50 transition-colors"
              >
                登录
              </button>
              <button
                @click="goToRegister"
                class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
              >
                注册
              </button>
            </template>
          </div>

          <!-- 移动端菜单按钮 -->
          <button
            class="md:hidden text-gray-700"
            @click="isMobileMenuOpen = !isMobileMenuOpen"
          >
            <i class="fa-solid fa-bars text-xl"></i>
          </button>
        </div>
      </div>

      <!-- 移动端下拉菜单 -->
      <div
        v-show="isMobileMenuOpen"
        class="md:hidden bg-white border-t border-gray-100 shadow-lg animate-fadeIn"
      >
        <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
          <a
            href="#"
            class="py-2 text-gray-600 hover:text-blue-600 transition-colors"
            >首页</a
          >
          <a
            href="#"
            class="py-2 text-gray-600 hover:text-blue-600 transition-colors"
            @click.prevent="$router.push('/product/product')"
            >购买商品</a
          >
          <a
            href="#"
            class="py-2 text-gray-600 hover:text-blue-600 transition-colors"
            @click.prevent="$router.push('/shoppingcart/content')"
            >购物车</a
          >
          <a
            href="#"
            class="py-2 text-gray-600 hover:text-blue-600 transition-colors"
            >我的订单</a
          >

          <div class="pt-2 border-t border-gray-100">
            <template v-if="isLoggedIn">
              <div class="py-2 text-gray-700">欢迎，{{ userNickname }}！</div>
              <button
                @click="goToProfile"
                class="w-full mb-2 px-4 py-2 text-left text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
              >
                个人中心
              </button>
              <button
                @click="handleLogout"
                class="w-full px-4 py-2 text-left text-red-600 hover:bg-red-50 rounded-lg transition-colors"
              >
                退出登录
              </button>
            </template>
            <template v-else>
              <div class="flex space-x-4 pt-2">
                <button
                  @click="goToLogin"
                  class="flex-1 px-4 py-2 text-blue-600 border border-blue-600 rounded-lg hover:bg-blue-50 transition-colors"
                >
                  登录
                </button>
                <button
                  @click="goToRegister"
                  class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                >
                  注册
                </button>
              </div>
            </template>
          </div>
        </div>
      </div>
    </header>

    <!-- 主内容区域 (插槽) -->
    <main class="flex-1">
      <slot />
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-8">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div>
            <h3 class="text-lg font-semibold mb-4">关于我们</h3>
            <p class="text-gray-300 text-sm">
              致微商城专注于提供高品质商品，用心服务每一位用户
            </p>
          </div>
          <div>
            <h3 class="text-lg font-semibold mb-4">联系方式</h3>
            <p class="text-gray-300 text-sm mb-2">
              <i class="fa-solid fa-phone mr-2"></i> 17816776925
            </p>
            <p class="text-gray-300 text-sm">
              <i class="fa-solid fa-envelope mr-2"></i> 1505204847@qq.com
            </p>
          </div>
          <div>
            <h3 class="text-lg font-semibold mb-4">关注我们</h3>
            <div class="flex space-x-4">
              <a
                href="#"
                class="text-gray-300 hover:text-white transition-colors"
              >
                <i class="fa-brands fa-weixin text-xl"></i>
              </a>
              <a
                href="#"
                class="text-gray-300 hover:text-white transition-colors"
              >
                <i class="fa-brands fa-weibo text-xl"></i>
              </a>
              <a
                href="#"
                class="text-gray-300 hover:text-white transition-colors"
              >
                <i class="fa-brands fa-qq text-xl"></i>
              </a>
            </div>
          </div>
        </div>
        <div
          class="mt-8 pt-4 border-t border-gray-700 text-center text-gray-400 text-sm"
        >
          © 2025 致微商城 版权所有
        </div>
      </div>
    </footer>
  </div>
</template>

<style scoped>
/* 简单动画 */
.animate-fadeIn {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
