<template>
  <view class="custom-tabbar">
    <view v-for="(item, index) in list" :key="index" @click="switchTab(item)" class="tabbar-item">
      <image :src="currentPage === item.pagePath ? item.selectedIconPath : item.iconPath"
        style="width: 24px; height: 24px;" />
      <text style="font-size: 12px; margin-top: 4px;">{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        // {
        //   pagePath: "pages/home-new/index",
        //   iconPath: "/static/images/tabbar/home.png",
        //   selectedIconPath: "/static/images/tabbar/home_.png",
        //   text: "首页"
        // },
         {
          pagePath: "pages/work/index",
          iconPath: "/static/images/tabbar/work.png",
          selectedIconPath: "/static/images/tabbar/work_.png",
          text: "工作台"
        },
        {
          pagePath: "pages/myToDoList/index",
          iconPath: "/static/images/tabbar/message.png",
          selectedIconPath: "/static/images/tabbar/message_.png",
          text: "消息"
        },
       
        {
          pagePath: "pages/mine/index",
          iconPath: "/static/images/tabbar/mine.png",
          selectedIconPath: "/static/images/tabbar/mine_.png",
          text: "我的"
        }
      ],
      currentPage: ""
    };
  },
  mounted() {
    this.updateCurrentPage();
  },
  methods: {
    switchTab(item) {
      uni.switchTab({
        url: `/${item.pagePath}` // 确保路径以 "/" 开头
      });
    },
    updateCurrentPage() {
      const pages = getCurrentPages();
      if (pages.length > 0) {
        let route = pages[pages.length - 1].route;
        // 统一路径格式（如去掉 "/" 前缀）
        this.currentPage = route.startsWith('/') ? route.substring(1) : route;
      }
    },
    
    // 获取未读消息数量
    async getUnreadMessageCount() {
      try {
        // 这里需要调用实际的获取未读消息数量的接口
        // 示例接口：假设是获取待办列表的接口
        const { listCheckPendingTasks } = require('@/api/myToDoList/myToDoList.js');
        const response = await listCheckPendingTasks({ pageNum: 1, pageSize: 1 });
        
        // 假设接口返回的total字段是未读消息总数
        const unreadCount = response.total || 0;
        
        // 更新消息tab的未读数量
        const messageTab = this.list.find(item => item.text === '消息');
        if (messageTab) {
          messageTab.unreadCount = unreadCount;
        }
      } catch (error) {
        console.error('获取未读消息数量失败:', error);
      }
    }
  }
};
</script>

<style>
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  justify-content: space-around;
  background: #fff;
  padding: 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  /* 移除重复的padding设置，改为在特定条件下应用 */
}

.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
}

.icon-container {
  position: relative;
  width: 24px;
  height: 24px;
}

.badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  background-color: #F55B5D;
  border-radius: 50%;
  z-index: 10;
}

/* 为iOS Safari浏览器添加安全区域支持 */
/* 仅在独立浏览器环境中应用，避免在App嵌套环境中造成双重padding */
@media screen and (max-width: 768px) and (orientation: portrait), 
       screen and (max-width: 1024px) and (orientation: landscape) {
  /* 检测移动设备环境 */
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    /* 确保只在独立浏览器而非App WebView中应用 */
    .custom-tabbar {
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
  }
}

/* 兼容性处理 */
@supports (-webkit-touch-callout: none) and (not (min-device-width: 768px)) {
  /* 针对移动设备的WebView特殊处理 */
  .custom-tabbar {
    /* App内嵌时，使用绝对定位确保贴合底部 */
    position: absolute;
    bottom: 0;
    width: 100%;
  }
}
</style>