<template>
  <div>
      <div class="fixhead">
        <div style="width: 1300px;margin: 0 auto;display: flex;align-items: center;justify-content: space-between;"> 
          <div @click="tishou" class="logoimg"> 
            <img  src="/assets/loginreg/logo.png" alt="">
          </div>
          <div v-if='disnonelog' class='header'>
            <!-- <div v-if="menulist&&menulist.length>0"  class='headermenu'>
              <el-menu class="topmenuitem" active-text-color="#0066EB" mode="horizontal">
                <span v-for="(item, index1) in menulist" :key="index1">
                  <el-menu-item :index="item.link">
                    <a v-if="item.stepHref" :href="item.href" target="blank" >
                      <p class='menutitl' v-if="!item.highlight" >{{item.title}}</p>
                      <p v-else style="color:#0066EB">{{item.title}}</p>
                    </a>
                    <router-link v-else :to='item.link'>
                      <p class='menutitl' v-if="!item.highlight" >{{item.title}}</p>
                      <p v-else style="color:#0066EB">{{item.title}}</p>
                    </router-link>
                  </el-menu-item>
                  <el-submenu :index="item.link" v-if="item.submenu && item.submenu.length>0">
                      <el-menu-item v-for="(subitem, subkey) in item.submenu" :key="subkey" :index="subitem.link">
                        <a v-if="subitem.stepHref" :href="subitem.href" target="blank" >
                          <p v-if="!subitem.highlight" >{{subitem.title}}</p>
                          <p v-else style="color:#0066EB">{{subitem.title}}</p>
                        </a>
                        <router-link :to='subitem.link'>
                          <p v-if="!subitem.highlight">{{subitem.title}}</p>
                          <p v-else style="color:#0066EB">{{subitem.title}}</p>
                        </router-link>
                      </el-menu-item>
                    </el-submenu>
                </span>
              </el-menu>
            </div> -->
            <div v-if="menulist&&menulist.length>0"  class='headermenu'>
              <div v-for="(item, key) in menulist" :key="key" class="topmenuitem">
                <a v-if="item.stepHref" :href="item.href" target="blank" >
                  <p class='menutitl' v-if="!item.highlight" >{{item.title}}</p>
                  <p v-else style="color:#0066EB">{{item.title}}</p>
                </a>
                <router-link v-else :to="item.link">
                <!-- <router-link v-else :to="item.link == '/market' ||item.link == '/college' ? '':item.link"> -->
                  <p class='menutitl' v-if="!item.highlight" >{{item.title}}<i v-if="item.submenu && item.submenu.length>0" class="el-icon-caret-bottom"></i></p>
                  <p v-else style="color:#0066EB">{{item.title}}<i v-if="item.submenu && item.submenu.length>0" class="el-icon-caret-bottom"></i></p>
                  
                </router-link>
                <div v-if="item.submenu && item.submenu.length>0" class='submenuwarp' >
                  <div v-for="(subitem, subkey) in item.submenu" :key="subkey" v-show="subitem.show">
                    <a v-if="item.stepHref" :href="subitem.href" target="blank" >
                      <p class='menutitlChild' v-if="!subitem.highlight" >{{subitem.title}}</p>
                      <p v-else style="color:#0066EB">{{subitem.title}}</p>
                    </a>
                    <router-link :to='subitem.link' class="submenop">
                      <p class='menutitlChild' v-if="!subitem.highlight" >{{subitem.title}}</p>
                      <p v-else style="color:#0066EB">{{subitem.title}}</p>
                    </router-link>
                  </div>
                </div>
              </div>      
            </div>         
          </div>
          <div  v-if='disnonelog' class="worker">
            <div v-if='disnonelog' style="display:flex;font-size:14px;"> 
                <el-divider direction="vertical"></el-divider>
                <div v-if="token" style="display:flex;">
                      <div class="permissions" @click="mypermissions('workbench')">
                        <img style="margin-right:10px" src="/assets/home/gongzuotai.png" alt="">
                        <p style="width:50px;">工作台</p>
                      </div> 
                      <!-- <div class="permissions" @click="mypermissions('shopping')">
                          <el-badge :value="cartCount" :max="100" :hidden="cartCount==0"  :class="cartCount>0?'baggeitem':'baggeitemda'">                    
                              <img style="margin-right:5px" src="/assets/home/gouwuche(1).png" alt="">                        
                          </el-badge>
                          <p style="margin-left:5px;width:50px;">购物车</p>
                      </div> -->
                          
                      <div class="permissions"  @click="mypermissions('message')" style="margin-right:10px"> 
                            <el-badge :value="messageCount" :max="100" :hidden="messageCount==0"  :class="messageCount>0?'baggeitem':'baggeitemda'">                    
                                <img style="margin-right:5px" src="/assets/home/xiaoxi.png" alt="">                        
                            </el-badge>
                            <p style="margin-left:5px;width:65px;">站内消息</p>
                      </div>
                      <div class="predropdown"> 
                        <el-dropdown  trigger="click" placement='bottom' >
                          <div class="avatar-wrapper">
                            <img style="width:54px;height:54px;margin:13px 0 5px 0px;cursor:pointer;border-radius:50%" :src="userinform.avatar" alt="">
                          </div>
                          <el-dropdown-menu slot="dropdown" style="top:66px!important">
                              <el-dropdown-item @click.native="mypermissions('imembers')">个人中心</el-dropdown-item>
                              <el-dropdown-item divided @click.native="logout">
                                <span>退出登录</span>
                              </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                      </div>
                </div>
                <div v-else style="display:flex;align-items: center"> 
                      <div class="loginbtn" @click="jump('log')">登录</div>
                      <div class="regbtn"  @click="jump('reg')">注册</div>
                </div>
            </div> 
            
          </div>
          <div v-else style='display:flex;align-items:center;height:80px;margin-left:70%'> 
              <img src="/assets/loginreg/dianhua.png" alt="">
              <p style="font-size: 18px;font-weight: bold;color: #595959;margin-left:10px">咨询热线：010-80750213</p>
            </div>
        </div>
      </div>
  </div>
</template>
<script>
  import $ from 'jquery'
  import {mapGetters} from "vuex";
  import store from "@/store";
  import {listMyMessageCount} from '@/api/system/message'
  export default {
    props:['menulist'],
    data(){
      return {
        searchcontent:'',
        disnonelog:true,
        messageCount: 0,
        cartCount: 0
      }
    },
    computed: {
            ...mapGetters(['token','logindate','avatar','userinform']),
            count() {
                return store.getters.messageCount;　　//需要监听的数据
            },
            cartCountW() {
                return store.getters.cartCount;　//需要监听的数据
            },
        },
    created() {
          if(this.token){
            listMyMessageCount().then(response => {
                this.messageCount = response.data;
                this.cartCount = response.cartCount;
                store.commit('SET_MESSAGECOUNT', this.messageCount);
                store.commit('SET_CARTCOUNT', this.cartCount);
            }).catch(()=>{
              //  console.log('请求失败')
            })
          }
    },
   watch:{
      $route:{
        handler(val, old) {
            if(!val.query.type){
              this.disnonelog=true;
            }else{
              this.disnonelog=false;
            } 
            if(this.menulist && this.menulist.length>0){  
              // console.log('菜单栏',this.menulist)     
              if(val.name=='home'){
                let activehome=this.menulist.filter(item=>item.title=='首页')
                activehome[0].highlight=true
                  // console.log('首页',activehome)
              }else{
                let activehome=this.menulist.filter(item=>item.title=='首页')
                activehome[0].highlight=false
              }
              if(val.path.indexOf('/market')===0){
                let activeName=this.menulist.filter(item=>item.title=='工具服务')
                activeName[0].highlight=true
                  // console.log('工具市场',activeName)
              }else{
                let activeName=this.menulist.filter(item=>item.title=='工具服务')
                activeName[0].highlight=false
              }
              // if(val.path.indexOf('/openSource')===0){
              //   let activeabout=this.menulist.filter(item=>item.title=='开源专区')
              //     activeabout[0].highlight=true
              // }else{
              //   let activeabout=this.menulist.filter(item=>item.title=='开源专区')
              //   activeabout[0].highlight=false
              // }
              // if(val.path.indexOf('/openSourceArea')===0){
              //   let activeName=this.menulist.filter(item=>item.title=='开源专区')
              //   activeName[0].highlight=true
              // }else{
              //   let activeName=this.menulist.filter(item=>item.title=='开源专区')
              //   activeName[0].highlight=false
              // }
              // if(val.path.indexOf('/openSourceArea/codeScanningTool')===0){
              //   let activeName=this.menulist[2].submenu.filter(item=>item.title=='源代码扫描工具')
              //   activeName[0].highlight=true
              // }else{
              //   let activeName=this.menulist[2].submenu.filter(item=>item.title=='源代码扫描工具')
              //   activeName[0].highlight=false
              // }
              // if(val.path.indexOf('/openSourceArea/unitTesteTool')===0){
              //   let activeName=this.menulist[2].submenu.filter(item=>item.title=='单元测试工具')
              //   activeName[0].highlight=true
              // }else{
              //   let activeName=this.menulist[2].submenu.filter(item=>item.title=='单元测试工具')
              //   activeName[0].highlight=false
              // }
              // if(val.path.indexOf('/openSourceArea/functionTesteTool')===0){
              //   let activeName=this.menulist[2].submenu.filter(item=>item.title=='功能测试工具')
              //   activeName[0].highlight=true
              // }else{
              //   let activeName=this.menulist[2].submenu.filter(item=>item.title=='功能测试工具')
              //   activeName[0].highlight=false
              // }
              // if(val.path.indexOf('/openSourceArea/pressureTesteTool')===0){
              //   let activeName=this.menulist[2].submenu.filter(item=>item.title=='压力测试工具')
              //   activeName[0].highlight=true
              // }else{
              //   let activeName=this.menulist[2].submenu.filter(item=>item.title=='压力测试工具')
              //   activeName[0].highlight=false
              // }
              // if(val.path.indexOf('/openSourceArea/interfaceTestTool')===0){
              //   let activeName=this.menulist[2].submenu.filter(item=>item.title=='接口测试工具')
              //   activeName[0].highlight=true
              // }else{
              //   let activeName=this.menulist[2].submenu.filter(item=>item.title=='接口测试工具')
              //   activeName[0].highlight=false
              // }
              // if(val.path.indexOf('/openSourceArea/safetyTesteTool')===0){
              //   let activeName=this.menulist[2].submenu.filter(item=>item.title=='安全性测试工具')
              //   activeName[0].highlight=true
              // }else{
              //   let activeName=this.menulist[2].submenu.filter(item=>item.title=='安全性测试工具')
              //   activeName[0].highlight=false
              // }
              // if(val.path.indexOf('/solution')===0){
              //   let activeName=this.menulist.filter(item=>item.title=='解决方案')
              //   activeName[0].highlight=true
              // }else{
              //   let activeName=this.menulist.filter(item=>item.title=='解决方案')
              //   activeName[0].highlight=false
              // }
              // if(val.path.indexOf('/solution/CNAS')===0){
              //   let activeName=this.menulist[3].submenu.filter(item=>item.title=='CNAS咨询服务解决方案')
              //   activeName[0].highlight=true
              // }else{
              //   let activeName=this.menulist[3].submenu.filter(item=>item.title=='CNAS咨询服务解决方案')
              //   activeName[0].highlight=false
              // }
              // if(val.path.indexOf('/solution/GJB5000B')===0){
              //   let activeName=this.menulist[3].submenu.filter(item=>item.title=='GJB5000B咨询服务解决方案')
              //   activeName[0].highlight=true
              // }else{
              //   let activeName=this.menulist[3].submenu.filter(item=>item.title=='GJB5000B咨询服务解决方案')
              //   activeName[0].highlight=false
              // }
              if(val.path.indexOf('/crowdsourcing')===0){
                // console.log('众包市场路由')
                let activeNamecrowd=this.menulist.filter(item=>item.title=='众包服务')
                  activeNamecrowd[0].highlight=true
                  // console.log('众包市场',activeNamecrowd)
              }else{
                let activeNamecrowd=this.menulist.filter(item=>item.title=='众包服务')
                activeNamecrowd[0].highlight=false
              }
              if(val.path.indexOf('/ability')===0){
                // console.log('众包市场路由')
                let activeNamecrowd=this.menulist.filter(item=>item.title=='人才服务')
                  activeNamecrowd[0].highlight=true
                  // console.log('众包市场',activeNamecrowd)
              }else{
                let activeNamecrowd=this.menulist.filter(item=>item.title=='人才服务')
                activeNamecrowd[0].highlight=false
              }
              if(val.path.indexOf('/college')===0){
                let activecollege=this.menulist.filter(item=>item.title=='培训服务')
                  activecollege[0].highlight=true
                  // console.log('培训学院',activecollege)
              }else{
                let activecollege=this.menulist.filter(item=>item.title=='培训服务')
                activecollege[0].highlight=false
              }
              // if(val.path.indexOf('/news')===0){
              //   // console.log('行业动态')
              //   let activeindusty=this.menulist.filter(item=>item.title=='行业动态')
              //     activeindusty[0].highlight=true
              //     // console.log('众包市场',activeindusty)
              // }else{
              //   let activeindusty=this.menulist.filter(item=>item.title=='行业动态')
              //   activeindusty[0].highlight=false
              // }
              if(val.path.indexOf('/about')===0){
                let activeabout=this.menulist.filter(item=>item.title=='关于我们')
                  activeabout[0].highlight=true
                  // console.log('关于我们',activeabout)
              }else{
                let activeabout=this.menulist.filter(item=>item.title=='关于我们')
                activeabout[0].highlight=false
              }
            }
            // console.log('路由--', val,old)  
        },
        immediate:true
      },
      count(newVal, oldVal) {
          this.messageCount = newVal;
      },
      cartCountW(newVal, oldVal) {
          this.cartCount = newVal;
      }
    },
    mounted(){
      // console.log('this.disnonelog',this.disnonelog,this.token) 
    },
    destroyed() {

    },
    methods:{
      //跳转登录/注册
      jump(type){
        this.$router.push(`/login?type=${type}`)
      },
      //logo跳转首页
      tishou(){
        this.$router.push('/')
      },
      //我的功能
      mypermissions(type){
          let currentdata=Date.parse(new Date()); 
          let logindate=this.logindate;
          let timedifference=currentdata-(parseInt(logindate)+432000000);
          if(timedifference>0){
             this.$confirm('登录状态失效，请您重新登录' , '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
              }).then(()=> {
                 this.$router.push('/login?type=log')
              }).catch(()=>{
                // console.log('取消')
              }) 
          }else{
              if(type=='message'){
                  this.$router.push('/console/message')
              }else if(type=='shopping'){
                  this.$router.push('/console/cart')
              }else if(type=='workbench'){
                  this.$router.push('/console/myparticipate')
              }else if(type=='imembers'){
                  this.$router.push('/console/profile')
              }
            // console.log('跳转对应的页面');        
          }
      },
      //退出登录
      logout() {
          this.$confirm('确定退出登录吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
              this.$store.dispatch('LogOut').then(() => {
                  // this.$router.push('/login?type=log')
              })
          })
      },
    }

  }
</script>

<style scoped>
  *{margin:0;padding:0}
    .fixhead{
      position:fixed;
      top:0;
      z-index:99;
      background:#FFFFFF;
      width:100%;
      box-shadow: 0 6px 9px 0 rgb(0 0 0 / 6%);
    }
  .reg{
      height:88px;
      width:100%;
      background-image: url('/organmanage/assets/reg/nav.png');
      background-size:100% 88px;
      background-repeat:no-repeat;
  }
  .header{
    /* width:100%; */
    height:78px;
    text-align:center;
    display: flex;
    position: relative;
    
  }
  .header /deep/ .el-menu.el-menu--horizontal {
    border: none;
  }
  .header /deep/ .el-menu-item {
    padding: 10px 15px;
    height: 78px;
    font-size: 15px;
    color: #000000;
    font-weight: bold;
  }
  .header /deep/ .el-submenu__title {
    font-size: 15px;
    color: #000000;
    font-weight: bold;
  }
  .headermenu{
    width:680px;
    display:flex;
    margin:0 auto;
    justify-content: space-between;
    align-content: center;
    flex-direction: row;
    text-align:center;
    line-height:78px;
    /* margin:0 30px 0 10px; */
  }
  .topmenuitem{
    /* width: 120px; */
    height:78px;
    font-weight:400;
    position:relative;
  }
  .topmenuitem a{
    text-decoration: none;
    font-size:15px;
    color: #000000;
    font-weight: bold;

  }
  .topmenuitem:hover{
    /* border-bottom:3px solid #FFFF; */
  }
  .menutitl {
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #1A1A1A;
    line-height: 78px;
  }
  .menutitl:hover {
    color:#0066EB;
  }
  .menutitlChild {
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #1A1A1A;
    line-height: 40px;
  }
  .menutitlChild:hover {
    color:#0066EB;
  }
  .topmenuitem:hover .menutitl{
    /* font-size:18px; */
    /* color:#0066EB; */
  }
  .topmenuitem>>>a.is-active{
    /* font-size:18px; */
    color:#0066EB;
  }
  .topmenuitem:hover .submenuwarp{
    display:initial;
  }
  .submenuwarp{
    position:absolute;
    left:0px;
    top: 77px;
    width:200px;
    background-color: #FFFFFF;
    /* background-color: #FEB45FFF; */
    z-index:3;
    display:flex;
    flex-direction:column;
    display:none;
    border-radius: 2px;
    padding: 0 10px;
    /* border: 1px solid #ccc; */
  }
  /* .submenuwarp::before {  
    content: "";
    display: block;
    position: absolute;
    left: 24px;
    top: -13px;
    border-width: 6px;
    border-style: dashed  solid  dashed  dashed;
    border-color:transparent transparent #CCC transparent;
  } */
  .submenop {
    text-decoration:none;
    line-height:40px;
    text-align:left;
    color:#000;
  }
   .submenudd:hover{
    background-color:#FFF3EDFF;
    /* color:#FEB45FFF; */

  }
  .submenuwarp .submenudd{
    width:200px;
    height:36px;
    font-size:14px !important;
    display:block;
    line-height:36px;
    color:#333333FF;
  }
  .logoimg{
    /* cursor:pointer;
    position:absolute;
    margin-left:20%;
    margin-top:10px;
    z-index:99 */
  }
  @media screen and (max-width: 1700px) {
      .logoimg{
        /* cursor:pointer;
        position:absolute;
        margin-left:10%;
        margin-top:10px */
      }
      .headermenu{
        width:680px;
      }
      .worker{
        /* position:absolute;
        margin-left:74%!important;
        height:80px;
        margin-top:-80px */
      }
  }
  @media screen and (max-width: 1500px) {
      .logoimg{
        /* cursor:pointer;
        position:absolute;
        margin-left:5%;
        margin-top:10px */
      }
      .worker{
        /* position:absolute;
        margin-left:70%!important;
        height:80px;
        margin-top:-80px */
      }
  }
  .worker{
        /* position:absolute;
        margin-left:70%;
        height:80px;
        margin-top:-80px */
      }
  .worker>>>.el-divider--vertical{
    height: 27px;
    background: #1A1A1A;
    opacity: 0.15;
    margin:25px 10px 25px 15px;
  }
  .loginbtn{
    margin-left:20px;
    width:60px;
    height:30px;
    font-size:15px;
    color:rgba(255,255,255,1);
    background: linear-gradient(45deg, #2978EE, #0066EB);
    border:none;
    border-radius:6px;
    line-height:30px;    
    cursor:pointer;
    text-align:center;
  }
  .regbtn{
    margin-left:20px;
    width:60px;
    height:30px;
    font-size:15px;
    color:#0066EB;
    background:transparent;
    border: 1px solid #0066EB;
    border-radius:6px;
    line-height:30px;
    cursor:pointer;
    text-align:center;
  }
 .permissions{
    display:flex;
    align-items:center;
    margin-left:10px;
    cursor:pointer;
 }
 .avatar-wrapper img:hover{
    opacity:0.5;
    /* transition: 0.3s; */
 }
  .baggeitem {
      margin-top:5px;
      margin-right:15px;
  }
  .baggeitemda {
      margin-top:5px;
      /* margin-right:10px; */
  }
  .el-dropdown-menu__item{
    padding:0px 20px!important;
    /* margin: 10px 0!important; */
  }
  .el-dropdown-menu{
    top: 60px !important;
    margin-top:10px!important;
  }
  .tostnew {
		position: absolute;
		top: -13px;
		right: -23px;
	}
	.tostnewimg {
		width: 58px;
		height: 26px;
	}
	.tostnewtext {
		position: absolute;
    top: 16px;
    right: 5px;
		white-space: nowrap;
		font-weight: 500;
		font-size: 12px !important;
		color: #FFFFFF;
    line-height: 26px !important;
	}

</style>
