<template>
  <div class="navbar">
    <div class="hamburger-container"><i class="el-icon-s-fold"></i></div>
    <div class="navbar-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <template v-for="(item, index) in breadcrumb">
          <el-breadcrumb-item :key="index" :to="{ path: item.path }">{{ item.title }}</el-breadcrumb-item>
        </template>
      </el-breadcrumb>
    </div>

    <!--  用户信息  -->
    <el-popover placement="bottom" popper-class="admin-popover" trigger="click" width="200">
      <div slot="reference" class="user-info">
        <el-avatar :src="admin.avatar" size="small"></el-avatar>
        <div class="user-info--name">{{ admin.userName }}</div>
      </div>

      <div class="admin-info">
        <el-avatar :src="admin.avatar" class="admin-info--avatar" size="large"></el-avatar>
        <div class="admin-info--name">{{ admin.userName }}</div>
        <div class="admin-info--time">
          <ed-date :date="admin.loginTime"></ed-date>
        </div>


        <div class="admin-info--btn">
          <el-button plain size="mini" type="primary">个人资料</el-button>
          <el-button plain size="mini" type="danger" @click="loginOut">退出登录</el-button>
        </div>
      </div>
    </el-popover>

  </div>
</template>

<script>
import {routes} from "@/router"

export default {
  name: "Navbar",
  data() {
    return {
      breadcrumb: [],
      admin: {
        userName: "admin",
        loginTime: ""
      }
    }
  },
  watch: {
    "$route": {
      deep: true,
      immediate: true,
      handler(newVal) {
        if (newVal) {
          console.log(newVal)
          this.breadcrumb = []

          let matched = routes.find(i => i.path === newVal.matched[0].path)
          console.log(matched)

          if (matched) {
            this.breadcrumb.push({
              path: matched.path,
              title: matched.title
            })

            matched.children.map(route => {
              if (newVal.meta.title === route.meta.title) {
                this.breadcrumb.push({
                  path: route.path,
                  title: route.title
                })
              }
            })
          }


        }
      }
    }
  },
  mounted() {
    let userInfo = window.localStorage.getItem('FRAME_VUE_USER')
    this.admin = JSON.parse(userInfo)
  },
  methods: {
    loginOut() {
      window.localStorage.clear();
      this.$router.push({path: "/login"})
    }
  }
}
</script>

<style lang="scss" scoped>
.navbar {
  height: 50px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
  padding: 0 15px;
  display: flex;
  align-items: center;

  .hamburger-container {
    height: 100%;
    cursor: pointer;
    transition: background .3s;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
  }

  .navbar-breadcrumb {
    margin-left: 30px;
    width: 100%;
  }

  .user-info {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 10px;
    cursor: pointer;
    user-select: none;

    &:hover {
      background: #f5f5f5;
    }

    .user-info--name {
      padding-left: 6px;
      white-space: nowrap;
    }


  }


}

.admin-popover {
  .admin-info {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

    .admin-info--avatar {
      margin-bottom: 10px;
    }

    .admin-info--name {
      margin-bottom: 10px;
    }

    .admin-info--time {
      margin-bottom: 10px;
    }

    .admin-info--btn {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
