<template >
  <div class="nav-panel">
    <NavItem :dir="dir" 
    v-for="item in items"
    :active="defaultActive === item.key"
    :title="item.title" @click="() => onClickHandler(item)"/>
  </div>
</template>

<script>

const NavItem = {
  name: 'NavItem',
  props: {
    title: {
      type: String,
      default: ''
    },
    dir: {
      type: String,
      default: 'left'
    },
    active: {
      type: Boolean,
      default: false
    }
  },
  render(h) {

    return h('div', 
    {
      class: {'nav-item': true, [`nav-item__${this.dir}`]: true, 'nav-item__active': this.active },
      on: {
        click: e => this.$emit('click', e)
      }
    }, 
      [ 
        h('div', { class: 'item_content' } , [ h('span', { class: 'item_title'}, this.title) ])
      ]
    )
  }
}


export default {
  name: 'NavPanel',
  props: {
    dir: {
      type: String,
      default: 'left'
    },
    items: {
      type: Array,
      default: () => []
    },
    defaultActive: {
      type: String,
      default: ''
    }
  },
  components: {
    NavItem
  },
  data() {
    return {}
  },
  methods: {
    onClickHandler (item) {
      this.$emit('active', item)
    }
  }
}
</script>

<style scoped lang='less'>
.nav-panel {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-top: -36px;
  padding: 0px 5px;

  /deep/ .nav-item__active {
    .item_title {
      font-size: 24px;
      text-align: center;
      color: #44bbff;
      line-height: 36px;
      background-image: -webkit-linear-gradient(90deg,#177ef3 0%, #befcff 100%);;
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
    }

    .item_content {
      background: linear-gradient(179deg,rgba(1,105,178,0.00) 0%, rgba(1,117,253,0.60) 100%);
    }
  }

  

  .nav-item {
    font-size: 24px;
    text-align: center;
    font-family: DataFont;
    color: #44bbff;
    line-height: 36px;
    letter-spacing: 1.2px;
    cursor: pointer;

    /deep/ .item_content {
      padding: 1px 25px;
    }

    &:hover {
      /deep/ .item_title {
        font-size: 24px;
        text-align: center;
        color: #44bbff;
        line-height: 36px;
        background-image: -webkit-linear-gradient(90deg,#177ef3 0%, #befcff 100%);;
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
        z-index: 1;
      }
      /deep/ .item_content {
        background: linear-gradient(179deg,rgba(1,105,178,0.00) 0%, rgba(1,117,253,0.60) 100%);
      }
    }
  }

  .nav-item__left {
    background: url('@/assets/images/nav-item__left.png') no-repeat;
    background-size: 100% 100%;
  }

  .nav-item__right {
    background: url('@/assets/images/nav-item__right.png') no-repeat;
    background-size: 100% 100%;
  }
}
</style>
