<template>
  <view class="tabs-container">
    <view class="tabs-wrapper">
      <view
        v-for="(tab, index) in tabs"
        :key="index"
        class="tab-item"
        :class="{ active: currentIndex === index }"
        @click="handleTabClick(index)"
      >
        <text class="tab-text">{{ tab }}</text>
        <view class="tab-line" v-if="currentIndex === index"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CustomTabs',
  props: {
    tabs: {
      type: Array,
      default: () => []
    },
    current: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentIndex: this.current
    };
  },
  watch: {
    current(val) {
      this.currentIndex = val;
    }
  },
  methods: {
    handleTabClick(index) {
      this.currentIndex = index;
      this.$emit('change', index);
    }
  }
};
</script>

<style lang="scss" scoped>
.tabs-container {
  background-color: #fff;
}

.tabs-wrapper {
  display: flex;
  align-items: center;
  padding: 0 30rpx;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx 0;
  position: relative;
}

.tab-text {
  font-size: 32rpx;
  color: #666666;
  transition: all 0.3s;
}

.tab-item.active .tab-text {
  color: #333333;
  font-weight: bold;
}

.tab-line {
  width: 60rpx;
  height: 6rpx;
  background-color: #C93639;
  border-radius: 3rpx;
  position: absolute;
  bottom: 0;
}
</style>
