<template>


  <el-affix :offset="0" @change="act_trigger">
    <div class="head" :class="!g_navigationBarTop && 'noHead'">
      <!-- 移动端更多 -->
      <div class="head-more" @click="act_updateVisibility(true)">
        <i class="evenMore">
          <img src="@/assets/icon/更多.png" alt="">
        </i>
      </div>

      <!-- 图标 -->
      <div class="appIcon">
        VR_ONE <span></span>
      </div>

      <!-- 导航栏 -->
      <div class="navTab">
        <el-menu :default-active="g_activeName" class="el-menu-demo" mode="horizontal" @select="act_handleSelect"
          router>
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/showroomCase">展厅案例</el-menu-item>
          <el-menu-item index="/templateCase">模板案例</el-menu-item>
          <el-menu-item index="/ArticleColumn">文章栏目</el-menu-item>
        </el-menu>
      </div>

      <!-- 用户功能 -->
      <div class="userFun">
        <el-button v-if="!g_isLogin" type="primary" @click="act_Login"
          style="background-color: rgb(0,0,0);border: none;">登录</el-button>

        <!-- 登录后得状态 -->
        <div v-if="g_isLogin" class="logging-status">
          <i class="el-icon-switch-button" @click="act_notificationCenter">
            <img src="@/assets/icon/信息.png" alt="">
            </img>
          </i>

          <!-- 用户下拉 -->
          <el-dropdown :hide-on-click="false">
            <span class="el-dropdown-link">
              <i class="userFun-img"><img src="@/assets/icon/头像.png" alt=""></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="act_personalCenter">个人中心</el-dropdown-item>
                <el-dropdown-item @click="act_myShoppingCart">我的购物车</el-dropdown-item>
                <el-dropdown-item @click="act_myOrder">我的订单</el-dropdown-item>
                <el-dropdown-item divided @click="act_logOut">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>

      </div>
    </div>
  </el-affix>



  <!-- 抽屉 -->
  <drawer v-model="g_drawerVisible" direction="ltr" :size="'70%'">

    <!-- 内容 -->
    <template v-slot:content>
      <el-menu :default-active="g_activeName" class="el-menu-vertical-demo" @select="act_handleSelect" router>

        <el-menu-item index="/">
          <span>首页</span>
        </el-menu-item>

        <el-menu-item index="/showroomCase">
          <span>展厅案例</span>
        </el-menu-item>

        <el-menu-item index="/templateCase">
          <span>模板案例</span>
        </el-menu-item>

        <el-menu-item index="/ArticleColumn">
          <span>文章栏目</span>
        </el-menu-item>

      </el-menu>
    </template>

  </drawer>


  <!-- 显示区域 -->
  <RouterView />

  <!-- 尾部 -->
  <tail v-if="g_navigationBarBottom"></tail>

</template>


<script setup>
/************************************************
 *                   引入文件                   *
 ************************************************/
import tail from '@/pages/Home/HomeComponents/tail.vue'
import drawer from '@/components/Common/new-drawer.vue'
import { ref, onMounted, watchEffect, provide } from 'vue'
import { useRoute, useRouter, RouterView } from 'vue-router'
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/http/api/general/jsencrypt";
import { login, getCodeImg } from '@/http/api/pages/User/index'
import { useUserStore, usePersonalCenterStore } from "@/store/index";
import { ElMessage, ElMessageBox } from 'element-plus'



/************************************************
 * 全局变量
 *
 * 格式: g_ + 事件名     例如: getAppDataList
 ************************************************/
// 获取用户
const g_userStore = useUserStore();
// 获取个人中心
const g_personalCenterStore = usePersonalCenterStore();
// 获取路由对象
const g_route = useRoute() // 解构出当前路由对象的各种属性
const g_router = useRouter() // 解构出路由实例的各种方法
// 默认选中的页面
const g_activeName = ref('/')
// 是否显示底部栏
const g_navigationBarBottom = ref(true)
// 导航栏位置
const g_navigationBarTop = ref(true)
// 登录状态
const g_isLogin = ref(false)
// 抽屉状态
const g_drawerVisible = ref(false)


/************************************************
 * 生命周期函数
 ************************************************/

// 页面加载
onMounted(() => {
  act_isLogin();
})

// 监听效果，当效果触发时，会执行提供的函数
watchEffect(() => {
  // 将全局变量 g_activeName 的值设置为当前路由路径
  g_activeName.value = g_route.path
  if (g_route.path == '/personalCenter') {
    g_navigationBarBottom.value = false;
  }
})




/************************************************
 * 事件处理
 *
 * 格式: act_ + 事件名     例如: getAppDataList
 ************************************************/
// 修改抽屉状态
const act_updateVisibility = (newValue) => {
  g_drawerVisible.value = newValue
}

// 菜单激活回调
const act_handleSelect = (key, keyPath) => {
  act_updateVisibility(false);
  g_navigationBarBottom.value = true;
}

// 登陆注册
const act_Login = () => {
  g_router.push("/login")
}

// 修改导航栏样式
const act_trigger = () => {
  g_navigationBarTop.value = !g_navigationBarTop.value
}

const act_notificationCenter = () => {
  g_navigationBarBottom.value = false;
  g_personalCenterStore.setActiveTabName('notificationCenter');
  g_router.push({ path: "/personalCenter", query: { tab: 'notificationCenter' } })
}

// 进入个人中心页面
const act_personalCenter = () => {
  g_navigationBarBottom.value = false;
  g_personalCenterStore.setActiveTabName('personalData');
  g_router.push({ path: "/personalCenter", query: { tab: 'personalData' } })
}

// 进入我的购物车页面
const act_myShoppingCart = () => {
  g_navigationBarBottom.value = false;
  g_personalCenterStore.setActiveTabName('myShoppingCart');
  g_router.push({ path: "/personalCenter", query: { tab: 'myShoppingCart' } })
}

// 进入我的订单页面
const act_myOrder = () => {
  g_navigationBarBottom.value = false;
  g_personalCenterStore.setActiveTabName('myOrder');
  g_router.push({ path: "/personalCenter", query: { tab: 'myOrder' } })
}

// 退出登录
const act_logOut = () => {
  ElMessageBox.confirm(
    '确认退出账号吗?',
    '温馨提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      g_userStore.clearProfile();
      g_isLogin.value = false;
      g_router.push("/login")
    })
    .catch(() => {

    })

}

// 判断用户是否登录
const act_isLogin = () => {
  try {
    const loginData = g_userStore.userInfo.user;
    const token = g_userStore.userInfo.token;
    // const loginData = Cookies.get("loginData");
    // const token = Cookies.get("token");
    if (loginData && token) {
      g_isLogin.value = true;
    }
  } catch (error) {
    console.error("解析登录数据失败:", error);
    act_Login();
  }
}

// 提供一个函数给子组件调用
provide('act_isLogin', act_isLogin);


</script>

<style scoped>
.head {
  padding: 8px 32px 8px calc(2vw + 2vh + 2vmin);
  background-color: rgb(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  animation: Element-fall-animation 0.8s ease-in-out;
}

/* 元素从上下落动画 */
@keyframes Element-fall-animation {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.head-more {
  display: none;
  cursor: pointer;
}

.evenMore img {
  width: 30px;
  height: 30px;
}

.appIcon {
  flex: 1;
  color: #000000;
  font-size: 25px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.appIcon span {
  width: 20px !important;
  height: 20px !important;
  margin-left: 8px;
  background-color: #FD571F;
  border-radius: 50%;
}

.navTab {
  flex: 10;
  display: flex;
  justify-content: flex-end;
}

.userFun-img {
  cursor: pointer;
}

.userFun-img img {
  width: 28px;
  height: 28px;
}


.el-menu-demo {
  background-color: rgb(0, 0, 0, 0);
}

.box-bottom-text {
  padding: 32px;
  color: rgb(255, 255, 255);
  background-color: #010101;
  text-align: center;
}

.el-menu--horizontal {
  height: 50px;
}

.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-menu--horizontal>.el-menu-item {
  color: rgb(0, 0, 0);
}

.logging-status {
  display: flex;
}

.el-icon-switch-button {
  margin: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-icon-switch-button img {
  width: 24px;
}

::v-deep .el-menu--horizontal.el-menu {
  border: none;
}

.el-image__error {
  background-color: #1d1d1d;
}

.el-menu--horizontal.el-menu {
  flex: 1;
  border: none;
  display: flex;
  justify-content: flex-end;
}

.el-menu--horizontal>.el-menu-item.is-active {
  border-bottom: 2px solid #299BFF;
  color: #299BFF !important;
}

.el-radio__input.is-checked+.el-radio__label {
  color: #299BFF;
}

.el-input__wrapper {
  background-color: #1d1d1d;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background-color: rgba(0, 0, 0, 0);
  color: #299BFF;
  outline: none;
}

:focus-visible {
  outline: -webkit-focus-ring-color auto 0;
}

/* 隐藏单选框前面点 */
::v-deep .el-radio__input {
  display: none;
}

/* 移动端样式 */
@media screen and (max-width: 700px) {
  .el-menu {
    border-right: none;
  }

  .head {
    padding: 16px 8px;
    border-bottom: 1px solid rgb(214, 214, 214);
    box-shadow: 0 2px 5px rgb(0, 0, 0, 0.5);
    overflow: hidden;
  }

  .head-more {
    display: flex;
  }

  .appIcon {
    justify-content: center;
  }

  .navTab {
    display: none;
  }

  .el-icon-switch-button {
    display: none;
  }
}
</style>