<template>
  <view class="page">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :fixed="true"
      :statusBar="true"
      title="教务"
      leftIcon=""
      color="#333"
      backgroundColor="#FFFFFF"
    />

    <view class="content">
      <!-- 顶部 Tab -->
      <view class="tabs">
        <view
          class="tab-item"
          :class="{ active: activeTab === 'device' }"
          @click="switchTab('device')"
        >
          <text>设备管理</text>
        </view>
        <view
          class="tab-item"
          :class="{ active: activeTab === 'homework' }"
          @click="switchTab('homework')"
        >
          <text>作业管理</text>
        </view>
      </view>

      <!-- 设备管理 -->
      <DeviceTab v-if="activeTab === 'device'" ref="deviceTab" />

      <!-- 作业管理 -->
      <HomeworkTab v-else />
    </view>
  </view>
</template>

<script>
import DeviceTab from './components/DeviceTab.vue';
import HomeworkTab from './components/HomeworkTab.vue';

export default {
  components: {
    DeviceTab,
    HomeworkTab,
  },
  onShow() {
    // 非教务老师角色，禁止停留在教务页，自动跳回接待
    try {
      // 从登录成功时缓存的后端响应中读取角色名称
      const roleName = uni.getStorageSync('backend-role-name') || '';
      const hasEduRole = roleName === 'speaking_training_teacher';

      if (!hasEduRole) {
        uni.showToast({
          title: '当前账号无教务权限',
          icon: 'none',
          duration: 1500,
        });
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/reception/reception',
          });
        }, 800);
      }
    } catch (e) {
      console.warn('检查教务权限失败:', e);
    }
  },
  data() {
    return {
      activeTab: 'device', // device | homework
    };
  },
  onReachBottom() {
    // 页面触底时，如果当前在设备管理 Tab，则触发子组件加载更多
    if (this.activeTab === 'device' && this.$refs.deviceTab && this.$refs.deviceTab.loadMore) {
      this.$refs.deviceTab.loadMore();
    }
  },
  methods: {
    switchTab(tab) {
      this.activeTab = tab;
    },
  },
};
</script>

<style>
.page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding-top: 88rpx;
}

.tabs {
  position: fixed;
  top: 88rpx;
  left: 0;
  right: 0;
  display: flex;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  z-index: 10;
}

.tab-item {
  flex: 1;
  padding: 24rpx 0;
  text-align: center;
  position: relative;
}

.tab-item text {
  font-size: 30rpx;
  color: #666;
}

.tab-item.active text {
  color: #333;
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 25%;
  right: 25%;
  height: 4rpx;
  border-radius: 2rpx;
  background-color: #007aff;
}

.tab-content {
  padding: 148rpx 32rpx 32rpx;
  box-sizing: border-box;
}
</style>


