<template>
  <u-tabbar
    v-if="show"
    :value="currentIndex"
    :show="true"
    :bg-color="style.backgroundColor"
    :border-top="style.borderTop"
    :fixed="true"
    :height="style.height"
    :list="formattedTabList"
    @change="handleTabChange"
  >
  </u-tabbar>
</template>

<script>
import tabbarConfig from "@/config/tabbar.config.js";

export default {
  name: "TabBar",
  props: {
    // 当前页面路径（可选）
    currentPath: {
      type: String,
      default: "",
    },
    // 是否显示 TabBar
    show: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      currentIndex: 0,
      tabList: tabbarConfig.tabs,
      style: tabbarConfig.style,
    };
  },
  computed: {
    // 格式化为 uview tabbar 所需格式
    formattedTabList() {
      return this.tabList.map((item) => ({
        text: item.text,
        iconPath: item.icon,
        selectedIconPath: item.activeIcon,
        pagePath: item.pagePath,
        count: item.badge || 0,
        isDot: item.dot || false,
      }));
    },
  },
  watch: {
    // 监听 currentPath 变化
    currentPath: {
      handler(newPath) {
        if (newPath) {
          this.updateActiveTab(newPath);
        }
      },
      immediate: true,
    },
  },
  mounted() {
    this.initActiveTab();
  },
  methods: {
    /**
     * 初始化激活的 tab
     */
    initActiveTab() {
      const path = this.currentPath || this.getCurrentPagePath();
      this.updateActiveTab(path);
    },

    /**
     * 更新激活的 tab
     */
    updateActiveTab(path) {
      const index = this.tabList.findIndex((item) =>
        this.isPathMatch(path, item.pagePath)
      );
      if (index !== -1) {
        this.currentIndex = index;
      }
    },

    /**
     * 路径匹配判断
     */
    isPathMatch(currentPath, targetPath) {
      const normalize = (path) => path.replace(/^\//, "");
      return normalize(currentPath) === normalize(targetPath);
    },

    /**
     * 获取当前页面路径
     */
    getCurrentPagePath() {
      const pages = getCurrentPages();
      console.log('pages',pages);
      
      if (pages.length > 0) {
        return "/" + pages[pages.length - 1].route;
      }
      return "";
    },

    /**
     * 处理 tab 切换
     */
    handleTabChange(index) {
      if (this.currentIndex === index) {
        this.$emit("reclick", this.tabList[index].pagePath, index);
        return;
      }

      const targetTab = this.tabList[index];
      if (!targetTab) return;

      this.currentIndex = index;
      this.$emit("change", targetTab.pagePath, index);

      // 跳转
      this.navigateToTab(targetTab.pagePath);
    },

    /**
     * 跳转到 tab 页面
     */
    navigateToTab(url) {
      uni.switchTab({
        url,
        fail: () => {
          // 降级方案
          uni.reLaunch({ url });
        },
      });
    },

    /**
     * 设置角标
     * @param {number} index - tab 索引
     * @param {string|number} badge - 角标内容
     */
    setBadge(index, badge) {
      if (this.tabList[index]) {
        this.$set(this.tabList[index], "badge", badge);
      }
    },

    /**
     * 显示/隐藏小红点
     * @param {number} index - tab 索引
     * @param {boolean} show - 是否显示
     */
    setDot(index, show) {
      if (this.tabList[index]) {
        this.$set(this.tabList[index], "dot", show);
      }
    },
  },
};
</script>

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

