<template>
  <view class="tabs_content">
    <view v-for="(i, index) in props?.list" :class="`label ${index === props?.current ? 'actives' : ''}`"
      :key="`item_${index}`" @click="handleClick(index, i)">
      {{ i?.label }}
      <view class="border_bottom"> </view>
    </view>
  </view>
</template>
<script setup lang="ts">
const props = defineProps(['current', 'list'])
const emit = defineEmits(['onChange'])
const handleClick = (idx: number, e: { value: string }) => {
  emit('onChange', idx, e)
}
</script>
<style lang="scss">
.tabs_content {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  height: 50rpx;
  padding: 30rpx 0 20rpx 0;
}

.label {
  font-size: 30rpx;
  flex: 1;
  text-align: center;
  height: 50rpx;
  line-height: 50rpx;
  color: #666;
  margin-right: 30rpx;

  &:last-child {
    margin-right: 0;
  }
}

.actives {
  color: #000;

  .border_bottom {
    width: 20%;
    height: 8rpx;
    margin: 0 auto;
    border-radius: 8rpx;
    margin-top: 10rpx;
    background-color: #0082fa;
  }
}
</style>
