<template>
  <view class='tab-container'>
    <view v-for='(item, index) in titles' :key='index' class='tab-item' :class='{"tab-item-active":currentIndex==index}'
          :style='{"flex": fixed?1:0,
          "min-width":fixed?"150rpx":"auto",
            "color": currentIndex==index?itemActiveColor:itemColor}'
          @click.stop='onChange(index)'>
      <text>{{ item }}</text>
      <view class='indicator' v-if='currentIndex==index' :style='{
        background: indicatorColor,
      }' />
    </view>
  </view>
</template>

<script lang='ts' setup>
defineProps({
  titles: {
    type: Object as PropType<string[]>,
    default: ''
  },

  fixed: {
    type: Boolean,
    default: true
  }
  ,
  itemColor: {
    type: String,
    default: '#666666'
  },
  itemActiveColor: {
    type: String,
    default: '#333333'
  },
  indicatorColor: {
    type: String,
    default: '#333333'
  }
});

const emits = defineEmits(['change']);
const currentIndex = ref<number>(0);

const onChange = (index: number) => {
  currentIndex.value = index;
  emits('change', index);
};
</script>

<style lang='scss' scoped>
.tab-container {
  display: flex;
  flex-direction: row;
  background: #FFFFFF;
  height: 85rpx;
  align-items: center;

  .tab-item {
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: 30rpx;
    justify-content: center;
    align-items: center;
  }

  .tab-item-active {
    @extend .tab-item;
    font-size: 34rpx;

    .indicator {
      width: 68rpx;
      height: 6rpx;
      margin-top: 13rpx;
    }
  }
}
</style>
