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

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