<template>
  <view class="tabbar">
    <view
      v-for="item in visibleTabs"
      :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>
export default {
  data() {
    return {
      roleName: '',
      roles: [],
      currentPath: '',
      allTabs: [
        {
          key: 'reception',
          text: '接待',
          pagePath: '/pages/reception/reception',
          iconPath: '/static/tabbar/reception.png',
          selectedIconPath: '/static/tabbar/reception_active.png',
        },
        {
          key: 'customer',
          text: '客户',
          pagePath: '/pages/customer/customer',
          iconPath: '/static/tabbar/customer.png',
          selectedIconPath: '/static/tabbar/customer_active.png',
        },
        {
          key: 'team',
          text: '团队',
          pagePath: '/pages/team/team',
          iconPath: '/static/tabbar/team.png',
          selectedIconPath: '/static/tabbar/team_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: 'meeting_summary',
          text: '总结和统计',
          pagePath: '/pages/meeting_summary/meeting_summary',
          iconPath: '/static/tabbar/insight.png',
          selectedIconPath: '/static/tabbar/insight_active.png',
        },
        {
          key: 'furniture_reception',
          text: '接待',
          pagePath: '/pages/furniture_reception/furniture_reception',
          iconPath: '/static/tabbar/reception.png',
          selectedIconPath: '/static/tabbar/reception_active.png',
        },
        {
          key: 'common_begin_reception',
          text: '开始接待',
          pagePath: '/pages/furniture_reception/common_begin_reception',
          iconPath: '/static/tabbar/reception.png',
          selectedIconPath: '/static/tabbar/reception_active.png',
        },
        {
          key: 'furniture_customer',
          text: '客户',
          pagePath: '/pages/furniture_customer/furniture_customer',
          iconPath: '/static/tabbar/customer.png',
          selectedIconPath: '/static/tabbar/customer_active.png',
        },
        {
          key: 'furniture_top_sales',
          text: '销冠',
          pagePath: '/pages/furniture_top_sales/furniture_top_sales',
          iconPath: '/static/tabbar/insight.png',
          selectedIconPath: '/static/tabbar/insight_active.png',
        },
      ],
    };
  },
  computed: {
    visibleTabs() {
      const allowedKeys = this.getAllowedKeys();
      console.log('[TabBar][visibleTabs] STEP1 - getAllowedKeys returned:', JSON.stringify(allowedKeys));
      
      // 创建 key 到 tab 的映射
      const tabMap = {};
      this.allTabs.forEach(tab => {
        tabMap[tab.key] = tab;
      });
      
      // 强制将 ucenter 移到最后一个位置：先收集所有非 ucenter 的 keys，然后添加 ucenter
      const otherKeys = [];
      let hasUcenter = false;
      allowedKeys.forEach(key => {
        if (key !== 'ucenter') {
          otherKeys.push(key);
        } else {
          hasUcenter = true;
        }
      });
      console.log('[TabBar][visibleTabs] STEP2 - after filtering, otherKeys:', JSON.stringify(otherKeys), 'hasUcenter:', hasUcenter);
      
      // 如果有 ucenter，将其添加到最后一个位置
      const finalKeys = hasUcenter ? [...otherKeys, 'ucenter'] : otherKeys;
      console.log('[TabBar][visibleTabs] STEP3 - finalKeys after moving ucenter to end:', JSON.stringify(finalKeys));
      
      // 按照排序后的 keys 顺序返回 tabs
      const result = finalKeys
        .filter(key => tabMap[key])
        .map(key => tabMap[key]);
      
      console.log('[TabBar][visibleTabs] STEP4 - final result keys:', result.map(t => t.key), 'texts:', result.map(t => t.text));
      return result;
    },
  },
  created() {
    this.refreshRole();
    this.updateActivePath();
  },
  mounted() {
    // 监听外部刷新事件（登录后、页面切换时可触发）
    uni.$on('tabbar:refresh', this.handleExternalRefresh);
    // 初始化时同步一次
    this.handleExternalRefresh();
  },
  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 显隐
        this.toggleNativeTabs();
        // #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() {
      const roles = this.roles || [];
      const isTeacher = roles.includes('speaking_training_teacher');
      const isStudent = roles.includes('speaking_training_students');
      const isAdmin = roles.includes('admin');
      const isMeetingAdmin = roles.includes('meeting_admin');
      const isAdminFurniture = roles.includes('admin_furniture');

      // 会议相关的tab key列表
      const meetingTabKeys = ['meeting_summary'];
      // 已从导航中移除的tab key列表（代码保留但不显示）
      const removedTabKeys = ['champion', 'workspace'];

      // 检查是否有任何角色名等于 "furniture" 字符串（精确匹配）
      const hasFurnitureRole = roles.includes('furniture');
      
      // admin_furniture 和 furniture 角色：显示 furniture_reception, furniture_customer, furniture_top_sales 和 ucenter（相同顺序）
      if (isAdminFurniture || hasFurnitureRole) {
        const furnitureTabs = ['furniture_reception', 'furniture_customer', 'furniture_top_sales', 'ucenter'];
        console.log('[TabBar][allowed] furniture/admin_furniture role ->', furnitureTabs, 'roles:', roles);
        return furnitureTabs;
      }

      if (isMeetingAdmin) {
        // meeting_admin 角色：显示会议相关的tab和ucenter（我的）
        const meetingAdminTabs = [...meetingTabKeys, 'ucenter'];
        console.log('[TabBar][allowed] meeting_admin ->', meetingAdminTabs);
        return meetingAdminTabs;
      }

      // 非 meeting_admin 角色：排除所有会议相关的tab
      if (isAdmin) {
        // admin 角色：显示所有tab（包括 ucenter），但排除会议相关的tab、家具相关的tab、以及reception和customer
        const all = this.allTabs
          .map((t) => t.key)
          .filter((key) => !meetingTabKeys.includes(key) && !['furniture_reception', 'common_begin_reception', 'furniture_customer', 'furniture_top_sales', 'reception', 'customer', ...removedTabKeys].includes(key));
        // 确保 ucenter 被包含（用于"我的"页面）
        console.log('[TabBar][allowed] admin ->', all, 'includes ucenter:', all.includes('ucenter'));
        return all;
      }

      if (isTeacher && !isAdmin) {
        const teacherTabs = ['ucenter'];
        console.log('[TabBar][allowed] teacher ->', teacherTabs);
        return teacherTabs;
      }
      if (isStudent && !isAdmin) {
        const studentTabs = ['ucenter'];
        console.log('[TabBar][allowed] student ->', studentTabs);
        return studentTabs;
      }

      // 其他角色：隐藏作业/教务/语音/表达，同时排除会议相关的tab、家具相关的tab、以及reception和customer，但确保包含ucenter
      const otherTabs = this.allTabs
        .map((t) => t.key)
        .filter((key) => !['homework', 'edu', 'voice', 'expression', 'furniture_reception', 'common_begin_reception', 'furniture_customer', 'furniture_top_sales', 'reception', 'customer', ...meetingTabKeys, ...removedTabKeys].includes(key));
      // 确保 ucenter 被包含（任何角色都应该能看到"我的"）
      if (!otherTabs.includes('ucenter')) {
        otherTabs.push('ucenter');
      }
      console.log('[TabBar][allowed] other ->', otherTabs, 'roles:', roles);
      return otherTabs;
    },
    // #ifdef H5
    toggleNativeTabs() {
      // H5 平台自定义 tabbar 不生效，直接根据角色显隐原生 tabbar 项
      // 当前位置顺序（根据 pages.json 中的 tabBar.list 顺序）：接待、客户、团队、总结和统计、家具接待、开始接待、家具客户、家具销冠、我的
      const ORDER = ['reception', 'customer', 'team', 'meeting_summary', 'furniture_reception', 'common_begin_reception', 'furniture_customer', 'furniture_top_sales', 'ucenter'];
      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);
      }
    },
    // #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>

