<template>
  <el-header class="layout-header">
    <div class="left">
      <img class="logo" src="@/assets/logo.svg" />
      <span class="title">Eagle Web 组件库</span>
    </div>
    <el-menu :default-active="activeMenu" mode="horizontal" @select="handleSelect">
      <el-menu-item v-for="(data, index) in pages" :key="index" :index="data.meta.path">{{ data.meta.title }}</el-menu-item>
    </el-menu>
  </el-header>
</template>

<script>
import { pages } from '@/router/routes';

export default {
  name: 'layoutHeader',
  data() {
    return {
      activeMenu: '/index',
      pages: pages.map((data, index) => {
        const param = data.meta && data.meta.path ? {} : { meta: { title: `Page - ${index}`, path: '/index' } }
        return { ...data, ...param }
      })
    }
  },
  created() {
    const { matched = [] } = this.$route || {};
    const route = matched[0] || {};
    this.activeMenu = route.path || '/index';
  },
  methods: {
    handleSelect(key) {
      this.$router.push({ path: key });
    }
  }
}
</script>

<style lang="scss">
.layout-header {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  // box-shadow: 0 0 15px 0 rgba(0,0,0,.04)!important;
  box-shadow: 0px 0px 16px #e6e6e6;

  // border-bottom: solid 1px #e6e6e6;
  height: 60px;
  width: 100%;
  z-index: 10;
  .left {
    display: flex;
    align-items: center;
    .logo {
      height: 50px;
      margin-right: 10px;
    }
    .title {
      font-weight: bold;
      font-size: 20px;
    }
  }
}
</style>
