<template>
  <div class="nav-right-side">
    <div class="nav-right-side-menu">
      <div
        v-for="({ text }, index) in navItems"
        :key="text"
        :class="['nav-right-side-item', { 'active': index === activeIndex }]"
        @click="_.debounce(clickHandler, 300)(index)"
      >{{ text }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    navItems: {
      type: Array,
      default: () => [
        {
          text: '导航1'
        },
        {
          text: '导航2'
        },
        {
          text: '导航3'
        }
      ]
    },
    activeIndex: {
      type: Number,
      default: 0
    }
  },
  methods: {
    clickHandler(index) {
      if (this.activeIndex !== index) {
        this.$emit('selection-changed', index)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-right-side {
  width: 100%;
  height: 100%;

  .nav-right-side-menu {
    width: 100%;
    padding: 32px 53px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;

    .nav-right-side-item {
      height: 48px;
      border-radius: 6px;
      background-color: #f5f7fa;
      border: 1px solid #b4b7cb;
      text-align: center;
      line-height: 48px;
      color: #6f81bc;
      font-family: Microsoft YaHei;
      font-weight: bold;
      cursor: pointer;
      margin-bottom: 24px;

      &.active {
        background: linear-gradient(0deg, #777dba, #6983be);
        box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.18);
        color: #fff;
      }
    }
  }
}
</style>
