<template>
  <view class="tab-container relative">
    <view class="tab-wrapper flex flex-items-center">
      <view v-for="(item, index) in tabList" :key="item.id" :class="[
        'tab-item flex flex-items-center flex-justify-center relative',
        activeIndex === index && 'tab-item-active',
      ]" @click="handleTabClick(index)">
        <view class="tab-item-inner flex flex-items-center">
          <uni-icons :class="['icon mr-4', activeIndex === index && 'icon-active']"  fontFamily="znicons" size="20" color="opacity">
            {{ zniconsMap[item.iconCode] }}
          </uni-icons>

          <text :class="[
            'font-size-16 font-500 color-525866 ',
            activeIndex === index && 'tab-text-active',
          ]">
            {{ item.iconTitle }}
          </text>
        </view>

        <!-- 每项内的下划线指示器，通过类控制显示/隐藏 -->
        <view class="tab-item-indicator" :class="{ visible: activeIndex === index }"></view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import { zniconsMap } from "@/static/fonts/znicons";
import { commodityTypePageList } from "@/request/api/GoodsApi";

// 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>
<style lang="scss" scoped>
@import "./styles/index.scss";
</style>
