<script setup>
const router = useRouter()
let link = window.GLOBAL_CONFIG;
import { user } from '~/store/index'
function loginOut() {
  window.localStorage.clear();
  window.location.href = link.qqyxt;
}
const linkTo = (obj) => {
  router.push(obj);
};
</script>

<template>
  <div class="main-header">
    <div class="header-nav">
       <div class="w-1200px m-auto flex justify-between items-center">
         <a :href="link.yzy +'webapps/page/home.html'">
           <img src="/images/logo.png" class="logo" alt="">
           <img src="/images/title.png" class="logo-title" alt="">
         </a>
         <div class="flex">
           <a :href="link.qqyxt" class="nav-item leading-50px">亲亲云学堂</a>
           <a :href="link.yzy +'webapps/page/home.html'" class="nav-item leading-50px">精准教学首页</a>
           <div class="nav-item">
             <span class="inline-block align-middle leading-50px">试题库</span>
             <img src="/images/triangle.png" class="triangle" alt="">
             <div class="child-nav">
               <a :href="link.yzy +'/webapps/page/task.html?mold=issue&sort=chapter'">章节试题</a>
               <a :href="link.yzy + '/webapps/page/task.html?mold=issue&sort=knowledge'">知识点试题</a>
               <a :href="link.yzy + '/webapps/page/zlzj.html'">智能选题</a>
             </div>
           </div>
           <div class="nav-item">
             <span class="inline-block align-middle leading-50px">考试阅卷</span>
             <img src="/images/triangle.png" class="triangle" alt="">
             <div class="child-nav">
               <a :href="link.yzy+'/webapps/page/exam.html?mold=manage'">组卷管理</a>
               <a :href="link.yzy + '/webapps/page/exam.html?mold=online&sort=one&pid=total'">考试管理</a>
               <a :href="link.yzy + '/webapps/page/marking-process-list.html'">阅卷流程</a>
               <a href="javascript:;" @click="linkTo({name:'process'})">联考管理</a>
             </div>
           </div>
           <a :href="link.yzy + '/webapps/page/paper_library.html'" class="nav-item leading-50px">试卷库</a>
           <div class="nav-item">
             <span class="inline-block align-middle leading-50px">VIP题库</span>
             <img src="/images/triangle.png" class="triangle" alt="">
             <div class="child-nav">
               <a :href="link.yzy + '/webapps/page/vip_task.html?mold=vip&sort=chapter'">章节试题</a>
               <a :href="link.yzy + '/webapps/page/vip_task.html?mold=vip&sort=knowledge'">知识点试题</a>
             </div>
           </div>
           <a :href="link.yzy + '/webapps/page/propRequireList.html'" class="nav-item leading-50px">命题要求</a>
           <div class="header-user relative">
             <img class="inline-block align-middle w-30px h-30px border-radius-50" :src="user.user_avatar.big" alt="">
             <span class="inline-block align-middle ml-8px text-12px text-white leading-50px">{{user.user_realname}}</span>
             <img src="/images/triangle.png" class="triangle" alt="">
             <div class="child-nav">
               <a :href="link.yzy + '/webapps/page/glzx.html'">管理中心</a>
               <a :href="link.yzy + '/webapps/page/grzx.html'">个人中心</a>
               <a href="javascript:;" @click="loginOut">退出登录</a>
             </div>
           </div>
         </div>
       </div>
    </div>
  </div>

</template>
<style lang="scss">
@keyframes navShow {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}
.main-header{
  position: relative;
  width: 100%;
  height: 50px;
}
.header-nav{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 50px;
  background: #0048e5;
}
.logo{
  width: 21px;
  height: 26.5px;
  display: inline-block;
}
.logo-title{
  width: 81px;
  height: 16.5px;
  display: inline-block;
  margin-left: 10px
}
.nav-item{
  position: relative;
  width: 110px;
  height: 50px;
  font-size: 16px;
  //line-height: 50px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  &:hover,
  &.selected{
    background: rgba(0,0,0,.2);
  }
  &:hover{
    .child-nav{
      display: block;
      animation: all .2s ease-in-out;
    }
  }

}
.child-nav{
  display: none;
  position: absolute;
  left: 0;
  top: 50px;
  width: 118px;
  background: #fff;
  border: solid #0048e5 1px;
  border-top: 0;
  box-shadow: 0 0 5px #ccc;
  border-radius: 0 0 5px 5px;
  a{
    display: block;
    font-size: 14px;
    text-align: left;
    line-height: 40px;
    padding-left: 20px;
    color: #303133;
    &:hover{
      color: #0048e5;
    }
  }
}
.triangle {
  width: 9px;
  height: 5.5px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  margin-left: 8px;
}
.header-user{
  min-width: 100px;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  padding: 0 8px;
  &:hover{
    background: rgba(0,0,0,.2);
    .child-nav{
      display: block;
    }
  }
}
</style>
