<template>
  <div class="relative">
    <div
      class="bg-[#e8fff1] h-[48px] overflow-x-auto overflow-y-hidden whitespace-nowrap justify-start flex items-center [-webkit-overflow-scrolling:touch] touch-pan-x scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
      <div v-for="(item, index) in tabList" :key="item.id" :class="[
        'h-full flex-none flex items-center justify-center relative px-[12px] min-w-[68px]',
        activeIndex === index &&
        `before:content-[''] before:absolute before:left-[4px] before:top-0 before:right-[4px] before:bottom-0 before:bg-white before:rounded-t-[20px] before:[transform:perspective(40px)_rotateX(6deg)_translate(0,-1px)] before:origin-bottom before:shadow-[0_-0.5px_0_#0ccd58]`,
      ]" @click="handleTabClick(index)">
        <div class="inline-flex items-center relative z-[3]">
          <zn-icon :class="[
            'h-[20px] w-[20px] mr-[4px]',
            activeIndex === index ? 'text-[#0ccd58]' : 'text-ink-600',
          ]" :name="item.iconCode" size="20" color="opacity">
          </zn-icon>

          <span :class="[
            'text-[16px] font-medium',
            activeIndex === index ? 'text-[#0ccd58]' : 'text-ink-600',
          ]">
            {{ item.iconTitle }}
          </span>
        </div>

        <!-- 每项内的下划线指示器，通过类控制显示/隐藏 -->
        <div
          class="absolute bottom-0 left-1/2 -translate-x-1/2 h-[3px] w-[24px] bg-[#0ccd58] rounded-t-[3px] z-[3] transition-[opacity,transform] duration-200 ease-in-out"
          :class="activeIndex === index ? 'opacity-100 scale-x-100' : 'opacity-0 scale-x-[0.9]'"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import ZnIcon from "@/components/ZnIcon/index.vue";
import { commodityTypePageList } from "@/api/goods";

// Props
const props = defineProps({
  tabs: {
    type: Array,
    default: () => [
      { iconTitle: "客房", typeCode: "0", iconCode: "zn-nav-room" },
      { iconTitle: "门票", typeCode: "1", iconCode: "zn-nav-ticket" },
      { iconTitle: "餐食", typeCode: "2", iconCode: "zn-nav-meal" },
      { iconTitle: "套餐", typeCode: "3", iconCode: "zn-package" },
      { iconTitle: "文创", typeCode: "4", iconCode: "zn-package" },
    ],
  },
  defaultActive: {
    type: Number,
    default: 0,
  },
  indicatorColor: {
    type: String,
    default: "#1890ff",
  },
});

// Emits
const emit = defineEmits(["change", "update:modelValue"]);

// 响应式数据
const activeIndex = ref(props.defaultActive);
const tabList = ref([]);

// 处理Tab点击
const handleTabClick = (index) => {
  changeTabItem(index);
};

// 支持 force 参数，强制触发（即使 index 与当前相同）
const changeTabItem = (index, force = false) => {
  if (!force && activeIndex.value === index) return;
  activeIndex.value = index;

  emit("change", {
    index,
    item: tabList.value[index],
  });
  emit("update:modelValue", index);
};

// 监听tabs变化
watch(
  () => props.tabs,
  (newTabs) => {
    tabList.value = newTabs;
  },
  { deep: true },
);

// 监听defaultActive变化
watch(
  () => props.defaultActive,
  (newActive) => {
    if (newActive !== activeIndex.value) {
      activeIndex.value = newActive;
    }
  },
);

// 暴露方法
defineExpose({
  setActiveIndex: (index) => {
    if (index >= 0 && index < tabList.value.length) {
      handleTabClick(index);
    }
  },
  getActiveIndex: () => activeIndex.value,
  getActiveItem: () => tabList.value[activeIndex.value],
});

onMounted(() => {
  getCommodityTypePageList();
});

// 获取商品类型列表（示例方法，实际使用时根据需要调用）
const getCommodityTypePageList = async () => {
  const res = await commodityTypePageList({ size: 20, current: 1 });
  if (res && res.data && res.data.records) {
    tabList.value = res.data.records;
  } else {
    tabList.value = props.tabs;
  }
  // 加载完成后强制选中第一个项并通知外部
  if (tabList.value && tabList.value.length > 0) {
    changeTabItem(0, true);
  } else {
    changeTabItem(props.defaultActive, true);
  }
};
</script>
