<template>
  <div class="tabs-wrap">
    <div class="tabs flex">
      <div
        class="tab"
        v-for="(item,index) in list"
        :key="index"
        @click="tab(index)"
        :class="{'active':current==index}"
      >{{item}}</div>
    </div>
    <div class="tabs-cont">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    current: {
      type: [Number, String],
      default: 0
    },
    list: {
      type: Array,
      default: []
    }
  },
  methods: {
    tab(index) {
      this.$emit("update:current", index);
    }
  },
  mounted() {
    console.log(this.list)
  },
};
</script>
<style lang="less" scoped>
.tabs-wrap {
  .tabs {
    margin-bottom: 15px;
    border-bottom: 1px solid #dddddd;
    .tab {
      line-height: 36px;
      font-size: 14px;
      cursor: pointer;
      margin-bottom: -1px;

      & + .tab {
        margin-left: 20px;
      }
      &:hover {
        color: @themeColor;
      }
      &.active {
        color: @themeColor;
        border-bottom: 2px solid @themeColor;
      }
    }
  }
}
</style>