<template>
  <fui-modal
    :show="visible"
    title="课程安排详情"
    width="700"
    @cancel="closePopup"
    :buttons="[]"
  >
    <view class="schedule-detail" v-if="scheduleInfo">
      <!-- 课程基本信息 -->
      <view class="section basic-info">
        <view class="section-title">基本信息</view>
        <view class="info-item">
          <text class="item-label">课程名称：</text>
          <text class="item-value">{{ scheduleInfo.course_name }}</text>
        </view>
        <view class="info-item">
          <text class="item-label">上课时间：</text>
          <text class="item-value">{{ scheduleInfo.course_date }} {{ scheduleInfo.time_slot }}</text>
        </view>
        <view class="info-item">
          <text class="item-label">上课地点：</text>
          <text class="item-value">{{ scheduleInfo.venue_name }}</text>
        </view>
        <view class="info-item">
          <text class="item-label">授课教练：</text>
          <text class="item-value">{{ scheduleInfo.coach_name }}</text>
        </view>
        <view class="info-item">
          <text class="item-label">课程状态：</text>
          <text class="item-value" :class="getStatusClass(scheduleInfo.status)">{{ scheduleInfo.status_text }}</text>
        </view>
        <view class="info-item">
          <text class="item-label">班级：</text>
          <text class="item-value">{{ scheduleInfo.class_info ? scheduleInfo.class_info.class_name : '无班级' }}</text>
        </view>
      </view>

      <!-- 学员信息 -->
      <view class="section students-info">
        <view class="section-title">学员信息 ({{ scheduleInfo.students ? scheduleInfo.students.length : 0 }}人)</view>
        <view class="student-list" v-if="scheduleInfo.students && scheduleInfo.students.length > 0">
          <view class="student-item" v-for="(student, index) in scheduleInfo.students" :key="index">
            <view class="student-avatar">
              <image :src="student.avatar || '/static/icon-img/avatar.png'" mode="aspectFill"></image>
            </view>
            <view class="student-detail">
              <text class="student-name">{{ student.name }}</text>
              <text class="student-status" :class="getStudentStatusClass(student.status)">{{ student.status_text }}</text>
            </view>
          </view>
        </view>
        <view class="empty-list" v-else>
          <text>暂无学员参与此课程</text>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="action-buttons">
        <fui-button type="primary" @click="handleSignIn" :disabled="scheduleInfo.status === 'completed'">课程点名</fui-button>
        <fui-button type="default" @click="handleAdjustClass" :disabled="scheduleInfo.status === 'completed'">调整课程</fui-button>
      </view>

      <!-- 关闭按钮 -->
      <view class="close-btn" @click="closePopup">
        <fui-icon name="close" :size="40" color="#999"></fui-icon>
      </view>
    </view>
    
    <view class="loading" v-if="loading && !scheduleInfo">
      <fui-loading></fui-loading>
      <text class="loading-text">加载中...</text>
    </view>
    
    <view class="error-message" v-if="error && !scheduleInfo">
      <text>{{ errorMessage }}</text>
      <view class="retry-btn" @click="fetchScheduleDetail">
        <text>重试</text>
      </view>
    </view>
  </fui-modal>
  </view>
</template>

<script>
import api from '@/api/apiRoute.js';

export default {
  name: 'ScheduleDetail',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    scheduleId: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      loading: false,
      error: false,
      errorMessage: '加载失败，请重试',
      scheduleInfo: null
    }
  },
  watch: {
    visible(newVal) {
      if (newVal && this.scheduleId) {
        this.fetchScheduleDetail();
      }
    },
    scheduleId(newVal) {
      if (newVal && this.visible) {
        this.fetchScheduleDetail();
      }
    }
  },
  methods: {
    // 获取课程安排详情
    async fetchScheduleDetail() {
      if (!this.scheduleId) {
        this.error = true;
        this.errorMessage = '课程ID不能为空';
        return;
      }
      
      this.loading = true;
      this.error = false;
      
      try {
        const res = await api.getCourseScheduleInfo({ schedule_id: this.scheduleId });
        if (res.code === 1) {
          this.scheduleInfo = res.data;
        } else {
          uni.showToast({
            title: res.msg || '获取课程安排详情失败',
            icon: 'none'
          });
          this.error = true;
          this.errorMessage = res.msg || '获取课程安排详情失败';
        }
      } catch (error) {
        console.error('获取课程安排详情失败:', error);
        this.error = true;
        this.errorMessage = error.message || '获取课程安排详情失败，请重试';
      } finally {
        this.loading = false;
      }
    },
    
    // 关闭弹窗
    closePopup() {
      this.$emit('update:visible', false);
    },
    
    // 点名操作
    handleSignIn() {
      this.$emit('sign-in', {
        scheduleId: this.scheduleId,
        scheduleName: this.scheduleInfo?.course_name
      });
      this.closePopup();
    },
    
    // 调课操作
    handleAdjustClass() {
      this.$emit('adjust-class', {
        scheduleId: this.scheduleId,
        scheduleName: this.scheduleInfo?.course_name
      });
      this.closePopup();
    },
    
    // 获取状态样式类
    getStatusClass(status) {
      const statusMap = {
        'pending': 'status-pending',
        'upcoming': 'status-upcoming',
        'ongoing': 'status-ongoing',
        'completed': 'status-completed'
      };
      return statusMap[status] || '';
    },
    
    // 获取学员状态样式类
    getStudentStatusClass(status) {
      const statusMap = {
        0: 'status-pending',  // 待上课
        1: 'status-completed',  // 已上课
        2: 'status-leave'  // 请假
      };
      return statusMap[status] || '';
    }
  }
}
</script>

<style lang="scss" scoped>
.schedule-detail {
  padding: 20rpx;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}

.section {
  margin-bottom: 30rpx;
  background-color: #2a2a2a;
  border-radius: 12rpx;
  padding: 20rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #29d3b4;
  margin-bottom: 20rpx;
  border-bottom: 1px solid #3a3a3a;
  padding-bottom: 10rpx;
}

.info-item {
  display: flex;
  margin-bottom: 16rpx;
  font-size: 28rpx;
}

.item-label {
  color: #999;
  width: 160rpx;
  flex-shrink: 0;
}

.item-value {
  color: #fff;
  flex: 1;
}

.student-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.student-item {
  display: flex;
  align-items: center;
  background-color: #3a3a3a;
  border-radius: 8rpx;
  padding: 15rpx;
  width: calc(50% - 10rpx);
}

.student-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  overflow: hidden;
  margin-right: 15rpx;
  
  image {
    width: 100%;
    height: 100%;
  }
}

.student-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.student-name {
  font-size: 28rpx;
  color: #fff;
  margin-bottom: 8rpx;
}

.student-status {
  font-size: 24rpx;
}

.status-pending {
  color: #ff9500;
}

.status-upcoming {
  color: #29d3b4;
}

.status-ongoing {
  color: #007aff;
}

.status-completed {
  color: #8e8e93;
}

.status-leave {
  color: #ff3b30;
}

.action-buttons {
  display: flex;
  justify-content: space-around;
  margin-top: 30rpx;
  gap: 30rpx;
}

.close-btn {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  z-index: 10;
  padding: 10rpx;
}

.loading, .error-message {
  height: 300rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.loading-text {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #ccc;
}

.error-message {
  color: #ff6b6b;
  font-size: 28rpx;
  text-align: center;
}

.retry-btn {
  margin-top: 30rpx;
  padding: 12rpx 30rpx;
  background-color: #29d3b4;
  border-radius: 8rpx;
  color: #fff;
  font-size: 24rpx;
}

.empty-list {
  padding: 40rpx 0;
  text-align: center;
  color: #999;
  font-size: 28rpx;
}
</style>