<template lang="html">
  <div id="{{id}}" data-cpt-type="menu-tabs-box" class="menu-tabs-box">
    <div class="pure-menu pure-menu-horizontal">
        <ul class="pure-menu-list">
          <li v-for="tab in builtTabs" @click="clickOnTab" class="pure-menu-item">
            <a href="#" data-index="{{tab.index}}" :class=" tab.selected ? 'pure-menu-link selected':'pure-menu-link' ">{{tab.text}}</a>
          </li>
        </ul>
    </div>

    <div class="tab-content">
      <slot><slot>
    </div>
  </div>
</template>

<style lang="sass">
   @import "../../styles/core/base.scss";

  .menu-tabs-box{
    margin-top: 32px;
    border: 1px solid #ccc;
    padding: 20px;
    position: relative;

    > .pure-menu {
        position: absolute;
        left: -1px;
        top: 0;
        transform: translate(0,-100%);

        .pure-menu-item{
          margin-right:4px;
        }
        .pure-menu-item a.selected {
            border: 1px solid #ccc;
            border-bottom: none;
            color: rgb(0, 120, 231);
            background-color: #fff;
        }
    }
  }
</style>

<script>

function toggleTabContent(container,index) {
  var tabContents = container.querySelector('.tab-content').children;

  [].map.call(tabContents,(contentDom,i)=>{
    contentDom.style.display = i===index ? 'block' : 'none';
  })
}

export default {
  props:{
    id:String,
    tabs:{
      type:Array
    }
  },
  data: function () {
    return {
      selectIndex:0,
    }
  },
  computed: {
    builtTabs(){
      return this.tabs.map((text,i)=>{
        return {
          index:i,
          text,
          selected:i===this.selectIndex
        }
      })
    }
  },
  ready: function () {},
  attached: function () {
    toggleTabContent(this.$el,this.selectIndex);
  },
  methods: {
    clickOnTab(e){
      this.selectIndex = parseInt(e.target.dataset.index);

      toggleTabContent(this.$el,this.selectIndex);
    }
  },
  components: {}
}
</script>
