<template>
  <div class="content">
      <!-- 顶部标签 -->
      <div class="tabs_top_content">
          <div v-for="(item,index) in titleArray" class="tabs-title" :class="activeIndex === index?'active':''" @click="changeClass(index,item)">
            {{item.name}}
          </div>
      </div>

      <!-- 具体内容 -->
      <div class="tabs_desc_content">
          <div class="tabs_desc">
            <slot></slot>
          </div>
      </div>
  </div>
</template>

<script>
  export default {
    name:'HTabs',
    data(){
      return {
        activeIndex:0,
      }
    },
    props:{
      titleArray:{
        type:Array
      },
      descArray:{
        type:Array
      },
      value:{
        type:String
      }
    },
    methods:{
      changeClass(index,item){
        this.activeIndex = index
        this.$emit('on-change',item,index)
      }
    }
  }
</script>

<style scoped lang="less">
  @font-size: 14px;
  @color: #2d8cf0;
  .active{
    color: @color;
    border-bottom: 1px solid @color;
  }

  // 顶部标签
  .content{
      font-size: @font-size;
      .tabs_top_content{
        display: flex;
        align-items: center;
        overflow: hidden;
        white-space: nowrap;
        border-bottom: 1px solid #dcdee2;
        margin-bottom: 16px;
        .tabs-title{
          transition: @color 2s;
          padding: 8px 16px;
          margin-right: 16px;
          cursor: pointer;
          box-sizing: border-box;
          height: 100%;
        }
      }
  }

</style>
