<template>
  <view class="tabbar">
    <!-- 调试信息：显示当前可见的tabs -->
    <view style="display: none;">
      DEBUG: visibleTabs length: {{ visibleTabs.length }},
      tabs: {{ visibleTabs.map(t => t.text).join(', ') }},
      furnitureTabs length: {{ furnitureTabs.length }},
      furnitureTabs: {{ furnitureTabs.map(t => t.text).join(', ') }},
      roles: {{ roles.join(', ') }}
    </view>

    <!-- 强制显示所有家具角色的tab -->
    <view
      v-for="item in furnitureTabs"
      :key="item.key"
      class="tabbar-item"
      :class="{ active: currentPath === item.pagePath }"
      @click="switchTab(item)"
    >
      <image class="tabbar-icon" :src="currentPath === item.pagePath ? item.selectedIconPath : item.iconPath" />
      <text class="tabbar-text">{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
// 直接在全局作用域添加调试代码，确保能执行
console.log('CUSTOM TABBAR FILE LOADED - THIS MUST SHOW');

export default {
  data() {
    return {
      roleName: '',
      roles: [],
      currentPath: '',
      allTabs: [
      {
        key: 'furniture_customer',
        text: '客户',
        pagePath: 'pages-subpackage/furniture_customer/furniture_customer',
        iconPath: '/static/tabbar/customer.png',
        selectedIconPath: '/static/tabbar/customer_active.png',
      },
      {
        key: 'ucenter',
        text: '我的',
        pagePath: 'pages/ucenter/ucenter',
        iconPath: '/static/tabbar/me.png',
        selectedIconPath: '/static/tabbar/me_active.png',
      },
        // 已从导航中移除，但保留代码
        // {
        //   key: 'champion',
        //   text: '销冠',
        //   pagePath: '/pages/champion/champion',
        //   iconPath: '/static/tabbar/insight.png',
        //   selectedIconPath: '/static/tabbar/insight_active.png',
        // },
        // {
        //   key: 'workspace',
        //   text: '工作台',
        //   pagePath: '/pages/workspace/workspace',
        //   iconPath: '/static/tabbar/workspace.png',
        //   selectedIconPath: '/static/tabbar/workspace_active.png',
        // },
        {
          key: 'ucenter',
          text: '我的',
          pagePath: '/pages/ucenter/ucenter',
          iconPath: '/static/tabbar/me.png',
          selectedIconPath: '/static/tabbar/me_active.png',
        },
        {
          key: 'workbench',
          text: '工作台',
          pagePath: '/pages/workbench/workbench',
          iconPath: '/static/tabbar/team.png',
          selectedIconPath: '/static/tabbar/team_active.png',
        },
        {
          key: 'meeting_summary',
          text: '总结和统计',
          pagePath: '/pages-subpackage/meeting_summary/meeting_summary',
          iconPath: '/static/tabbar/insight.png',
          selectedIconPath: '/static/tabbar/insight_active.png',
        },
      ],
    };
  },
    computed: {
    furnitureTabs() {
      // 与 pages.json 的 tabBar 一致：工作台、我的
      return [
        {
          key: 'workbench',
          text: '工作台',
          pagePath: '/pages/workbench/workbench',
          iconPath: '/static/tabbar/team.png',
          selectedIconPath: '/static/tabbar/team_active.png',
        },
        {
          key: 'ucenter',
          text: '我的',
          pagePath: '/pages/ucenter/ucenter',
          iconPath: '/static/tabbar/me.png',
          selectedIconPath: '/static/tabbar/me_active.png',
        },
      ];
    },

    visibleTabs() {
      console.log('=== CUSTOM TABBAR VISIBLE TABS CALCULATED ===');
      console.log('VISIBLE TABS CALC - THIS MUST SHOW IN H5');

      // 简化逻辑：直接返回家具相关的tabs，跳过权限检查
      const furnitureKeys = ['workbench', 'ucenter'];
      const result = furnitureKeys.map(key => {
        return this.allTabs.find(tab => tab.key === key);
      }).filter(Boolean);

      console.log('[TabBar][visibleTabs] 直接返回家具tabs:', result.map(t => t.key), 'texts:', result.map(t => t.text));
      return result;
    },
  },
  created() {
    console.log('=== CUSTOM TABBAR COMPONENT CREATED ===');
    console.log('CUSTOM TABBAR CREATED - THIS MUST SHOW IN H5');
    this.refreshRole();
    this.updateActivePath();
  },
  mounted() {
    console.log('=== CUSTOM TABBAR COMPONENT MOUNTED ===');
    console.log('CUSTOM TABBAR MOUNTED - THIS MUST SHOW IN CONSOLE');

    // 强制执行，不依赖条件编译
    this.forceH5TabBarSetup();

    // 监听外部刷新事件（登录后、页面切换时可触发）
    uni.$on('tabbar:refresh', this.handleExternalRefresh);
    // 初始化时同步一次
    this.handleExternalRefresh();

    // H5平台：额外处理页面刷新后的显示问题
    // #ifdef H5
    // 监听页面显示事件，确保刷新后tabBar正确显示
    uni.on('onShow', () => {
      setTimeout(() => {
        console.log('H5: 页面显示事件触发，刷新tabBar');
        this.handleExternalRefresh();
        this.forceH5TabBarSetup();
      }, 300);
    });

    // 监听浏览器刷新事件
    if (typeof window !== 'undefined') {
      window.addEventListener('load', () => {
        setTimeout(() => {
          console.log('H5: 页面加载完成，刷新tabBar');
          this.handleExternalRefresh();
          this.forceH5TabBarSetup();
        }, 500);
      });
    }
    // #endif
  },
  beforeDestroy() {
    uni.$off('tabbar:refresh', this.handleExternalRefresh);
  },
  methods: {
    refreshRole() {
      try {
        // 角色来源优先级：单独存储的 roleName > 登录响应里的 roleName
        const storedRole = uni.getStorageSync('backend-role-name') || '';
        const loginResp = uni.getStorageSync('backend-login-response') || {};
        const respRole = loginResp.roleName || '';

        // 兼容后端返回大小写/空格/多角色逗号分隔的情况
        const normalize = (val) =>
          typeof val === 'string'
            ? val
                .split(',')
                .map((s) => s.trim().toLowerCase())
                .filter(Boolean)
            : [];

        const roles = [
          ...normalize(storedRole),
          ...normalize(respRole),
        ];

        // 角色判定
        const hasEdu = roles.includes('speaking_training_teacher');
        const hasStudent = roles.includes('speaking_training_students');
        this.roles = roles;
        this.roleName = hasEdu ? 'speaking_training_teacher' : hasStudent ? 'speaking_training_students' : (roles[0] || '');

        console.log('[TabBar][role] storedRole:', storedRole, 'respRole:', respRole, 'normalized:', roles, 'hasEdu:', hasEdu, 'hasStudent:', hasStudent, 'finalRoleName:', this.roleName);
        // #ifdef H5
        // H5 平台自定义 tabBar 无法生效，仍使用原生 DOM；这里额外做一次 DOM 显隐
        console.log('[TabBar][H5] refreshRole completed, will call toggleNativeTabs');
        // 注意：不在refreshRole中直接调用，而是在setupH5TabBar中处理
        // #endif
      } catch (e) {
        console.warn('读取角色失败:', e);
      }
    },
    updateActivePath() {
      const pages = getCurrentPages();
      const currentPage = pages[pages.length - 1];
      // currentPage.route 不带前导斜杠
      this.currentPath = currentPage && currentPage.route ? `/${currentPage.route}` : '';
    },
    switchTab(item) {
      // 切换前刷新一次角色，防止角色变更后仍看到教务/作业等
      this.refreshRole();
      const allowedKeys = this.getAllowedKeys();
      if (!allowedKeys.includes(item.key)) {
        uni.showToast({ title: '当前账号无此模块权限', icon: 'none', duration: 1200 });
        console.warn('[TabBar][block-switch]', 'key:', item.key, 'path:', item.pagePath, 'allowed:', allowedKeys, 'roles:', this.roles);
        return;
      }
      if (this.currentPath === item.pagePath) return;
      
      // uni.switchTab 需要相对路径（去掉前导斜杠）
      const url = item.pagePath.startsWith('/') ? item.pagePath.substring(1) : item.pagePath;
      
      uni.switchTab({
        url: url,
        success: () => {
          console.log('[TabBar][switchTab] success:', url);
          this.updateActivePath();
        },
        fail: (err) => {
          console.error('[TabBar][switchTab] fail:', err, 'url:', url);
          // 如果 switchTab 失败，尝试使用 reLaunch（适用于 tabBar 页面）
          uni.reLaunch({
            url: url,
            fail: (err2) => {
              console.error('[TabBar][reLaunch] fail:', err2, 'url:', url);
              uni.showToast({ 
                title: '页面跳转失败，请检查页面配置', 
                icon: 'none', 
                duration: 2000 
              });
            },
            success: () => {
              this.updateActivePath();
            }
          });
        },
        complete: () => {
          // 延迟更新，确保页面切换完成
          setTimeout(() => {
            this.updateActivePath();
          }, 100);
        },
      });
    },
    handleExternalRefresh() {
      // 每次收到事件时重新读取角色并刷新选中态
      this.refreshRole();
      this.updateActivePath();

      console.log('[TabBar][refresh] currentPath:', this.currentPath, 'roleName:', this.roleName, 'visibleKeys:', this.visibleTabs.map(t => t.key), 'roles:', this.roles);
    },
    getAllowedKeys() {
      console.log('=== CUSTOM TABBAR GET ALLOWED KEYS CALLED ===');
      console.log('GET ALLOWED KEYS - 简化版本，总是返回家具相关tabs');

      // 简化逻辑：总是返回家具相关的tabs
      const furnitureTabs = ['workbench', 'ucenter'];
      console.log('[TabBar][allowed] 简化逻辑 ->', furnitureTabs);
      return furnitureTabs;
    },
    // #ifdef H5
    toggleNativeTabs() {
      // H5 平台自定义 tabbar 不生效，直接根据角色显隐原生 tabbar 项
      // 当前位置顺序（与 pages.json 的 tabBar.list 一致）：工作台、我的…
      const ORDER = ['workbench', 'ucenter', 'reception', 'customer', 'team', 'meeting_summary', 'common_begin_reception'];
      const allowed = this.getAllowedKeys();
      // 限制重试次数，防止渲染时机未就绪
      this._h5TabRetries = (this._h5TabRetries || 0) + 1;
      try {
        const items = document.querySelectorAll('.uni-tabbar .uni-tabbar__item');
        if (!items || !items.length) {
          // 原生 tabbar 可能尚未渲染，稍后重试一次
          if (this._h5TabRetries <= 10) {
            setTimeout(() => this.toggleNativeTabs(), 150);
          } else {
            console.warn('[TabBar][H5 DOM] retry limit reached, allowed:', allowed.join(','));
          }
          return;
        }
        ORDER.forEach((key, idx) => {
          const node = items[idx];
          if (!node) return;
          node.style.display = allowed.includes(key) ? '' : 'none';
        });
        console.log('[TabBar][H5 DOM] allowed:', allowed.join(','), 'retries:', this._h5TabRetries);
        this._h5TabRetries = 0;
      } catch (e) {
        console.warn('[TabBar][H5 DOM] toggle tabs failed:', e);
      }
    },
    isInTabBar(pagePath) {
      // 检查页面路径是否在原生tabBar配置中
      const tabBarList = [
        'pages/workbench/workbench',
        'pages/ucenter/ucenter',
      ];
      const normalizedPath = pagePath.startsWith('/') ? pagePath.substring(1) : pagePath;
      const result = tabBarList.includes(normalizedPath);
      console.log('[TabBar][isInTabBar]', { pagePath, normalizedPath, tabBarList, result });
      return result;
    },
    forceH5TabBarSetup() {
      console.log('=== FORCE H5 TABBAR SETUP CALLED ===');

      // 立即执行toggleNativeTabs
      setTimeout(() => {
        console.log('FORCE: Executing toggleNativeTabs immediately');
        this.forceToggleNativeTabs();
      }, 100);

      // 多次延迟执行
      [500, 1000, 2000, 3000, 5000].forEach((delay, index) => {
        setTimeout(() => {
          console.log(`FORCE: Delayed execution ${index + 1} after ${delay}ms`);
          this.forceToggleNativeTabs();
        }, delay);
      });
    },

    forceToggleNativeTabs() {
      console.log('=== FORCE TOGGLE NATIVE TABS START ===');

      try {
        // 获取允许的tab
        const allowed = this.getAllowedKeys();
        console.log('FORCE: Current roles:', this.roles);
        console.log('FORCE: Allowed keys:', allowed);

        // 简化DOM查找 - 直接查找所有可能的tabBar元素
        const allElements = document.querySelectorAll('*');
        const tabElements = Array.from(allElements).filter(el =>
          el.textContent && (
            el.textContent.includes('工作台') ||
            el.textContent.includes('我的')
          )
        );

        console.log('FORCE: Found tab elements with text:', tabElements.length);
        tabElements.forEach((el, idx) => {
          console.log(`FORCE: Element ${idx}:`, {
            tag: el.tagName,
            class: el.className,
            text: el.textContent,
            currentDisplay: el.style.display,
            computedDisplay: window.getComputedStyle(el).display
          });
        });

        if (tabElements.length === 0) {
          console.warn('FORCE: No tab elements found! Looking for containers...');

          // 查找可能的容器
          const containers = document.querySelectorAll('div, nav, section');
          const possibleContainers = Array.from(containers).filter(el =>
            el.children && el.children.length >= 4
          );

          console.log('FORCE: Possible containers:', possibleContainers.length);
          possibleContainers.forEach((container, idx) => {
            console.log(`FORCE: Container ${idx}:`, {
              tag: container.tagName,
              class: container.className,
              children: container.children.length
            });
          });

          return;
        }

        // 按文本内容排序：工作台、我的
        const sortedElements = tabElements.sort((a, b) => {
          const order = ['工作台', '我的'];
          const aIndex = order.findIndex(text => a.textContent.includes(text));
          const bIndex = order.findIndex(text => b.textContent.includes(text));
          return aIndex - bIndex;
        });

        console.log('FORCE: Processing sorted elements...');

        // 处理每个元素
        sortedElements.forEach((element, index) => {
          const keyMap = ['workbench', 'ucenter'];
          const key = keyMap[index];
          const shouldShow = allowed.includes(key);

          console.log(`FORCE: Processing ${key} (${element.textContent}): shouldShow=${shouldShow}`);

          if (shouldShow) {
            element.style.display = '';
            element.style.visibility = 'visible';
            // 确保父元素也可见
            let parent = element.parentElement;
            while (parent) {
              parent.style.display = '';
              parent.style.visibility = 'visible';
              parent = parent.parentElement;
            }
            console.log(`FORCE: SHOWED ${key}`);
          } else {
            element.style.display = 'none';
            element.style.visibility = 'hidden';
            console.log(`FORCE: HID ${key}`);
          }
        });

        console.log('=== FORCE TOGGLE NATIVE TABS END ===');

      } catch (e) {
        console.error('FORCE: Error in forceToggleNativeTabs:', e);
      }
    },

    // #endif
  },
};
</script>

<style>
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52px;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom);
}

.tabbar-item {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #7a7e83;
  font-size: 12px;
}

.tabbar-item.active {
  color: #007aff;
}

.tabbar-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}

.tabbar-text {
  line-height: 16px;
}
</style>

