<template>
  <nav class="navbar"
       :class="{ 'collapsed': !state.isNavVisible && state.scrolledPastThreshold, 'animatable': state.isNavVisible || !state.isNavVisible }">
    <div class="box">
      <!--导航栏-->
      <div style="padding: 10px 0">
        <img :src="logo" alt="" style="width:130px;height: 36px;"/>
      </div>
      <div class="nav">
        <ul>
          <li v-for="column in state.columnList" :key="column.id">
            <router-link tag="a" :to="'/'+column.url" :class="{ 'active': $route.path === '/'+column.url }">
              {{ column.name }}
            </router-link>
          </li>
        </ul>
      </div>
      <!--登录菜单项-->
      <div class="menu">
        <ul v-if="!state.userInfo || state.userInfo.id===null || !state.token">
          <li>
            <router-link tag="a" :to="'/register'">注册</router-link>
          </li>
          <li>
            <a @click="openLogin" class="a-button">登录</a>
          </li>
        </ul>
        <ul v-else>
          <!--有成绩-->
          <li v-if="state.scoreInfo.culturalScore">
            <div class="flexWrap">
              <span class="pr-10 mr-10" style="border-right:2px solid #e4e7ed;">
                {{ state.scoreInfo.professionalCategory }}
              </span>
              <span v-if="state.scoreInfo.professionalCategory==='音乐类'">
                <span class="pr-10 mr-10" style="border-right:2px solid #e4e7ed;" v-show="state.scoreInfo.yybysy && state.scoreInfo.yybysy!==0">
                  声乐分·{{ state.scoreInfo.yybysy }}
                </span>
                <span class="pr-10 mr-10" style="border-right:2px solid #e4e7ed;" v-show="state.scoreInfo.yybysy && state.scoreInfo.yybyqy!==0">
                  器乐分·{{ state.scoreInfo.yybyqy }}
                </span>
                <span class="pr-10 mr-10" style="border-right:2px solid #e4e7ed;" v-show="state.scoreInfo.yybysy && state.scoreInfo.yyjy!==0">
                  音教分·{{ state.scoreInfo.yyjy }}
                </span>
              </span>
              <span v-if="state.scoreInfo.professionalCategory==='表演类'">
                <span class="pr-10 mr-10" style="border-right:2px solid #e4e7ed;" v-show="state.scoreInfo.xjysdy && state.scoreInfo.xjysdy!==0">
                  戏导分·{{ state.scoreInfo.xjysdy }}
                </span>
                <span class="pr-10 mr-10" style="border-right:2px solid #e4e7ed;" v-show="state.scoreInfo.xjysby && state.scoreInfo.xjysby!==0">
                  戏表分·{{ state.scoreInfo.xjysby }}
                </span>
                <span class="pr-10 mr-10" style="border-right:2px solid #e4e7ed;" v-show="state.scoreInfo.fzby && state.scoreInfo.fzby!==0">
                  服装表演分·{{ state.scoreInfo.fzby }}
                </span>
              </span>
              <span class="pr-10 mr-10" style="border-right:2px solid #e4e7ed;">
                文化成绩·{{ state.scoreInfo.culturalScore }}
              </span>
              <span class="mr-10" v-show="state.scoreInfo.professionalCategory!='音乐类'">{{state.scoreInfo.professionalCategory==='音乐类'?'主项成绩':'统考成绩'}}·{{ state.scoreInfo.professionalScore }}</span>
              <span @click="openEditScore" style="cursor: pointer;"><el-icon><EditPen /></el-icon></span>
            </div>
          </li>
          <!--无成绩-->
          <li v-else>
            <div class="flexWrap">
              <span @click="openEditScore" style="cursor: pointer;">创建分数<el-icon style="padding-left: 10px;"><EditPen /></el-icon></span>
            </div>
          </li>

          <el-dropdown trigger="hover"  @command="handleCommand" style="margin: 0 0 0 50px;">
            <span class="el-dropdown-link">
              我的<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="passwordChanger">更改密码</el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </ul>
      </div>
    </div>
  </nav>

  <!--登录弹框-->
  <el-dialog
      v-model="state.loginDialogVisible"
      title=" "
      width="20em"
      :closeOnClickModal="false" :show-close="false"
  >
  <template #header>
    <div style="display: flex; margin: 5px;justify-content: space-between; align-items: center;">
      <el-icon @click="closeLoginDialog" class="el-dialog__headerbtn"><Close /></el-icon>
    </div>
  </template>
  <Login/>
  </el-dialog>
  <!--修改成绩弹框-->
  <el-dialog
      v-model="state.editScoreDialogVisible"
      title=" "
      width="40em"
      :closeOnClickModal="false" :show-close="false"
  >
  <template #header>
    <div style="display: flex; justify-content: space-between; align-items: center;">
      <h3 style="margin: 0;">请填写您的高考信息</h3>
      <el-icon @click="closeEditScoreDialog" class="el-dialog__headerbtn"><Close /></el-icon>
    </div>
  </template>
  <!-- 在这里放置登录内容 -->
  <EditScoreInfo/>
  </el-dialog>
</template>


<script setup lang="ts">
import {reactive, onMounted, ref} from "vue";
import {useRouter} from 'vue-router';
import {ElMessage} from 'element-plus';
import axiosInstance from '@/utils/http';
import { clearUserIocalStorage } from "@/utils/tool";
import ApiConstant from "@/utils/ApiConstant";
import StaticConstant from "@/utils/StaticConstant";
import { RouterEntity, ScoreInfoEntity } from "@/types";
import EditScoreInfo from "./EditScoreInfo.vue";
import logo from '@/assets/images/logo.png';
import {
  ArrowDown,
  Plus,
} from '@element-plus/icons-vue'
const router = useRouter();

const state = reactive({
  activeIndex: '/index',
  columnList: [] as Array<RouterEntity>,
  isNavVisible: ref(true), // 跟踪导航栏的可见性
  prevScrollPos: ref(0), // 跟踪先前的滚动位置
  scrolledPastThreshold: ref(false), // 跟踪是否已滚动超过阈值
  editScoreDialogVisible:ref(false),//更改成绩弹框判断
  loginDialogVisible:ref(false),//登录弹框判断
  userInfo:{
    id:null,
    phone:null,
  } as any,//用户信息
  scoreInfo:{
    professionalCategory:null,
    culturalScore:null,
    professionalScore:null,
    yybysy:null,
    yybyqy:null,
    yyjy:null,
    xjysdy:null,
    xjysby:null,
    fzby:null,

  },
  token:'' as any,//token
})

// 组件挂载时清空本地token
onMounted(() => {
  //判断是否已登录
  state.token = localStorage.getItem("X-Access-Token") as string;
  let userInfo = localStorage.getItem('userInfo')
  if(userInfo!==null){
    state.userInfo = JSON.parse(userInfo)
    let scoreInfo = localStorage.getItem('scoreInfo')
    if(scoreInfo){
      let a = JSON.parse(scoreInfo)
      state.scoreInfo.culturalScore = a.culturalScore
      state.scoreInfo.professionalScore = a.professionalScore
      state.scoreInfo.professionalCategory = a.professionalCategory
      state.scoreInfo.yybysy = a.yybysy
      state.scoreInfo.yybyqy = a.yybyqy
      state.scoreInfo.yyjy = a.yyjy
      state.scoreInfo.xjysdy = a.xjysdy
      state.scoreInfo.xjysby = a.xjysby
      state.scoreInfo.fzby = a.fzby


      userInfo = null
      a = null
      scoreInfo = null
    }
  }else{
    state.token = ''
    state.userInfo = null

  }
  state.columnList = StaticConstant.defaultRouterList
});

// 监听滚动事件
window.addEventListener('scroll', () => {
  const currentScrollPos = window.pageYOffset;
  if (currentScrollPos > 200) {
    state.scrolledPastThreshold = true;
  } else {
    state.scrolledPastThreshold = false;
  }

  if (state.scrolledPastThreshold) {
    if (currentScrollPos > state.prevScrollPos) {
      // 向下滚动，隐藏导航栏
      state.isNavVisible = false;
    } else {
      // 向上滚动，显示导航栏
      state.isNavVisible = true;
    }
  }
  state.prevScrollPos = currentScrollPos;
});


// 用户下拉菜单
const handleCommand = (command: string | number | object) => {
  if(command === 'logout'){
    openLogout()
  }else if(command === 'passwordChanger'){
    //跳转更改密码页
    router.push({
      path: "/passwordChanger"
    });
  }
}

//打开登录界面
function openLogin(){
  state.loginDialogVisible = true
}

//退出登录
function openLogout(){
  axiosInstance({
    url: ApiConstant.User.logout,
    method: 'get',
    params:{},
    /*showLoading: false,//是否显示加载图标*/
  }).then((response) => {
    return response.data
  }).then((data) => {
    clearUserIocalStorage();
    if(data.success){
      ElMessage.success(data.message);
      setTimeout(function(){
        state.token=''
        router.push({
          path: "/index"
        });
      }, 1000);
    }else{
      clearUserIocalStorage();
      ElMessage.error('已退出');
    }
    //有数据情况下
  }).catch((error: any) => {
    console.log(error);
  }).finally(() => {
  });
}

function openEditScore(){
  state.editScoreDialogVisible = true
}

function closeLoginDialog() {
  // 在这里可以处理弹出层关闭时的逻辑
  state.loginDialogVisible = false
}

function closeEditScoreDialog(){
  state.editScoreDialogVisible = false
}
</script>

<style scoped lang="scss">

.custom-menu {
  border: none;
  border-radius: 0;
}


/*导航栏*/
.navbar {
  position: fixed;
  left: 0;
  right: 10;
  width: 100%;
  background-color: #ffffff;
  color: #000000;
  z-index: 1000; /* 可以根据需要调整 z-index 值 */
  padding: 0;
  box-shadow: 0 0 3px rgba(0, 0, 0, .02), 0 4px 8px rgba(0, 0, 0, .02);
  ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    li {
      margin-right: 20px;
    }
  }

  /*导航栏左侧*/
  .box {
    margin: 0 auto;
    min-width: 710px;
    max-width: 1510px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap
  }

  /*导航栏右侧*/
  .menu{
    margin: 0 0 0 auto;
    a{
      color:$color-blue-60;
      background-color: $color-blue-20;
      padding: 8px 15px;
      border-radius: 5px;
    }
  }
}

.navbar a {
  color: #000000;
  text-decoration: none;
}

.navbar a:hover {
  color: $color-blue-60;
  /*text-decoration: underline;*/
}

.navbar a.active {
  font-weight: bold;
  color: $color-blue-60; /* 设置高亮颜色，可以根据需求调整 */
}


/*导航栏折叠动画*/
.navbar {
  transition: transform 0.3s; /* 添加平滑的过渡效果 */
}

.navbar.collapsed {
  transform: translateY(-100%); /* 上滑以隐藏导航栏 */
}

.el-dialog__headerbtn {
  border: none;
  cursor: pointer;
}


//用户下拉菜单
.el-dropdown{
  line-height: 24px;
  color: #000000;
  font-size: 16px;
  .el-icon{
    position: relative;
    top: 2px;
  }
}
</style>
