<template>
  <section class="AiTabPanes">
    <div class="item" :class="{active:value==i}" v-for="(item, i) in tabs" :key="i"
         @click="handleClick(item,i)">{{ item }}
    </div>
  </section>
</template>

<script>
export default {
  name: "AiTabPanes",
  data() {
    return {}
  },
  model: {
    prop: "value",
    event: "change"
  },
  props: {
    value: {default: ""},
    tabs: {default: () => []}
  },
  methods: {
    handleClick(item, index) {
      this.$emit("change", index)
      this.$emit("click", item)
    }
  }
}
</script>

<style lang="scss" scoped>
.AiTabPanes {
  width: 100vw;
  height: 96px;
  line-height: 96px;
  background: #3975C6;
  display: flex;

  .item {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #CDDCF0;

    &.active {
      color: #fff;
      font-weight: 500;
      position: relative;

      &:after {
        content: " ";
        width: 48px;
        height: 4px;
        background: #FFF;
        position: absolute;
        bottom: 14px;
        left: 50%;
        margin-left: -24px;
      }
    }
  }
}
</style>
