<template>
  <div class="nav-main">
    <span
      v-for="nav in navs"
      :key="nav.id"
      class="nav-span"
      :class="{ 'nav-active': activeNav === nav.id }"
    >
      <a
        class="nav-link"
        @click="toggleNav(nav)"
      >
        <span class="nav-icon">
          <!-- <i :class="['iconfont-bigscreen', nav.icon]" /> -->
        </span>
        {{ nav.name }}
      </a>
    </span>
    <span class="nav-span nav-span-last" />
  </div>
</template>

<script lang='ts'>
export default {
  name: 'NavMain',
  components: {},
  data () {
    return {
      nc: null,
      activeNav: 0
    }
  },
  props: {
    navs: {
      type: Array,
      required: true
    }
  },
  watch: {
    $route () {
      const nav = this.navs.find(m => m.path === this.$route.path)
      if (nav) {
        this.activeNav = nav.id
      }
    }
  },
  mounted () {
    const nav = this.navs.find(m => m.path === this.$route.path)
    this.activeNav = nav ? nav.id : 0
  },
  beforeDestroy () {
  },
  methods: {
    toggleNav (nav) {
      this.activeNav = nav.id
      this.$emit('change', nav)
    }
  }

}
</script>

<style lang="scss" scoped>
.nav-main {
  z-index: 10;
  display: flex;
  top: 30px;
  position: sticky;
  width: 100%;
  margin-top: 109px;
  min-width: 1024px;
  user-select: none;

  .nav-span {
    position: relative;
    top: 1px;
    // background-image: url('./images/line.png');
    background-repeat: repeat-x;
    background-position: 0 34px;

    .nav-link {
      display: flex;
      align-items: center;
      transition: color 0.2s;
      text-decoration: none !important;
      color: var(--bs-el-title);
      width: auto;
      min-width: 140px;
      line-height: 40px;
      font-size: 14px;
      text-align: left;
      cursor: pointer;
      padding: 0 40px;

      &.nav-active,
      &:hover {
        color: var(--bs-el-text) !important;
      }
    }

    .nav-icon {
      margin-right: 5px;
    }

    &.nav-active {
      background-color: var(--bs-background-1);
      &:after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--bs-el-color-primary);
      }
      // background-image: url('./images/tab.png');
      // background-size: 100% 100%;
      // background-repeat: no-repeat;
      // background-position: center bottom;
      /* border-bottom: 1px solid var(--bs-background-1); */
      /* background-color: var(--bs-background-1) */
    }

  }

  .nav-span-last {
    flex: 1;
  }
}
</style>