// 管理后台通用头部导航

<template>
  <div class="layout-header">
    <div class="layout-menu-wrapper flex">
      <div class="layout-menu flex flex-1">
        <!-- logo -->
        <div class="layout-logo flex">
          <i class="el-icon-menu" @click='showMobileMenu=!showMobileMenu'> </i>
          <router-link to="/">
            <!-- <img src="../assets/images/logo.png" style="margin-bottom:5px" height="40" alt=""> -->
             <b style="color:white;font-size:20px;">&nbsp;&nbsp;&nbsp; 智慧政务绩效管理系统 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b>
          </router-link>

        </div>
        <!-- 一级菜单 -->
        <ul class="menu-list flex">
          <li v-for='item in menu' :key='item.id'>
            <span @click="RouterTo(item.path)" :class="{active:activePath === item.path}">
              <i :class="'el-icon-'+item.icon"></i>
              {{item.name}}
            </span>
          </li>
          
        </ul>
      </div>

      <div class="controllBar">
        <el-badge :value="12" class="item">
          <i class="el-icon-bell" style="font-size: 15px;margin-right: 10px" > 消息</i>
        </el-badge>
      </div>
      <div class="controllBar" @click="returnHome">
        <i class="el-icon-s-home" style="font-size: 15px;margin-right: 10px" > 首页</i>
      </div>

      <div class="layout-profile">

         <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link" style="color:white">
            {{userData.currUserName}}
            <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
          </span>
           <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="update">修改密码</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </div>
    </div>
    <!-- 一级菜单 -->
    <ul class="mobile-menu-list flex flex-pack-justify" v-if='showMobileMenu'>
      <li v-for='item in menu' :key='item.id' @click="RouterTo(item.path)">
        <span :class="{active:activePath === item.path}">
          <i :class="'el-icon-'+item.icon"></i>
          {{item.name}}
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Header",
  methods: {
    // 导航栏路由跳转
    RouterTo(path){
      window.sessionStorage.CurrentSecondPath = path
      this.$store.commit('setCurrentSecondPath',path)
      this.$store.commit('setThirdPath',path)
      this.$router.push({path})
      let thirdArr = this.headBar.children.find(item => item.path === path)
      let arr = []
      console.log(thirdArr,'ssssss')
      if(thirdArr.children.length === 0){
        arr.push(
          {
            children: [],
            id: thirdArr.id,
            name: thirdArr.name,
            path: thirdArr.path
          }
        )
      }else{
        arr = thirdArr.children
      }
      this.$store.commit('setCurrentThirdArr',arr)
      this.$emit('changePath',path)//触发点击事件
      
    },
    returnHome(){
      this.$router.replace({path:'/'})
    },
    handleCommand(key) {
      if(key === 'update'){
        this.$router.push('/login/updatePwd')
      }
      if(key === 'logout'){
        this.logout()
      }
    },
    // 退出登录
    logout() {
      this.$post('/login/logout').then(data=>{}).catch(error=>{}).then(()=>{
        this.$message.success('已退出登录');
        this.$store.commit('logout');
        this.$router.replace('/login');
      })
    }
  },
  beforeDestroy() {
    console.log("beforeDestroy");
  },
  mounted() {},
  computed: {
    group() {
      const relativeGroup = this.$store.state.group;
      if(relativeGroup) {
        return relativeGroup;
      }
      let groupArray = this.$route.path.split('/');
      let group = this.$route.path;
      let type = groupArray.pop();
      if(['add', 'edit', 'view', 'new','importView','resetPwdView'].indexOf(type) > -1){
        groupArray.push('list');
        group = groupArray.join('/')
      }
      return group;
    },
    relativeGroup() {
      return this.$store.state.group
    },
    flat() {
      return this.userData.flat
    },
    menu() {
      if(!this.headBar.children) {
        return []
      }else{
        return this.headBar.children
      }
    },
    // 二级菜单数据
    headBar() {
      return this.$store.state.headBar;
    },
    userData(){
      return this.$store.state.userData
    },
    // 二级路径
    activePath(){
      return this.$store.state.CurrentSecondPath
    }
  },
  data() {
    return {
      showMobileMenu: false,
    }
  },
  created(){
    
  }
}
</script>

<style lang="less">
.layout-header{
  .mobile-menu-list{display: none}
  .layout-menu-wrapper{
    height: 72px;
    line-height: 72px;
    font-size: 16px;
    color: #eee;
    background: #1848c8;
    .layout-logo{

      height: 50px;
      .el-icon-menu{display: none}
      a{
        margin: auto;
      }
      img{
        vertical-align: middle;
      }
    }

    .menu-list{
      li{
        span{
          display: block;
          padding: 0 16px;
          height: 100%;
          color: #eee;
          cursor: pointer;
          margin-right: 20px;
        }
        .active{
          color: #fff;
          list-style-type:none;
          border-bottom:3px solid #fff;
          padding-bottom: 2px;
        }
      }

    }
    .layout-profile{
      padding-right: 30px;
    }
  }
  .controllBar{
    background-color: rgba(170, 170, 170, 0.4);
    width: 120px;
    height: 44px;
    line-height: 44px;
    margin-top: 34px;
    transform: translateY(-50%);
    text-align: center;
    border-radius: 5px;
    margin-right: 15px;
    cursor: pointer;
  }
  .layout-submenu-wrapper{
    padding-left: 20px;
    background: #fff;
    height: 42px;
    border-bottom: 1px solid #ededed;
    .layout-title{
      font-size: 18px;
      height: 40px;
      line-height: 40px;
      color: #333;
    }
    .layout-submenu{
      margin-left: 15px;
      white-space: nowrap;
      overflow: auto;
      li{
        a{
          display: block;
          padding: 0 10px;
          height: 40px;
          line-height: 40px;
          font-size: 14px;
          color: #666;
          &.router-link-active,
          &[active]{
            color: #1890ff;
            border-bottom: 2px solid #1890ff;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 800px){
  .layout-header {
    .mobile-menu-list{
      display: flex;
      background: #222333;
      padding: 10px;
      li{
        span{
          display: block;
          padding: 0 12px;
          height: 100%;
          color: #eee;
          cursor: pointer;
        }
        .active{
          color: #1890ff;
        }
      }
    }
    .layout-submenu-wrapper{
      padding-left: 0;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    .layout-menu-wrapper {
      width: 100%;
      .layout-logo{
        width: 40px;
        .el-icon-menu{
          margin: auto;
          display: inline-block;
        }
        a{
          display: none;
        }
      }
      .menu-list{
        display: none;
      }
      li{
        width: 100%;
      }
    }
  }
}
</style>