<template>
  <header class="header navbar">
    <ul class="menu-list">
      <li class="logo" @click="onMenu(0)">
        <img src="@/assets/images/logo.png"/>
          <!-- <img src="@/assets/images/logo_m.png" @click="onMenu(0)"/> -->
      </li>
      <li class="nav-item header-item" :class="!activeId ? 'active' : ''" @click="onMenu(0)">
        <i class="iconfont icon-shouye"></i>首页
      </li>
      <li class="nav-item header-item" v-for="item of menus" :key="item.menuId" :class="activeId === item.menuId ? 'active' : ''" @click="onMenu(item.menuId , item.menuName,item)">
        <i :class="'iconfont '+ item.imageUrl" style="vertical-align: middle;"></i>{{item.menuName}}
      </li>
    </ul>
    <div class="menu-right">
       <i class="iconfont icon-xiaoxi"></i>
       <div class="portrait">
         <img src="@/assets/images/headPortrait.png" >
         <p>
           <span class="portrait-name">{{userName}}</span>
           <span class="portrait-role">{{roleName}}</span>
         </p>
       </div>
       <div class="sign-out" @click="signOut">
        <i class="iconfont icon-084tuichu"></i><span class="sign-out-text">退出</span>
       </div>
    </div>
    <!-- 确认退出 -->
    <Modal
      v-model="signOutModal"
      title="退出"
      width="400"
      ref="modalGragSign"
      draggable
      reset-drag-position
      :mask-closable="false"
      class-name="common-modal">
      <Icon type="ios-information-circle" class="modal-icon" style="color: #ff8432;"></Icon>
      <span class="modal-text">确认退出</span>
      <div slot="footer">
          <Button @click="signOutCancel">取消</Button>
          <Button type="primary" @click="signOutOk">确定</Button>
        </div>
    </Modal>
   </header>
</template>
<script>
import utils from '../../libs/utils';
//...mapState({...}) 辅助函数（需要获取多个状态的时候使用） 将多个对象合并为一个 并且将vuex中的this.$store.user.userInfo 映射到this.userInfo (this -> vue)上面来
// mapMutations 其实跟mapState 的作用是类似的，将组件中的 methods 映射为 store.commit 调用 如@click="sign"
// mapActions, action的一个辅助函数，将组件的 methods 映射为 store.dispatch 调用 this.userLogin()
// mapGetter 仅仅是将 store 中的 getter 映射到局部计算属性 userInfo
// import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
export default {
  name: "Head",
  components:{
  },
  data() {
    return {
      menus: [],
      roleName: '',
      userName: utils.storage('sw_user').user,
      activeId: 0,
      signOutModal: false,
      menuNameArr: []
    };
  },
//   computed: {
//     ...mapState({ //使用对象展开运算符将此对象混入到外部对象中
//     userInfo: 'userInfo' //mapState等这种辅助函数的时候，前面的方法名和获取的属性名是一致的 传字符串参数 'userInfo' 等同于 `state => state.userInfo` 也可以使用箭头函数
//     }),
//     ...mapGetters({ //辅助函数
//     getMenuList: 'getMenuList' // getMenuList 不是字符串，对应的是getter里面的一个方法名字 然后将这个方法名字重新取一个别名 getMenuList
//     })
//  },
  watch: {
      '$route' (to, from) {
        let menuNameArr = []
        // 菜单头部浏览器前进或后退
        let arr = utils.storage('sw_user').menus;
        arr.forEach((item,i) => {
          if (item.childMenus) {
            item.childMenus.forEach((val,index)=> {
              if (val.linkUrl == to.path) { //浏览器后退选中上一级菜单(第二级菜单后退)
              this.activeId = val.parentMenuId
              this.$emit('listenMenuId', this.activeId);
              menuNameArr[0] = item.menuName;
              menuNameArr[1] = val.menuName;
              sessionStorage.setItem('routname', to.path);
              sessionStorage.setItem('menuNameArr',JSON.stringify(menuNameArr));
              this.$router.push( to.path );
              }
              if (val.childMenus) {
                 val.childMenus.forEach((last,lastIndex)=> { //浏览器后退选中上一级菜单(第三级菜单后退)
                    if (last.linkUrl == to.path) {
                      this.activeId = val.parentMenuId
                      this.$emit('listenMenuId', this.activeId);
                      menuNameArr[0] = item.menuName;
                      menuNameArr[1] = val.menuName;
                      menuNameArr[2] = last.menuName;
                      sessionStorage.setItem('routname', to.path);
                      sessionStorage.setItem('menuNameArr',JSON.stringify(menuNameArr));
                      this.$router.push( to.path );
                    }
                 })
              }
            })
          }
        })
        // 菜单头部浏览器前进或后退首页选中首页菜单
        if (to.path == '/mainPage') {
           this.activeId = 0
        }
      },
      // getMenuList: { //全局切换菜单
      //   handler(newVal, oldVal) {
      //     this.menus = newVal
      //   },
      //   deep: true
      // }
    },
  created () {
    // this.$store.state.user.userInfo 直接获取vuex state里的userInfo值
    // 我理解的是两种方法都是调用stroe/user组件里的userLogin方法
    // this.$store.dispatch('userLogin',{}) // 直接通过store的方法 触发action, 改变 userInfo 的值 （重新调用actions里的userLogin方法
    // this.userLogin() // 通过mapActions 触发mutation 从而commit ，改变state的值

    // let params = {userId: 75,menus: []}
    // this.$store.commit('userSign',params); 重新调用mutations的userSign方法,触发状态变更 再次强调，我们通过提交 mutation 的方式，而非直接改变 this.$store.state.user.userInfo，是因为我们想要更明确地追踪到状态的变化
  },
  mounted() {
    // this.menus = this.getMenuList // vuex里保存菜单的写法 获取菜单
    this.menus = utils.storage('sw_user').menus
    this.roleName = this.getCookie('role_name')
    const ID = sessionStorage.getItem('id')
    this.activeId = parseInt(ID)
    this.$emit('listenMenuId', parseInt(ID));
  },
  
  methods: {
//     ...mapMutations({
//     sign: 'userSign' // userSign 是mutation 里的方法，sign是重新定义的一个别名方法，本组件直接调用这个方法
//     }),
// 　　 ...mapActions({
//     userLogin: 'userLogin' // 第一个userLogin是定义的一个函数别名称，挂载在到this(vue)实例上，后面一个userLogin 才是actions里面函数方法名称
//     }),
    // 获取cookie里某个参数的值
    getCookie(name) {
      let cookieValue = null;
      if (document.cookie && document.cookie !== '') {
          let cookies = document.cookie.split(';');
          for (let i = 0; i < cookies.length; i++) {
              let cookie = cookies[i].trim();
              // 判断这个cookie的参数名是不是我们想要的
              if (cookie.substring(0, name.length + 1) === (name + '=')) {
                  cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                  break;
              }
          }
      }
      return cookieValue;
    },
    onMenu: function(id,menuName,menuList) {
      let menuNameArr = []
      menuNameArr[0] = menuName
      if(this.activeId === id) {
          return ;
        }
        this.activeId = id;
        let { currRouterName, leftMenus } = utils.toRouter(id);
        let routeLinkUrl = currRouterName ? currRouterName : leftMenus[0].childMenus[0].linkUrl
        this.$emit('listenMenuId', id);
        this.menus.forEach((item)=> {
          if (item.menuId == id && item.childMenus) {
           menuNameArr[1] = item.childMenus[0].menuName //菜单第二层
           if (item.childMenus && item.childMenus[0] && item.childMenus[0].childMenus) { 
             menuNameArr[2] = item.childMenus[0].childMenus[0].menuName // 菜单第三层
           }
          }
        })
        sessionStorage.setItem('routname', routeLinkUrl);
        sessionStorage.setItem('menuNameArr',JSON.stringify(menuNameArr));
        this.$router.push( routeLinkUrl );
    },
    signOut () {
      this.signOutModal = true
    },
    signOutOk () {
      utils.removeSessionData();
      this.$router.push('/');
      this.signOutModal = false
    },
    signOutCancel () {
      this.signOutModal = false
    },
  },  
};
</script>
<style scoped lang="stylus">
.header {
  width: 100%;
  height: 90px;
  background: linear-gradient(180deg, #06215F, #0D429E);
  display: flex;
}
.menu-list {
  height: 100%;
  display: flex;
  flex: 1;
  align-items: center;
}
.logo {
  height: 100%;
  display: flex;
  align-items: center;
  margin-right: 30px;
}
.nav-item {
  width: 96px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  color: #F1F1F1;
  cursor: pointer;
}
.active {
  background: linear-gradient(0deg, rgba(1, 133, 234, 0.6), rgba(21, 51, 107, 0.06));
  border-bottom: 3px solid #259FF8;
}
.menu-right {
  display: flex;
  align-items: center;
  color: #FFFFFF;
}
.portrait {
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 12px;
  p {
    display: flex;
    flex-direction: column;
    margin-left: 12px;
    .portrait-name {
      font-size: 16px;
    }
    .portrait-role {
      font-size: 12px;
    }
  }
}
.sign-out {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 35px;
  cursor: pointer;
}
.sign-out-text {
  font-size: 16px;
  padding-left: 12px;
}
>>> .iconfont {
  font-size: 30px;
  color: #F1F1F1;
}
</style>