<template>
  <div class="tuitui-tabs">
    <div class='tab-header'>
      <div v-for='item in list' :key='item.id' class='tab-item' :data-id='item.id' @click="item.click">
        <div class='tab-name' :class="item.active ? 'active-item': 'normal'">{{item.name}}</div>
        <div v-show='item.active' class='active-bar'></div>
      </div>
    </div>
    <div class='tab-content' v-for='item in list' :key='item.id'>
      <div v-if='item.content && item.active' v-html='item.content'></div>
    </div>
  </div>
</template>
<script>

/** tabs组件
 * list 每个子项的配置
 *id: 唯一标识，必传
* name:  标题
* active: 是否活跃
* click: 点击事件函数
* content: 内容项目，非必选，用户可根据自己需求传入
 * 注意：每个子项的宽度最小150px, 即如果外层宽度是整个屏幕宽度，超过5个子项则左右滑动，如果外层宽度不足一屏，则以最小150px为准。
*/
export default {
  props: {
    list: ['Array']
  },
  data: () => {},
  mounted () {},
  methods: {}
}
</script>

<style scoped>
.tuitui-tabs .tab-header {
  display: flex;
  overflow-x: auto;
}
.tuitui-tabs .tab-header > div {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 150px;
  font-size: 32px;
  color: #999999;
}
.tuitui-tabs  .tab-name {
  padding-bottom: 20px;
}
.tuitui-tabs  .tab-item {
  display: flex;
  flex-direction: column;
  position: relative;
}
.tuitui-tabs .active-item {
  font-weight: 600;
  color: #222222;
}
.tuitui-tabs .active-bar {
  position: absolute;
  height: 6px;
  width: 56px;
  background: #3175FC;
  border-radius: 3px;
  bottom: 0;
}
</style>

