<template>
  <div class="nav_bar">
    <div
      v-for="item in navItems"
      v-bind:key="item.value"
      class="nav_item"
      :class="{
        nav_item_checked: (item.name ? item.name : item.value) == modelValue,
        nav_item_unchecked: (item.name ? item.name : item.value) != modelValue,
      }"
      @click="onItemClick(item)"
    >
      <a v-if="item.link" :href="item.link">
        <span :style="size ? 'font-size:' + size + ';' : ''">{{
          $t(item.value)
        }}</span>
      </a>
      <span
        v-else
        :style="size ? 'font-size:' + size + ';' : ''"
        class="pointerCursor"
        >{{ $t(item.value) }}</span
      >
      <div
        v-if="(item.name ? item.name : item.value) == modelValue"
        class="underline"
      ></div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.nav_bar {
  display: flex;
}
.nav_item {
  display: flex;
  span {
    font-size: 16px;
    line-height: 24px;
  }
  a {
    text-decoration: none;
  }
  font-style: normal;
  flex-direction: column;
  padding: 8px;
  margin-left: 8px;
  margin-right: 8px;
  user-select: none;
}
.underline {
  width: 24px;
  border: 2px solid $primary;
  border-radius: 4px;
  background-color: $primary;
}
.pointerCursor {
  cursor: pointer;
}
.nav_item_unchecked {
  font-weight: 550;
  span {
    color: rgba($color-text, 0.6);
  }
  a:visited {
    color: rgba($color-text, 0.6);
  }
}
.nav_item_unchecked:hover {
  font-weight: 600;
  span {
    color: rgba($color-text, 0.8);
  }
  a:visited {
    color: rgba($color-text, 0.8);
  }
}
.nav_item_checked {
  font-weight: 600;
  span {
    color: $color-text;
  }
  a:visited {
    color: $color-text;
  }
}
@media only screen and (max-width: 600px) {
  .nav_bar {
    display: none;
  }
}
</style>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { NavItem } from './models';
export default defineComponent({
  name: 'HeaderNav',
  data() {
    return {};
  },
  props: {
    navItems: {
      type: Array as PropType<NavItem[]>,
      default: () => [],
    },
    size: {
      type: String,
      default: '',
    },
    modelValue: {
      type: String,
    },
  },
  emits: ['update:modelValue'],
  methods: {
    onItemClick(item: NavItem) {
      this.$emit('update:modelValue', item.name ? item.name : item.value);
    },
  },
  created() {
    // this.accountName = localStorage.getItem('bgsub_accountName');
    // this.interID = setInterval(() => {
    //   this.accountName = localStorage.getItem('bgsub_accountName');
    // }, 3000) as unknown as number;
  },
  unmounted() {
    // clearInterval(this.interID);
  },
});
</script>
