<template>
  <div>
    <template v-for="(item, index) in tabData">
      <div class="tap-box" :key="index">
        <div class="name">{{ item.name }}</div>
          <ul>
            <template v-for="(list, listIndex) in item.arrItem">
              <li :class="listIndex === tapIndex ? 'active' : ''" :key="listIndex" @click="selFindSelect(listIndex)">{{ list.name }}</li>
            </template>
          </ul>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tapIndex: 0
    }
  },
  props: ['tabData'],
  methods: {
    selFindSelect (e) {
      this.tapIndex = e
    }
  }
}
</script>

<style lang="scss" scoped>
.tap-box{
  display: flex;
  align-items: center;
  .name{
    color:rgba(51,51,51,1);
    font-size: 30px;
    line-height: 100%;
  }
  ul{
    margin: 0;
    padding: 0;
    margin-left: 20px;
    display: flex;
    li:last-child{
      border: none;
    }
    li.active{
      color: #2994EA;
    }
    li{
      font-size:24px;
      color: #999;
      list-style: none;
      padding: 0 20px;
      border-right: 1px solid rgba(204,204,204,1);
    }
  }
}
</style>
