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

<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:18px;">&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'>
            <!-- :active='submenu.path === item.path' -->
            <router-link :to="item.path" :title="item.name" replace>
              <i :class="'el-icon-'+item.icon"></i>
              {{item.name}}
            </router-link>
          </li>
          
        </ul>
      </div>

      <div class="controllBar">
        <i class="el-icon-bell" style="font-size: 15px;margin-right: 10px" > 消息</i>
      </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'>
        <router-link :to="item.path" :active='submenu.path === item.path' :title="item.name">
          <i :class="'el-icon-'+item.icon"></i>
          {{item.name}}
        </router-link>
      </li>
    </ul>

    <!-- 二级菜单 -->
    <!-- <div class="layout-submenu-wrapper flex" v-if='submenu.children && submenu.children.length'>
      <div class="layout-submenu">
        <ul class="submenu-list flex">
          <li v-for='item in submenu.children' :key='item.id'>
            <a :href="item.path" target="blank" v-if='item.isOut'>{{item.name}}</a>
            <router-link :to="item.path" :active='group === item.path' v-else>{{item.name}}</router-link>
          </li>
        </ul>
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  name: "Header",
  methods: {
    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");
    //window.removeEventListener("message", this.getsocketData, false);
  },
    mounted() {
    // console.log("mounted");
    // this.$nextTick(function () {
    //   console.log("login websocket:"+"ws://"+process.env.VUE_APP_WEBSOCKET_API +"/ws?accessToken="+ this.$store.state.userData.id)
    //   createSocket(
    //     "ws://" +
    //       process.env.VUE_APP_WEBSOCKET_API +
    //       "/ws?accessToken=" +
    //       this.$store.state.userData.id
    //   );
    // });

    //    let _this = this;
    // const getsocketData = (e) => {i
    //   // 创建接收消息函数
    //   const data = e && e.detail.data;

    //   let obj = JSON.parse(data);
    //   if (obj.type == "SEND_TO_ALL_REQUEST") {
    //     vm.refreshData();
    //     let content = JSON.parse(obj.body.content);
    //     _this.$notify({
    //       title: "警告",
    //       message: content,
    //       type: "warning",
    //       duration: 8000,
    //     });

    //   }
    // };

    // this.getsocketData = getsocketData;
    // // 注册监听事件
    // window.addEventListener("onmessageWS", getsocketData,false);
      // console.log(this.menu,'菜单数据')
    },
  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
      }
      // return this.userData.children.map(item=>{
      //   const url = item.path ? item.url : (item.childList[0] ? (item.childList[0].url || '') : '');
      //   return {
      //     name: item.name,
      //     path: url,
      //     id: item.id,
      //     icon: item.imgPath,
      //     children: item.childList.map(sub=>{
      //       return {
      //         name: sub.name,
      //         path: sub.url ? sub.url : (sub.childList[0] ? (sub.childList[0].url || 0) : ''),
      //         id: sub.id,
      //         parentId: sub.parentId,
      //         icon: sub.imgPath,
      //         isOut: /^https?\:\/\//.test(sub.url)
      //       }
      //     })
      //   }
      // })
    },
    submenu() {
      if(!this.menu.length) return {};
      let matchMenu = {};
      this.menu.forEach(item=>{
        const menu = item;
        item.children.forEach(item=>{
          if(item.path === this.group) {
            matchMenu = menu;
            return;
          }
        })
      })
      return matchMenu
    },
    // 二级菜单数据
    headBar() {
      return this.$store.state.headBar;
    },
    userData(){
      return this.$store.state.userData
    },
  },
  data() {
    return {
      showMobileMenu: false,
    }
  },
  created(){
    console.log(this.userData,'用户数据')
    console.log(this.menu,'导航栏数据')
  }
}
</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{
        a{
          display: block;
          padding: 0 12px;
          height: 100%;
          color: #eee;
          &.router-link-active,
          &[active]{
            //background: #1890ff;
            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: 0 10px;
      li{
        padding: 8px 5px;
        a{
          width: 1em;
          display: block;
          color: #eee;
          font-size: 14px;
          word-break: break-all;
          &.router-link-active,
          &[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>