<template>
  <header class="app-header">
    <ul class="menu">
      <template v-for="(item, index) in menuList">
        {{index === 0 ? '' : '|'}}<li :class="{ active: path.includes(item.path)}" :key="index" @click="menuSelect(item)">{{item.label}}</li>
      </template>
    </ul>
  </header>
</template>

<script>
export default {
  name: 'AppHeader',
  data() {
    return {
      menuList: [
        { label: '首页', path: '/home' },
        { label: '产品分析', path: '/product-analysis' },
        { label: '用户研究', path: '/user-study' },
        { label: '营销工具使用', path: '/market-tools' },
        { label: '作品展示', path: '/works-show' }
      ]
    }
  },
  computed: {
    path() {
      return this.$route.path
    }
  },
  watch: {
    path: {
      handler(nv) {
        console.log(nv)
      },
      immediate: true
    }
  },
  methods: {
    menuSelect(item) {
      this.$router.push(item.path)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-header{
  // width:1360px;
  padding:30px 33px 0;
}
.menu{
  width: 780px;
  height:56px;
  background:#68B8A4;
  border-radius:28px;
  display:flex;
  font-size:18px;
  line-height:56px;
  color:#fff;
}
.menu li{
  padding:0 40px;
  cursor: pointer;
}
.menu li.active{
  font-weight: bold;
}
</style>
