<template>
  <section :class="[c(),tabCss, cusClass]">
    <slot/>
  </section>
</template>
<script>
import {base} from '../../common/mixins'
import stabItem from './tab-item'

export default {
  name: 'SwitchTab',
  mixins: [base],
  component: {stabItem},
  props: {
    position: {
      type: String,
      default: 'top',
    },
    cusClass: {
      type: String,
      default: '',
    },
    defaultActive: {
      type: Number,
      default: 0,
    },
    showDivider: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {
      items: [],
      length: '',
      activedIndex: '',
    }
  },
  computed: {
    tabCss () {
      return this.position === 'top' ? this.c('top') : this.c('bottom')
    },
    count () {
      this.length = this.items.length
      return this.items.length
    },
    current () {
      let vm = this
      let length = (vm.items.length) - 1
      if (vm.defaultActive > length) {
        vm.index = length
      } else {
        vm.index = vm.defaultActive
      }
      return vm.index
    },
  },
  mounted () {
    let vm = this
    this.items[vm.current].$el.classList.add('activated')
  },
  methods: {
    actived (index) {
      this.activedIndex = index
      this.$emit('tabClick', index)
    },
  },
}
</script>

<style lang="less">
  .hls-switch-tab {
    width: 100%;
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: space-around;
    height: 40px;
    background-color: #fff;
    &-top {
      top: 0;
      &:after {
        .setBottomLine();
      }
    }
    &-bottom {
      bottom: 0;
      &:before {
        .setTopLine();
      }
    }

    .setTopLine(@c: rgba(0,0,0,.1)) {
      content: " ";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      height: 1px;
      border-top: 1px solid @c; /*no*/
      color: @c;
      transform-origin: 0 0;
      transform: scaleY(0.5);
    }

    .setBottomLine(@c: rgba(0,0,0,.1)) {
      content: " ";
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      height: 1px;
      border-bottom: 1px solid @c; /*no*/
      color: @c;
      transform-origin: 0 100%;
      transform: scaleY(0.5);
    }
  }

</style>
