<template lang="html">
  <div class="tab-wrapper">
    <div class="tab-content">
      <tab bar-active-color="#8da9cf" :custom-bar-width="getBarWidth">
        <tab-item active-class="active" v-for="(item, index) in list"  :key="index" :class="{'vux-1px-r': index+1!==list.length}" :selected="default_selected === item" @on-item-click="onItemClick">{{item}}</tab-item>
      </tab>
    </div>
  </div>
</template>

<script>
/**
 * [参考用法 vux tab 组件]
 *
 * [list tab 显示名称]
 * @type {Array}
 *
 * [default_selected tab 默认显示名称]
 * @type {String}
 *
 * [on-item-click 点击回调返回 index]
 */
import { Tab, TabItem } from 'vux'

export default {
  components: { Tab, TabItem },
  props: ['list', 'default_selected'],
  data () {
    return {
      getBarWidth: function (index) {
        return (index + 1) * 40 + 'px'
      }
    }
  },
  methods: {
    onItemClick (index) {
      this.$emit('on-item-click', index)
    }
  }
}
</script>

<style lang="less" scoped>
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/center.less';

.vux-tab .vux-tab-item {
  background: none;
}
.vux-1px-r:after {
  height: 50%;
  top: 30%;
}

.active {
  color: #8da9cf !important;
  border-color: #8da9cf!important;
}

.tab-wrapper {
  padding: 1rem 1rem 0 1rem;
  .tab-content {
    border-top: 1px solid #dddddf;
    border-left: 1px solid #dddddf;
    border-right: 1px solid #dddddf;
  }
}
</style>