<template>
  <div class="header">
    <div class="headline">深圳泥头车管理平台</div>
    <ul class="menu">
      <li v-for="link in headerRouteLinkList" :key="link.path" :class="classFilter(link.path)">
        <router-link :to="link.path">{{ link.nameCN }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
  import { defineComponent, computed } from "vue";
  import { useRoute } from "vue-router";
  import { headerRouteLinkList } from "@/router/routes";

  export default defineComponent({
    setup() {
      const route = useRoute();

      /**
       * 当前路由path
       */
      const currentPath = computed(() => route.path);

      /**
       * link class filter
       */
      const classFilter = (path: string) => {
        return currentPath.value === path ? "active" : "deactive";
      };
      return {
        headerRouteLinkList,
        currentPath,
        classFilter,
      };
    },
  });
</script>

<style lang="less" scoped>
  .header {
    display: flex;
    display: none;
    align-items: center;
    width: 100%;
    height: 64px;
    background: #141731;
    color: #fff;

    a {
      color: #fff;
    }

    .headline {
      width: 334px;
      height: 100%;
      font-weight: 400;
      font-size: 28px;
      line-height: 64px;
    }
    .menu {
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 24px;
      padding: 0 20px;
      margin: 0;
      padding: 0;
      li {
        margin: 0 20px;
        opacity: 0.6;
        &.active {
          opacity: 1;
        }
      }
    }
  }
</style>
