<template>
  <div>
    <el-header class="el-Navbar" style="height:80px">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{$route.meta.title}}</el-breadcrumb-item>
      </el-breadcrumb>
      <el-dropdown>
        <span class="el-dropdown-link">
          <img class="userImg" src="../../../static/images/default.png" alt />
          <span>{{ name }}</span>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown" trigger="click" style="width: 160px">
          <el-dropdown-item @click.native="changePassword">
            修改密码
          </el-dropdown-item>
          <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { logout } from '@/api/login'
export default {
  props: {
    activeMenu: {
      type: String,
      default: ''
    },
    routes: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      cgpwdVisible: false
    }
  },
  computed: mapState({
    name: () => JSON.parse(localStorage.getItem('userInfo')).name,
    factoryName: () => JSON.parse(localStorage.getItem('userInfo')).factoryName,
    isCollapse: state => state.isCollapse
  }),
  methods: {
    logout() {
      logout().then(() => {
        this.$router.push('/')
      })
    },
    changePassword() {
      this.cgpwdVisible = true
    }
  }
}
</script>

<style lang="less">
@import './index.less';
</style>
