<template>
  <view class="top-tabs">
    <view
      v-for="tab in tabs"
      :key="tab.value"
      class="tab"
      :class="{active: tab.value === modelValue}"
      @click="$emit('update:modelValue', tab.value)"
    >
      {{ tab.label }}
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  tabs: {
    type: Array,
    required: true,
    default: () => []
  },
  modelValue: {
    type: [String, Number],
    required: true
  }
});
const emit = defineEmits(['update:modelValue']);
</script>

<style scoped lang="scss">
.top-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  background: #fff;
}
.tab {
  flex: 1;
  padding: 24rpx 0 18rpx 0;
  text-align: center;
  font-size: 15px;
  color: #888;
  position: relative;
  transition: color .2s;
}
.tab.active {
  color: #2885ff;
  font-weight: 600;
}
.tab.active::after {
  content: '';
  display: block;
  position: absolute;
  left: 25%;
  right: 25%;
  height: 4rpx;
  border-radius: 3rpx;
  background: #2885ff;
  bottom: 0;
}
</style>
