<template>
  <view class="teacher-workspace">
    <!-- 教师信息头部 -->
    <view class="teacher-header">
      <view class="teacher-info">
        <image class="avatar" :src="teacherInfo.avatar || '/static/default-avatar.png'" />
        <view class="info">
          <text class="name">{{ teacherInfo.name }}</text>
          <text class="department">{{ teacherInfo.department }}</text>
          <text class="title">{{ teacherInfo.title }}</text>
        </view>
      </view>
      <view class="header-actions">
        <view class="attendance-btn" @click="quickAttendance">
          <image class="btn-icon" src="/static/icons/attendance.png" />
          <text class="btn-text">打卡</text>
        </view>
      </view>
    </view>

    <!-- 今日课程安排 -->
    <view class="today-schedule">
      <view class="section-header">
        <text class="section-title">今日课程</text>
        <text class="date-info">{{ formatDate(new Date()) }}</text>
      </view>
      
      <scroll-view scroll-x="true" class="schedule-scroll">
        <view class="schedule-item" 
              v-for="course in todayCourses" 
              :key="course.id"
              :class="{ 'current': course.isCurrent, 'completed': course.isCompleted }">
          <view class="time-info">
            <text class="time-period">{{ course.startTime }}-{{ course.endTime }}</text>
            <text class="course-status">{{ getCourseStatus(course) }}</text>
          </view>
          <view class="course-info">
            <text class="course-name">{{ course.name }}</text>
            <text class="course-location">{{ course.location }}</text>
            <text class="student-count">{{ course.studentCount }}人</text>
          </view>
          <button class="course-action" 
                  v-if="course.isCurrent"
                  @click="manageCourse(course)">
            管理课堂
          </button>
        </view>
      </scroll-view>
    </view>

    <!-- 班级管理概览 -->
    <view class="class-overview">
      <view class="section-title">班级概览</view>
      <view class="class-stats">
        <view class="stat-card">
          <text class="stat-value">{{ classStats.totalStudents }}</text>
          <text class="stat-label">管理学生</text>
        </view>
        <view class="stat-card">
          <text class="stat-value">{{ classStats.presentToday }}</text>
          <text class="stat-label">今日出勤</text>
        </view>
        <view class="stat-card">
          <text class="stat-value">{{ classStats.avgConsumption }}</text>
          <text class="stat-label">日均消费</text>
        </view>
        <view class="stat-card">
          <text class="stat-value">{{ classStats.pendingApprovals }}</text>
          <text class="stat-label">待审批</text>
        </view>
      </view>
    </view>

    <!-- 快速功能 -->
    <view class="quick-functions">
      <view class="section-title">快速功能</view>
      <view class="function-grid">
        <view class="function-item" @click="goToStudentManagement">
          <image class="function-icon" src="/static/icons/students.png" />
          <text class="function-text">学生管理</text>
          <view class="function-badge" v-if="newStudentNotifications > 0">
            {{ newStudentNotifications }}
          </view>
        </view>
        
        <view class="function-item" @click="goToAttendance">
          <image class="function-icon" src="/static/icons/attendance.png" />
          <text class="function-text">考勤管理</text>
        </view>
        
        <view class="function-item" @click="goToClassConsumption">
          <image class="function-icon" src="/static/icons/consumption.png" />
          <text class="function-text">班级消费</text>
        </view>
        
        <view class="function-item" @click="goToVisitorApproval">
          <image class="function-icon" src="/static/icons/visitor.png" />
          <text class="function-text">访客审批</text>
          <view class="function-badge" v-if="pendingVisitors > 0">
            {{ pendingVisitors }}
          </view>
        </view>
        
        <view class="function-item" @click="goToLibraryManagement">
          <image class="function-icon" src="/static/icons/library.png" />
          <text class="function-text">图书管理</text>
        </view>
        
        <view class="function-item" @click="goToReports">
          <image class="function-icon" src="/static/icons/report.png" />
          <text class="function-text">数据报告</text>
        </view>
        
        <view class="function-item emergency" @click="goToEmergencyUnlock">
          <image class="function-icon" src="/static/icons/emergency.png" />
          <text class="function-text">紧急开门</text>
        </view>
        
        <view class="function-item" @click="goToNotifications">
          <image class="function-icon" src="/static/icons/notifications.png" />
          <text class="function-text">消息通知</text>
          <view class="function-badge" v-if="unreadNotifications > 0">
            {{ unreadNotifications }}
          </view>
        </view>
      </view>
    </view>

    <!-- 学生动态 -->
    <view class="student-activities">
      <view class="section-header">
        <text class="section-title">学生动态</text>
        <text class="view-more" @click="goToStudentManagement">查看更多</text>
      </view>
      
      <view class="activities-list">
        <view class="activity-item" v-for="activity in recentActivities" :key="activity.id">
          <view class="activity-avatar">
            <image :src="activity.studentAvatar || '/static/default-avatar.png'" />
          </view>
          <view class="activity-content">
            <view class="activity-header">
              <text class="student-name">{{ activity.studentName }}</text>
              <text class="activity-time">{{ formatTime(activity.time) }}</text>
            </view>
            <text class="activity-desc">{{ activity.description }}</text>
            <view class="activity-details" v-if="activity.details">
              <text class="detail-item" v-for="detail in activity.details" :key="detail">
                {{ detail }}
              </text>
            </view>
          </view>
          <view class="activity-status" :class="activity.status">
            {{ getActivityStatusText(activity.status) }}
          </view>
        </view>
      </view>
    </view>

    <!-- 门禁权限管理 -->
    <view class="access-management">
      <view class="section-title">门禁权限</view>
      <view class="access-summary">
        <view class="permission-item">
          <text class="permission-name">教师办公室</text>
          <text class="permission-status active">有权限</text>
        </view>
        <view class="permission-item">
          <text class="permission-name">实验室A101</text>
          <text class="permission-status active">有权限</text>
        </view>
        <view class="permission-item">
          <text class="permission-name">会议室301</text>
          <text class="permission-status pending">申请中</text>
        </view>
        <view class="permission-item">
          <text class="permission-name">图书馆管理区</text>
          <text class="permission-status inactive">无权限</text>
        </view>
      </view>
      <button class="apply-permission-btn" @click="applyForPermission">
        申请新权限
      </button>
    </view>

    <!-- 消息中心 -->
    <view class="message-center" v-if="importantMessages.length > 0">
      <view class="section-title">重要通知</view>
      <view class="message-list">
        <view class="message-item" 
              v-for="message in importantMessages" 
              :key="message.id"
              @click="viewMessage(message)">
          <view class="message-icon" :class="message.type">
            <image :src="getMessageIcon(message.type)" />
          </view>
          <view class="message-content">
            <text class="message-title">{{ message.title }}</text>
            <text class="message-preview">{{ message.preview }}</text>
          </view>
          <view class="message-time">
            {{ formatTime(message.time) }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      teacherInfo: {
        name: '李老师',
        department: '计算机科学学院',
        title: '副教授',
        avatar: ''
      },
      todayCourses: [
        {
          id: 1,
          name: '数据结构',
          startTime: '08:00',
          endTime: '09:40',
          location: 'A101',
          studentCount: 45,
          isCompleted: true,
          isCurrent: false
        },
        {
          id: 2,
          name: '算法设计',
          startTime: '10:00',
          endTime: '11:40',
          location: 'A102',
          studentCount: 38,
          isCompleted: false,
          isCurrent: true
        },
        {
          id: 3,
          name: '软件工程',
          startTime: '14:00',
          endTime: '15:40',
          location: 'A103',
          studentCount: 42,
          isCompleted: false,
          isCurrent: false
        }
      ],
      classStats: {
        totalStudents: 125,
        presentToday: 118,
        avgConsumption: '25.6',
        pendingApprovals: 3
      },
      newStudentNotifications: 2,
      pendingVisitors: 1,
      unreadNotifications: 5,
      recentActivities: [
        {
          id: 1,
          studentName: '张小明',
          studentAvatar: '',
          description: '在第一饭堂消费',
          details: ['消费金额: ￥12.50', '余额: ￥98.30'],
          time: new Date(Date.now() - 1800000),
          status: 'normal'
        },
        {
          id: 2,
          studentName: '王小红',
          studentAvatar: '',
          description: '申请图书续借',
          details: ['《数据结构与算法》', '申请续借7天'],
          time: new Date(Date.now() - 3600000),
          status: 'pending'
        }
      ],
      importantMessages: [
        {
          id: 1,
          type: 'urgent',
          title: '紧急通知',
          preview: '关于加强校园疫情防控的通知...',
          time: new Date(Date.now() - 7200000)
        }
      ]
    }
  },
  onLoad() {
    this.loadTeacherData()
  },
  onPullDownRefresh() {
    this.refreshData()
  },
  methods: {
    loadTeacherData() {
      // 加载教师相关数据
      this.loadTodayCourses()
      this.loadClassStats()
      this.loadRecentActivities()
      this.loadMessages()
    },
    refreshData() {
      Promise.all([
        this.loadTeacherData()
      ]).then(() => {
        uni.stopPullDownRefresh()
      })
    },
    loadTodayCourses() {
      uni.request({
        url: '/api/v1/teacher/today-courses',
        success: (res) => {
          this.todayCourses = res.data
        }
      })
    },
    loadClassStats() {
      uni.request({
        url: '/api/v1/teacher/class-stats',
        success: (res) => {
          this.classStats = res.data
        }
      })
    },
    loadRecentActivities() {
      uni.request({
        url: '/api/v1/teacher/student-activities',
        success: (res) => {
          this.recentActivities = res.data
        }
      })
    },
    loadMessages() {
      uni.request({
        url: '/api/v1/teacher/messages',
        success: (res) => {
          this.importantMessages = res.data
        }
      })
    },
    quickAttendance() {
      // 快速打卡
      uni.showLoading({ title: '打卡中...' })
      
      uni.request({
        url: '/api/v1/teacher/attendance',
        method: 'POST',
        success: () => {
          uni.hideLoading()
          uni.showToast({
            title: '打卡成功',
            icon: 'success'
          })
        },
        fail: () => {
          uni.hideLoading()
          uni.showToast({
            title: '打卡失败',
            icon: 'none'
          })
        }
      })
    },
    manageCourse(course) {
      uni.navigateTo({
        url: `/pages/mall/nfc/teacher/course-management?courseId=${course.id}`
      })
    },
    getCourseStatus(course) {
      if (course.isCompleted) return '已结束'
      if (course.isCurrent) return '进行中'
      return '未开始'
    },
    getActivityStatusText(status) {
      const statusMap = {
        normal: '正常',
        pending: '待处理',
        warning: '注意',
        error: '异常'
      }
      return statusMap[status] || '未知'
    },
    getMessageIcon(type) {
      const icons = {
        urgent: '/static/icons/urgent.png',
        info: '/static/icons/info.png',
        warning: '/static/icons/warning.png'
      }
      return icons[type] || icons.info
    },
    // 导航方法
    goToStudentManagement() {
      uni.navigateTo({ url: '/pages/mall/nfc/teacher/student-management' })
    },
    goToAttendance() {
      uni.navigateTo({ url: '/pages/mall/nfc/teacher/attendance' })
    },
    goToClassConsumption() {
      uni.navigateTo({ url: '/pages/mall/nfc/teacher/class-consumption' })
    },
    goToVisitorApproval() {
      uni.navigateTo({ url: '/pages/mall/nfc/teacher/visitor-approval' })
    },
    goToLibraryManagement() {
      uni.navigateTo({ url: '/pages/mall/nfc/teacher/library-management' })
    },
    goToReports() {
      uni.navigateTo({ url: '/pages/mall/nfc/teacher/reports' })
    },
    goToEmergencyUnlock() {
      uni.showModal({
        title: '紧急开门',
        content: '确认要进行紧急开门操作吗？此操作将被记录。',
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({ url: '/pages/mall/nfc/teacher/emergency-unlock' })
          }
        }
      })
    },
    goToNotifications() {
      uni.navigateTo({ url: '/pages/mall/nfc/teacher/notifications' })
    },
    applyForPermission() {
      uni.navigateTo({ url: '/pages/mall/nfc/teacher/permission-application' })
    },
    viewMessage(message) {
      uni.navigateTo({
        url: `/pages/mall/nfc/teacher/message-detail?id=${message.id}`
      })
    },
    formatDate(date) {
      return date.toLocaleDateString('zh-CN', {
        month: 'long',
        day: 'numeric',
        weekday: 'long'
      })
    },
    formatTime(time) {
      const now = new Date()
      const diff = now - time
      const minutes = Math.floor(diff / 60000)
      
      if (minutes < 1) return '刚刚'
      if (minutes < 60) return `${minutes}分钟前`
      
      const hours = Math.floor(minutes / 60)
      if (hours < 24) return `${hours}小时前`
      
      return time.toLocaleDateString()
    }
  }
}
</script>

<style>
.teacher-workspace {
  padding: 20rpx;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.teacher-header {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.teacher-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  margin-right: 20rpx;
}

.info {
  display: flex;
  flex-direction: column;
}

.name {
  color: white;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.department, .title {
  color: rgba(255, 255, 255, 0.8);
  font-size: 24rpx;
  margin-bottom: 4rpx;
}

.header-actions {
  display: flex;
  align-items: center;
}

.attendance-btn {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12rpx;
  padding: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btn-icon {
  width: 32rpx;
  height: 32rpx;
  margin-bottom: 8rpx;
}

.btn-text {
  color: white;
  font-size: 20rpx;
}

.today-schedule, .class-overview, .quick-functions, 
.student-activities, .access-management, .message-center {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.date-info {
  font-size: 24rpx;
  color: #666;
}

.view-more {
  font-size: 24rpx;
  color: #28a745;
}

.schedule-scroll {
  white-space: nowrap;
}

.schedule-item {
  display: inline-block;
  background: #f8f9fa;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-right: 20rpx;
  min-width: 280rpx;
  border: 2rpx solid transparent;
}

.schedule-item.current {
  background: #e7f3ff;
  border-color: #007AFF;
}

.schedule-item.completed {
  background: #e6f7e6;
  border-color: #28a745;
}

.time-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.time-period {
  font-size: 24rpx;
  color: #666;
}

.course-status {
  font-size: 20rpx;
  padding: 4rpx 8rpx;
  border-radius: 8rpx;
  background: #28a745;
  color: white;
}

.course-info {
  display: flex;
  flex-direction: column;
  margin-bottom: 16rpx;
}

.course-name {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.course-location, .student-count {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 4rpx;
}

.course-action {
  background: #28a745;
  color: white;
  border: none;
  border-radius: 8rpx;
  padding: 12rpx;
  font-size: 24rpx;
  width: 100%;
}

.class-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}

.stat-card {
  text-align: center;
  padding: 20rpx;
  border: 1rpx solid #eee;
  border-radius: 12rpx;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #28a745;
  margin-bottom: 8rpx;
  display: block;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
}

.function-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}

.function-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx 20rpx;
  border: 1rpx solid #eee;
  border-radius: 12rpx;
  transition: all 0.3s ease;
}

.function-item:hover {
  border-color: #28a745;
  background: #f8fff8;
}

.function-item.emergency {
  border-color: #dc3545;
  background: #fff5f5;
}

.function-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 16rpx;
}

.function-text {
  font-size: 24rpx;
  color: #333;
  text-align: center;
}

.function-badge {
  position: absolute;
  top: 16rpx;
  right: 16rpx;
  background: #dc3545;
  color: white;
  font-size: 20rpx;
  padding: 4rpx 8rpx;
  border-radius: 12rpx;
  min-width: 24rpx;
  text-align: center;
}

.activities-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  padding: 20rpx;
  border: 1rpx solid #eee;
  border-radius: 12rpx;
}

.activity-avatar {
  width: 60rpx;
  height: 60rpx;
  margin-right: 20rpx;
}

.activity-avatar image {
  width: 100%;
  height: 100%;
  border-radius: 30rpx;
}

.activity-content {
  flex: 1;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.student-name {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.activity-time {
  font-size: 20rpx;
  color: #999;
}

.activity-desc {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.activity-details {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.detail-item {
  font-size: 20rpx;
  color: #999;
}

.activity-status {
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
  margin-left: 20rpx;
}

.activity-status.normal {
  background: #d4edda;
  color: #155724;
}

.activity-status.pending {
  background: #fff3cd;
  color: #856404;
}

.activity-status.warning {
  background: #ffeaa7;
  color: #6c5ce7;
}

.access-summary {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  margin-bottom: 30rpx;
}

.permission-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.permission-item:last-child {
  border-bottom: none;
}

.permission-name {
  font-size: 24rpx;
  color: #333;
}

.permission-status {
  font-size: 20rpx;
  padding: 6rpx 12rpx;
  border-radius: 8rpx;
}

.permission-status.active {
  background: #d4edda;
  color: #155724;
}

.permission-status.pending {
  background: #fff3cd;
  color: #856404;
}

.permission-status.inactive {
  background: #f8d7da;
  color: #721c24;
}

.apply-permission-btn {
  background: #28a745;
  color: white;
  border: none;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 28rpx;
  width: 100%;
}

.message-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.message-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border: 1rpx solid #eee;
  border-radius: 12rpx;
}

.message-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-icon.urgent {
  background: #fff5f5;
}

.message-icon image {
  width: 24rpx;
  height: 24rpx;
}

.message-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.message-title {
  font-size: 24rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.message-preview {
  font-size: 22rpx;
  color: #666;
}

.message-time {
  font-size: 20rpx;
  color: #999;
  margin-left: 20rpx;
}
</style>
