<template>
  <div class="flex space-x-20">
    <div
      v-for="(item, index) in tabsData"
      :key="item"
      class="relative h-40 cursor-pointer px-5"
      @click="handleClick(item, index)"
    >
      <span
        class="transition-all"
        :class="[
          currentIndex === index
            ? 'font-semibold text-base text-[#FD9A00]'
            : 'font-normal text-sm text-[#666666B2]',
        ]"
        >{{ item }}</span
      >
      <div
        class="absolute bottom-10 left-1/2 -translate-x-1/2 w-25 h-2 transition-all"
        :class="currentIndex === index ? 'bg-[#FD9A00]' : 'bg-white '"
      ></div>
    </div>
  </div>
</template>

<script setup>
const emit = defineEmits(["change"]);
const tabsData = ["行程路线", "费用说明", "预定须知"];
const currentIndex = ref(0);

function handleClick(item, index) {
  currentIndex.value = index;
  emit("change", index);
}
</script>

<style lang="scss" scoped></style>
