<template>
  <section class="tab-content" @click="titleClick">
    <section class="h-tab-item">
      <div class="h-item">
        <slot/>
      </div>
    </section>
    <div v-show="showDivider" class="tab-divider"/>
  </section>
</template>

<script>
export default {
  name: 'TabItem',
  data () {
    return {}
  },
  computed: {
    showDivider () {
      return this.$parent.showDivider
    },
  },
  mounted () {
    this.$parent && this.$parent.items.push(this)
    this.$el.setAttribute('data-index', this.$parent.items.length - 1)
  },
  destroyed () {
    this.$parent && this.$parent.items.splice(this.$parent.items.indexOf(this), 1)
  },
  methods: {
    titleClick (event) {
      let vm = this
      vm.$parent.items.forEach(item => {
        item.$el.classList.remove('activated')
      })
      let clickIndex = Number(event.currentTarget.getAttribute('data-index'))
      event.currentTarget.classList.remove('activated')
      event.currentTarget.classList.add('activated')
      vm.$parent.actived(clickIndex)
    },
  },
}
</script>

<style lang="less">
  .hls-switch-tab {

    .tab-content {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .h-tab-item {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        .h-item {
          //width: 100%;
          font-size: 14px;
          height: 40px;
          color: #7c828d;
          line-height: 15px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 3px;
          border-bottom: 1px solid rgba(255,255,255,.0); /*no*/
        }

      }
      .tab-divider {
        width: 1px; /*no*/
        height: 50%;
        background-color: rgb(214, 217, 218);
      }

      &.activated {
        .h-tab-item {
          .h-item {
            color: #1e8ceb;
            border-bottom: 1px solid #1e8ceb; /*no*/
          }
        }
      }
      &:last-child {
        .tab-divider {
          width: 0px;
        }
      }
    }
  }

</style>
