<template>
  <el-header class="layout-header">
    <div class="left">
      <img class="logo" src="/img/logo.svg" />
      <span class="title">{{ appName }}</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 {
      appName: process.env.VUE_APP_NAME,
      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;
  align-items: center;
  justify-content: space-between;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04) !important;
  height: 60px;
  width: 100%;
  z-index: 10;
  padding: 0 60px !important;
  .el-menu.el-menu--horizontal {
    border: 0;
  }
  .left {
    display: flex;
    align-items: center;
    .logo {
      height: 40px;
      padding-right: 10px;
    }
    .title {
      font-weight: bold;
      font-size: 20px;
      background-image: -webkit-linear-gradient(bottom, #333, #666);
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
</style>
