<template lang="pug">
  div(class="header")
    .logo
      span(@click="expanMenu")
        <svg-icon className="toggle-icon" icon-class='togglemenu' />
    .right-menu
      el-dropdown(trigger="click" @command="handleCommand")
        span(class="el-dropdown-link")
          <svg-icon className="icon" icon-class='user' />
          span(class="userInfo-name userInfo-discription") {{name}}
          i(class="el-icon-arrow-down el-icon-caret-bottom")
        el-dropdown-menu(slot="dropdown")
          el-dropdown-item(command="pass")
            span(class="userInfo-operation userInfo-discription") 修改密码
          el-dropdown-item(command="logout")
            span(class="userInfo-operation userInfo-discription") 退出
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex'

export default {
  name: 'CommHeader',
  computed: {
    ...mapState('app', ['sidebar']),
    ...mapState(['name', 'userId']),
    isCollapse() {
      return this.sidebar.opened
    }
  },
  data() {
    return {
      visible: true,
      resetObj: null
    }
  },
  mounted() {},
  methods: {
    ...mapMutations(['TOGGLE_UPDATEPASS_DIALOG']),
    ...mapActions(['logout']),
    ...mapActions('app', ['toggleSideBar']),
    handleLogout() {
      try {
        this.logout()
        this.$router.push('/login')
      } catch (error) {
        console.log(error)
      }
    },
    handleUpdatepass() {
      this.TOGGLE_UPDATEPASS_DIALOG({
        name: this.name,
        username: this.userId
      })
    },
    expanMenu() {
      this.toggleSideBar()
    },
    handleCommand(data) {
      if (data === 'pass') {
        this.handleUpdatepass()
      } else if (data === 'logout') {
        this.handleLogout()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  box-shadow: 0px 1px 4px 0px rgba(0, 21, 41, 0.12);
  padding: 0 20px 0 24px;
}
.logo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .toggle-icon {
    width: 20px;
    height: 20px;
  }
  span {
    font-size: 14px;
    cursor: pointer;
    .rotate {
      transform: rotate(90deg);
    }
  }
}
.right-menu {
  .el-dropdown-link {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    height: 100%;
    .icon {
      height: 28px;
      width: 28px;
      margin-right: 6px;
    }
  }
  .user-icon {
    font-size: 20px;
    margin-right: 10px;
  }
  .userInfo-name {
    margin-right: 10px;
    color: #666666;
  }
}
</style>