<template>
  <div>
    <el-header class="el-Navbar" style="height: 80px">
      <el-breadcrumb separator-class="el-icon-arrow-right separator">
        <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="@/assets/image/lolo2.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>
    <edit ref="changePassword" />
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { logout } from '@/api/login'
import edit from '@/pages/userManagement/components/edit.vue'
export default {
  components: {
    edit
  },
  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(res => {
        if (res.code == 0) {
          this.$router.push('/')
        }
      })
    },
    changePassword() {
      this.$refs.changePassword.openClose()
    }
  }
}
</script>

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