<template>
  <view class="course-detail">
    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 课程详情内容 -->
    <view v-else-if="courseDetail" class="detail-container">
      <!-- 课程基本信息卡片 -->
      <view class="info-card">
        <view class="card-header">
          <text class="card-title">课程基本信息</text>
          <view :class="['status-badge', getStatusClass(courseDetail.student_course_info.status)]">
            {{ getStatusText(courseDetail.student_course_info.status) }}
          </view>
        </view>

        <view class="info-grid">
          <view class="info-item">
            <text class="info-label">课程名称：</text>
            <text class="info-value">{{ courseDetail.student_course_info.course_name }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">学员姓名：</text>
            <text class="info-value">{{ courseDetail.student_course_info.student_name }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">开始日期：</text>
            <text class="info-value">{{ courseDetail.student_course_info.start_date }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">结束日期：</text>
            <text class="info-value">{{ courseDetail.student_course_info.end_date }}</text>
          </view>
        </view>
      </view>

      <!-- 课时信息卡片 -->
      <view class="info-card">
        <view class="card-header">
          <text class="card-title">课时统计</text>
        </view>

        <view class="hours-summary">
          <view class="summary-item total">
            <text class="summary-label">总课时</text>
            <text class="summary-value">{{ courseDetail.student_course_info.total_class_hours }}节</text>
          </view>
          <view class="summary-item used">
            <text class="summary-label">已用课时</text>
            <text class="summary-value">{{ courseDetail.student_course_info.used_class_hours }}节</text>
          </view>
          <view class="summary-item remaining">
            <text class="summary-label">剩余课时</text>
            <text class="summary-value">{{ courseDetail.student_course_info.remaining_class_hours }}节</text>
          </view>
        </view>

        <!-- 课时详细信息 -->
        <view class="hours-details">
          <view class="hours-item">
            <text class="hours-label">正式课时</text>
            <view class="hours-info">
              <text class="hours-total">{{ courseDetail.student_course_info.total_hours }}节</text>
              <text class="hours-used">已用{{ courseDetail.student_course_info.use_total_hours }}节</text>
            </view>
          </view>
          <view class="hours-item" v-if="courseDetail.student_course_info.gift_hours > 0">
            <text class="hours-label">赠送课时</text>
            <view class="hours-info">
              <text class="hours-total">{{ courseDetail.student_course_info.gift_hours }}节</text>
              <text class="hours-used">已用{{ courseDetail.student_course_info.use_gift_hours }}节</text>
            </view>
          </view>
        </view>

        <!-- 课时进度条 -->
        <view class="progress-section">
          <view class="progress-item">
            <text class="progress-label">总课时进度</text>
            <view class="progress-bar">
              <view
                class="progress-fill"
                :style="'width:' + totalProgress + '%'"
              ></view>
            </view>
            <text class="progress-text">{{ courseDetail.student_course_info.used_class_hours }}/{{ courseDetail.student_course_info.total_class_hours }}</text>
          </view>
        </view>
      </view>

      <!-- 教练团队卡片 -->
      <view class="info-card" v-if="hasCoachInfo">
        <view class="card-header">
          <text class="card-title">教练团队</text>
        </view>

        <view class="coach-list">
          <view class="coach-item" v-if="courseDetail.student_course_info.coach_details.main_coach">
            <view class="coach-avatar">
              <text class="coach-initial">{{ getInitial(courseDetail.student_course_info.coach_details.main_coach.name) }}</text>
            </view>
            <view class="coach-info">
              <text class="coach-role">主教练</text>
              <text class="coach-name">{{ courseDetail.student_course_info.coach_details.main_coach.name }}</text>
            </view>
          </view>

          <view class="coach-item" v-if="courseDetail.student_course_info.coach_details.education">
            <view class="coach-avatar education">
              <text class="coach-initial">{{ getInitial(courseDetail.student_course_info.coach_details.education.name) }}</text>
            </view>
            <view class="coach-info">
              <text class="coach-role">教务</text>
              <text class="coach-name">{{ courseDetail.student_course_info.coach_details.education.name }}</text>
            </view>
          </view>

          <view class="coach-item" v-for="assistant in courseDetail.student_course_info.coach_details.assistants" :key="assistant.id">
            <view class="coach-avatar assistant">
              <text class="coach-initial">{{ getInitial(assistant.name) }}</text>
            </view>
            <view class="coach-info">
              <text class="coach-role">助教</text>
              <text class="coach-name">{{ assistant.name }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 课时使用记录卡片 -->
      <view class="info-card">
        <view class="card-header">
          <text class="card-title">使用记录</text>
          <text class="record-count" v-if="courseDetail.usage_records.length > 0">
            共{{ courseDetail.statistics.total_usage_records }}条记录
          </text>
        </view>

        <view v-if="courseDetail.usage_records.length > 0" class="usage-records">
          <view class="record-item" v-for="record in courseDetail.usage_records" :key="record.id">
            <view class="record-date">
              <text class="date-text">{{ formatDate(record.usage_date) }}</text>
            </view>
            <view class="record-hours">
              <text class="hours-text">-{{ record.used_hours }}节</text>
            </view>
          </view>
        </view>

        <view v-else class="no-records">
          <text class="no-records-text">暂无使用记录</text>
        </view>
      </view>

      <!-- 订单信息卡片 -->
      <view class="info-card" v-if="courseDetail.order_info">
        <view class="card-header">
          <text class="card-title">订单信息</text>
        </view>

        <view class="order-info">
          <view class="order-header">
            <view class="order-id">
              <text class="order-label">订单号：</text>
              <text class="order-value">{{ courseDetail.order_info.payment_id }}</text>
            </view>
            <view :class="['order-status', getOrderStatusClass(courseDetail.order_info.order_status)]">
              {{ getOrderStatusText(courseDetail.order_info.order_status) }}
            </view>
          </view>

          <view class="order-details">
            <view class="order-item">
              <text class="order-label">订单金额：</text>
              <text class="order-value amount">¥{{ courseDetail.order_info.order_amount }}</text>
            </view>
            <view class="order-item">
              <text class="order-label">支付方式：</text>
              <text class="order-value">{{ getPaymentTypeText(courseDetail.order_info.payment_type) }}</text>
            </view>
            <view class="order-item">
              <text class="order-label">创建时间：</text>
              <text class="order-value">{{ formatDateTime(courseDetail.order_info.created_at) }}</text>
            </view>
            <view class="order-item" v-if="courseDetail.order_info.payment_time">
              <text class="order-label">支付时间：</text>
              <text class="order-value">{{ formatDateTime(courseDetail.order_info.payment_time) }}</text>
            </view>
            <view class="order-item">
              <text class="order-label">销售员工：</text>
              <text class="order-value">{{ courseDetail.order_info.staff_name }}</text>
            </view>
            <view class="order-item">
              <text class="order-label">所属校区：</text>
              <text class="order-value">{{ courseDetail.order_info.campus_name }}</text>
            </view>
          </view>

          <view v-if="courseDetail.order_info.remark" class="order-remark">
            <text class="remark-label">备注：</text>
            <text class="remark-text">{{ courseDetail.order_info.remark }}</text>
          </view>
        </view>
      </view>

      <!-- 无订单信息提示 -->
      <view class="info-card" v-else>
        <view class="card-header">
          <text class="card-title">订单信息</text>
        </view>
        <view class="no-order">
          <text class="no-order-text">暂无关联订单信息</text>
        </view>
      </view>
    </view>

    <!-- 错误状态 -->
    <view v-else class="error-container">
      <view class="error-icon">❌</view>
      <text class="error-text">课程信息加载失败</text>
      <button class="retry-btn" @tap="loadCourseDetail">重试</button>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons" v-if="courseDetail">
      <button class="action-btn primary" @tap="openEditModal">
        <text class="btn-icon">✏️</text>
        <text class="btn-text">课程编辑</text>
      </button>
      <button class="action-btn secondary" @tap="openTransferModal">
        <text class="btn-icon">🔄</text>
        <text class="btn-text">课程转移</text>
      </button>
    </view>

    <!-- 课程编辑弹窗 -->
    <view v-if="showEditModal" class="modal-overlay" @tap="closeEditModal">
      <view class="modal-content" @tap.stop>
        <view class="modal-header">
          <text class="modal-title">编辑课程信息</text>
          <view class="close-btn" @tap="closeEditModal">×</view>
        </view>

        <view class="modal-body">
          <view class="form-group">
            <text class="form-label">正式课时数</text>
            <input
              class="form-input"
              type="number"
              v-model="editForm.total_hours"
              placeholder="请输入正式课时数"
            />
          </view>

          <view class="form-group">
            <text class="form-label">赠送课时数</text>
            <input
              class="form-input"
              type="number"
              v-model="editForm.gift_hours"
              placeholder="请输入赠送课时数"
            />
          </view>

          <view class="form-group">
            <text class="form-label">开始日期</text>
            <picker
              mode="date"
              :value="editForm.start_date"
              @change="onStartDateChange"
            >
              <view class="picker-input">
                {{ editForm.start_date || '请选择开始日期' }}
                <text class="picker-arrow">▼</text>
              </view>
            </picker>
          </view>

          <view class="form-group">
            <text class="form-label">结束日期</text>
            <picker
              mode="date"
              :value="editForm.end_date"
              @change="onEndDateChange"
            >
              <view class="picker-input">
                {{ editForm.end_date || '请选择结束日期' }}
                <text class="picker-arrow">▼</text>
              </view>
            </picker>
          </view>

          <view class="form-group">
            <text class="form-label">单次消课数量</text>
            <input
              class="form-input"
              type="number"
              v-model="editForm.single_session_count"
              placeholder="请输入单次消课数量"
            />
          </view>

          <view class="form-group">
            <text class="form-label">主教练</text>
            <picker
              :range="coachList"
              range-key="name"
              :value="selectedCoachIndex"
              @change="onCoachChange"
            >
              <view class="picker-input">
                {{ selectedCoachName || '请选择主教练' }}
                <text class="picker-arrow">▼</text>
              </view>
            </picker>
          </view>

          <view class="form-group">
            <text class="form-label">助教</text>
            <picker
              mode="multiSelector"
              :range="[coachList]"
              :value="selectedAssistantIndexes"
              @change="onAssistantChange"
            >
              <view class="picker-input">
                {{ selectedAssistantNames || '请选择助教' }}
                <text class="picker-arrow">▼</text>
              </view>
            </picker>
          </view>

          <view class="form-group">
            <text class="form-label">教务</text>
            <picker
              :range="educationList"
              range-key="name"
              :value="selectedEducationIndex"
              @change="onEducationChange"
            >
              <view class="picker-input">
                {{ selectedEducationName || '请选择教务' }}
                <text class="picker-arrow">▼</text>
              </view>
            </picker>
          </view>
        </view>

        <view class="modal-footer">
          <button class="btn btn-cancel" @tap="closeEditModal">取消</button>
          <button class="btn btn-confirm" @tap="saveCourseEdit" :loading="saving">保存</button>
        </view>
      </view>
    </view>

    <!-- 课程转移弹窗 -->
    <view v-if="showTransferModal" class="modal-overlay" @tap="closeTransferModal">
      <view class="modal-content" @tap.stop>
        <view class="modal-header">
          <text class="modal-title">课程转移</text>
          <view class="close-btn" @tap="closeTransferModal">×</view>
        </view>

        <view class="modal-body">
          <view class="transfer-info">
            <text class="info-text">将课程转移给其他学员</text>
            <text class="course-name">课程名称: {{ courseDetail.student_course_info.course_name }}</text>
          </view>

          <view class="form-group">
            <text class="form-label">选择新学员</text>
            <picker
              :range="studentList"
              range-key="name"
              :value="selectedStudentIndex"
              @change="onStudentChange"
            >
              <view class="picker-input">
                {{ selectedStudentName || '请选择学员' }}
                <text class="picker-arrow">▼</text>
              </view>
            </picker>
          </view>

          <view class="form-group">
            <text class="form-label">转移原因</text>
            <textarea
              class="form-textarea"
              v-model="transferForm.reason"
              placeholder="请输入转移原因"
              maxlength="200"
            ></textarea>
          </view>
        </view>

        <view class="modal-footer">
          <button class="btn btn-cancel" @tap="closeTransferModal">取消</button>
          <button class="btn btn-confirm" @tap="confirmTransfer" :loading="transferring">确认转移</button>
        </view>
      </view>
    </view>

  </view>
</template>

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

export default {
  name: 'CourseDetail',

  computed: {
    // 检查是否有教练信息
    hasCoachInfo() {
      return this.courseDetail && this.courseDetail.student_course_info.coach_details && (
        this.courseDetail.student_course_info.coach_details.main_coach ||
        this.courseDetail.student_course_info.coach_details.education ||
        (this.courseDetail.student_course_info.coach_details.assistants && this.courseDetail.student_course_info.coach_details.assistants.length > 0)
      )
    },

    // 计算总课时进度
    totalProgress() {
      if (!this.courseDetail || !this.courseDetail.student_course_info.total_class_hours) return 0
      return Math.round((this.courseDetail.student_course_info.used_class_hours / this.courseDetail.student_course_info.total_class_hours) * 100)
    }
  },

  data() {
    return {
      // 页面参数
      studentCourseId: null,

      // 数据状态
      loading: false,
      courseDetail: null,

      // 列表数据
      coachList: [],
      educationList: [],
      studentList: [],

      // 编辑弹窗
      showEditModal: false,
      saving: false,
      editForm: {
        total_hours: '',
        gift_hours: '',
        start_date: '',
        end_date: '',
        single_session_count: '',
        main_coach_id: '',
        assistant_ids: '',
        education_id: ''
      },
      selectedCoachIndex: 0,
      selectedAssistantIndexes: [0],
      selectedEducationIndex: 0,
      selectedCoachName: '',
      selectedAssistantNames: '',
      selectedEducationName: '',

      // 转移弹窗
      showTransferModal: false,
      transferring: false,
      transferForm: {
        new_student_id: '',
        reason: ''
      },
      selectedStudentIndex: 0,
      selectedStudentName: ''
    }
  },

  onLoad(options) {
    console.log('页面参数:', options)
    this.studentCourseId = options.student_course_id || options.id

    if (!this.studentCourseId) {
      uni.showToast({
        title: '缺少学员课程ID参数',
        icon: 'none'
      })
      return
    }

    this.loadCourseDetail()
  },

  methods: {
    // 加载课程详情
    async loadCourseDetail() {
      if (!this.studentCourseId) return

      this.loading = true
      try {
        console.log('加载学员课程详情，ID:', this.studentCourseId)

        // 调用API接口
        const res = await apiRoute.getStudentCourseDetail({
          student_course_id: parseInt(this.studentCourseId)
        })

        console.log('API响应:', res)

        if (res.code === 1) {
          this.courseDetail = res.data
          console.log('课程详情加载完成:', this.courseDetail)

          // 加载编辑所需的选项数据
          await this.loadEditOptions()
        } else {
          throw new Error(res.msg || '获取课程详情失败')
        }

      } catch (error) {
        console.error('加载课程详情失败:', error)
        uni.showToast({
          title: error.message || '加载失败，请重试',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },

    // 获取姓名首字母
    getInitial(name) {
      if (!name) return '?'
      return name.charAt(0).toUpperCase()
    },

    // 状态相关方法
    getStatusClass(status) {
      const statusMap = {
        'active': 'status-active',
        'expired': 'status-expired',
        'waiting': 'status-pending',
        'delayed': 'status-extended',
        'completed': 'status-completed'
      }
      return statusMap[status] || 'status-default'
    },

    getStatusText(status) {
      const statusMap = {
        'active': '有效进行中',
        'expired': '已过期',
        'waiting': '等待期',
        'delayed': '延期',
        'completed': '已完成'
      }
      return statusMap[status] || '未知状态'
    },

    // 订单状态相关方法
    getOrderStatusClass(status) {
      const statusMap = {
        'pending': 'status-pending',
        'paid': 'status-success',
        'signed': 'status-success',
        'completed': 'status-success',
        'transfer': 'status-info'
      }
      return statusMap[status] || 'status-default'
    },

    getOrderStatusText(status) {
      const statusMap = {
        'pending': '待支付',
        'paid': '已支付',
        'signed': '已签约',
        'completed': '已完成',
        'transfer': '已转移'
      }
      return statusMap[status] || '未知状态'
    },

    // 支付方式文本
    getPaymentTypeText(type) {
      const typeMap = {
        'cash': '现金',
        'scan_code': '扫码支付',
        'subscription': '订阅',
        'wxpay_online': '微信在线支付'
      }
      return typeMap[type] || type || '未知'
    },

    // 日期格式化方法
    formatDate(dateStr) {
      if (!dateStr) return ''
      try {
        const date = new Date(dateStr)
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
      } catch (e) {
        return dateStr
      }
    },

    formatDateTime(dateTimeStr) {
      if (!dateTimeStr) return ''
      try {
        const date = new Date(dateTimeStr)
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
      } catch (e) {
        return dateTimeStr
      }
    },

    // 加载编辑所需的选项数据
    async loadEditOptions() {
      try {
        // 加载教练列表
        const coachResponse = await apiRoute.common_getCoachList()
        if (coachResponse.code === 1) {
          // API返回的数据结构包含 coach_list、education_list 等字段
          const data = coachResponse.data
          this.coachList = data.coach_list || []
          this.educationList = data.education_list || []

          console.log('教练列表加载完成:', this.coachList)
          console.log('教务列表加载完成:', this.educationList)
        }
      } catch (error) {
        console.error('加载选项数据失败:', error)
        // 设置空数组作为默认值
        this.coachList = []
        this.educationList = []
      }
    },

    // 加载学员列表
    async loadStudentList() {
      try {
        // 使用搜索学员接口获取学员列表
        const response = await apiRoute.searchStudents({ limit: 100 })
        if (response.code === 1) {
          this.studentList = response.data || []
        }
      } catch (error) {
        console.error('加载学员列表失败:', error)
      }
    },

    // 打开编辑弹窗
    openEditModal() {
      if (!this.courseDetail) return

      // 检查选项数据是否已加载
      if (!this.coachList || !Array.isArray(this.coachList) || this.coachList.length === 0) {
        uni.showToast({
          title: '数据加载中，请稍候',
          icon: 'none'
        })
        return
      }

      // 初始化编辑表单
      const studentCourse = this.courseDetail.student_course_info
      this.editForm = {
        total_hours: studentCourse.total_hours || '',
        gift_hours: studentCourse.gift_hours || 0,
        start_date: studentCourse.start_date || '',
        end_date: studentCourse.end_date || '',
        single_session_count: studentCourse.single_session_count || '',
        main_coach_id: studentCourse.main_coach_id || '',
        assistant_ids: studentCourse.assistant_ids || '',
        education_id: studentCourse.education_id || ''
      }

      // 设置选择器索引
      this.setPickerIndexes()

      this.showEditModal = true
    },

    // 设置选择器索引
    setPickerIndexes() {
      // 确保教练列表已加载
      if (!this.coachList || !Array.isArray(this.coachList)) {
        console.warn('教练列表未加载完成')
        return
      }

      // 主教练
      if (this.editForm.main_coach_id) {
        const index = this.coachList.findIndex(c => c.id === parseInt(this.editForm.main_coach_id))
        if (index >= 0) {
          this.selectedCoachIndex = index
          this.selectedCoachName = this.coachList[index].name
        }
      }

      // 助教（多选）
      if (this.editForm.assistant_ids) {
        const assistantIds = this.editForm.assistant_ids.split(',').map(id => parseInt(id)).filter(id => !isNaN(id))
        const indexes = assistantIds.map(id => {
          const index = this.coachList.findIndex(c => c.id === id)
          return index >= 0 ? index : 0
        })
        this.selectedAssistantIndexes = indexes.length > 0 ? indexes : [0]

        const names = indexes.map(index => {
          return this.coachList[index] ? this.coachList[index].name : ''
        }).filter(name => name)
        this.selectedAssistantNames = names.join('、')
      }

      // 教务
      if (this.editForm.education_id && this.educationList && Array.isArray(this.educationList)) {
        const index = this.educationList.findIndex(e => e.id === parseInt(this.editForm.education_id))
        if (index >= 0) {
          this.selectedEducationIndex = index
          this.selectedEducationName = this.educationList[index].name
        }
      }
    },

    // 保存课程编辑
    async saveCourseEdit() {
      if (this.saving) return

      // 验证表单
      if (!this.editForm.total_hours || this.editForm.total_hours <= 0) {
        uni.showToast({
          title: '请输入有效的正式课时数',
          icon: 'none'
        })
        return
      }

      if (!this.editForm.start_date || !this.editForm.end_date) {
        uni.showToast({
          title: '请选择开始和结束日期',
          icon: 'none'
        })
        return
      }

      if (new Date(this.editForm.end_date) <= new Date(this.editForm.start_date)) {
        uni.showToast({
          title: '结束日期必须晚于开始日期',
          icon: 'none'
        })
        return
      }

      this.saving = true
      try {
        console.log('保存课程编辑:', this.editForm)

        // TODO: 调用保存API
        // 这里需要根据实际API调整

        // 模拟保存成功
        setTimeout(() => {
          // 更新本地数据
          const studentCourse = this.courseDetail.student_course_info
          Object.assign(studentCourse, this.editForm)

          this.saving = false
          this.showEditModal = false

          uni.showToast({
            title: '保存成功',
            icon: 'success'
          })
        }, 1000)

      } catch (error) {
        console.error('保存失败:', error)
        this.saving = false
        uni.showToast({
          title: '保存失败，请重试',
          icon: 'none'
        })
      }
    },

    // 打开转移弹窗
    openTransferModal() {
      if (!this.courseDetail) return

      // 初始化转移表单
      this.transferForm = {
        new_student_id: '',
        reason: ''
      }
      this.selectedStudentIndex = 0
      this.selectedStudentName = ''

      // 加载学员列表
      this.loadStudentList()

      this.showTransferModal = true
    },

    // 确认转移
    async confirmTransfer() {
      if (this.transferring) return

      if (!this.transferForm.new_student_id) {
        uni.showToast({
          title: '请选择新学员',
          icon: 'none'
        })
        return
      }

      if (this.transferForm.new_student_id === this.courseDetail.student_course_info.student_id) {
        uni.showToast({
          title: '不能转移给同一学员',
          icon: 'none'
        })
        return
      }

      this.transferring = true
      try {
        console.log('确认课程转移:', this.transferForm)

        // TODO: 调用转移API
        // 这里需要根据实际API调整

        // 模拟转移成功
        setTimeout(() => {
          this.transferring = false
          this.showTransferModal = false

          uni.showToast({
            title: '转移成功',
            icon: 'success'
          })

          // 转移成功后返回上一页
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        }, 1000)

      } catch (error) {
        console.error('转移失败:', error)
        this.transferring = false
        uni.showToast({
          title: '转移失败，请重试',
          icon: 'none'
        })
      }
    },

    // 关闭编辑弹窗
    closeEditModal() {
      this.showEditModal = false
    },

    // 关闭转移弹窗
    closeTransferModal() {
      this.showTransferModal = false
    },

    // 选择器事件处理
    onStartDateChange(e) {
      this.editForm.start_date = e.detail.value
    },

    onEndDateChange(e) {
      this.editForm.end_date = e.detail.value
    },

    onCoachChange(e) {
      const index = e.detail.value
      this.selectedCoachIndex = index
      if (this.coachList && this.coachList[index]) {
        const coach = this.coachList[index]
        this.editForm.main_coach_id = coach.id
        this.selectedCoachName = coach.name
      }
    },

    onAssistantChange(e) {
      const indexes = e.detail.value
      this.selectedAssistantIndexes = indexes

      if (this.coachList && Array.isArray(this.coachList)) {
        const assistants = indexes.map(index => this.coachList[index]).filter(Boolean)
        this.editForm.assistant_ids = assistants.map(item => item.id).join(',')
        this.selectedAssistantNames = assistants.map(item => item.name).join('、')
      }
    },

    onEducationChange(e) {
      const index = e.detail.value
      this.selectedEducationIndex = index
      if (this.educationList && this.educationList[index]) {
        const education = this.educationList[index]
        this.editForm.education_id = education.id
        this.selectedEducationName = education.name
      }
    },

    onStudentChange(e) {
      const index = e.detail.value
      this.selectedStudentIndex = index
      if (this.studentList && this.studentList[index]) {
        const student = this.studentList[index]
        this.transferForm.new_student_id = student.id
        this.selectedStudentName = student.name
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.course-detail {
  min-height: 100vh;
  background: #1a1a1a;
  padding: 24rpx;
  padding-bottom: 120rpx;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid #404040;
  border-top: 4rpx solid #29D3B4;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 24rpx;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  color: #999;
  font-size: 28rpx;
}

.detail-container {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.info-card {
  background: #2a2a2a;
  border-radius: 16rpx;
  padding: 32rpx;
  border: 1px solid #404040;
}

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

.card-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #fff;
}

.status-badge {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 500;

  &.status-active {
    background: rgba(41, 211, 180, 0.2);
    color: #29D3B4;
  }

  &.status-expired {
    background: rgba(244, 67, 54, 0.2);
    color: #F44336;
  }

  &.status-pending {
    background: rgba(255, 193, 7, 0.2);
    color: #FFC107;
  }

  &.status-extended {
    background: rgba(33, 150, 243, 0.2);
    color: #2196F3;
  }

  &.status-completed {
    background: rgba(156, 39, 176, 0.2);
    color: #9C27B0;
  }
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.info-label {
  font-size: 26rpx;
  color: #999;
}

.info-value {
  font-size: 28rpx;
  color: #fff;
  font-weight: 500;
}

// 课时统计样式
.hours-summary {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24rpx;
  background: #333;
  border-radius: 12rpx;
  padding: 24rpx;
}

.summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;

  &.total {
    .summary-value {
      color: #29D3B4;
    }
  }

  &.used {
    .summary-value {
      color: #FF6B35;
    }
  }

  &.remaining {
    .summary-value {
      color: #2196F3;
    }
  }
}

.summary-label {
  font-size: 24rpx;
  color: #999;
}

.summary-value {
  font-size: 32rpx;
  font-weight: 600;
}

.hours-details {
  margin-bottom: 24rpx;
}

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

  &:last-child {
    border-bottom: none;
  }
}

.hours-label {
  font-size: 28rpx;
  color: #fff;
}

.hours-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4rpx;
}

.hours-total {
  font-size: 28rpx;
  color: #fff;
  font-weight: 500;
}

.hours-used {
  font-size: 24rpx;
  color: #FF6B35;
}

// 教练团队样式
.coach-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.coach-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 16rpx;
  background: #333;
  border-radius: 12rpx;
}

.coach-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: #29D3B4;
  display: flex;
  align-items: center;
  justify-content: center;

  &.education {
    background: #2196F3;
  }

  &.assistant {
    background: #FF6B35;
  }
}

.coach-initial {
  font-size: 24rpx;
  color: #fff;
  font-weight: 600;
}

.coach-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.coach-role {
  font-size: 24rpx;
  color: #999;
}

.coach-name {
  font-size: 28rpx;
  color: #fff;
  font-weight: 500;
}

// 使用记录样式
.record-count {
  font-size: 24rpx;
  color: #999;
}

.usage-records {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.record-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx;
  background: #333;
  border-radius: 8rpx;
}

.date-text {
  font-size: 28rpx;
  color: #fff;
}

.hours-text {
  font-size: 28rpx;
  color: #FF6B35;
  font-weight: 500;
}

.no-records, .no-order {
  text-align: center;
  padding: 40rpx;
  color: #999;
  font-size: 28rpx;
}

// 订单信息样式
.order-info {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 16rpx;
  border-bottom: 1px solid #404040;
}

.order-id {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.order-label {
  font-size: 24rpx;
  color: #999;
}

.order-value {
  font-size: 28rpx;
  color: #fff;
  font-weight: 500;

  &.amount {
    color: #29D3B4;
    font-size: 32rpx;
    font-weight: 600;
  }
}

.order-status {
  padding: 6rpx 12rpx;
  border-radius: 16rpx;
  font-size: 22rpx;
  font-weight: 500;

  &.status-success {
    background: rgba(41, 211, 180, 0.2);
    color: #29D3B4;
  }

  &.status-pending {
    background: rgba(255, 193, 7, 0.2);
    color: #FFC107;
  }

  &.status-info {
    background: rgba(33, 150, 243, 0.2);
    color: #2196F3;
  }
}

.order-details {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-remark {
  padding: 16rpx;
  background: #333;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.remark-label {
  font-size: 24rpx;
  color: #999;
}

.remark-text {
  font-size: 26rpx;
  color: #fff;
  line-height: 1.4;
}

.progress-section {
  margin-top: 24rpx;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.progress-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.progress-label {
  font-size: 26rpx;
  color: #fff;
  min-width: 140rpx;
}

.progress-bar {
  flex: 1;
  height: 12rpx;
  background: #404040;
  border-radius: 6rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #29D3B4 0%, #4ECDC4 100%);
  border-radius: 6rpx;
  transition: width 0.3s ease;

  &.gift {
    background: linear-gradient(90deg, #FF6B35 0%, #FFB74D 100%);
  }
}

.progress-text {
  font-size: 24rpx;
  color: #fff;
  min-width: 80rpx;
  text-align: right;
}

// 错误页面样式
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  text-align: center;
}

.error-icon {
  font-size: 120rpx;
  margin-bottom: 32rpx;
}

.error-text {
  font-size: 32rpx;
  color: #999;
  margin-bottom: 32rpx;
}

.retry-btn {
  padding: 20rpx 40rpx;
  background: #29D3B4;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  font-size: 28rpx;
}

// 操作按钮样式
.action-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #2a2a2a;
  padding: 16rpx 24rpx;
  display: flex;
  gap: 16rpx;
  border-top: 1px solid #404040;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  padding: 16rpx 20rpx;
  border-radius: 8rpx;
  border: none;
  font-size: 26rpx;
  font-weight: 500;

  &.primary {
    background: #29D3B4;
    color: #fff;
  }

  &.secondary {
    background: #404040;
    color: #fff;
  }

  &:active {
    opacity: 0.8;
  }
}

.btn-icon {
  font-size: 24rpx;
}

.btn-text {
  font-size: 26rpx;
}

// 弹窗样式
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: #2a2a2a;
  border-radius: 16rpx;
  width: 90%;
  max-width: 650rpx;
  max-height: 80vh;
  overflow: hidden;
  border: 1px solid #404040;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  border-bottom: 1px solid #404040;
}

.modal-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #fff;
}

.close-btn {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #999;
  border-radius: 50%;

  &:active {
    background: rgba(255, 255, 255, 0.1);
  }
}

.modal-body {
  padding: 32rpx;
  max-height: 50vh;
  overflow-y: auto;
}

.transfer-info {
  background: #3a3a3a;
  padding: 24rpx;
  border-radius: 8rpx;
  margin-bottom: 24rpx;
}

.info-text {
  display: block;
  font-size: 28rpx;
  color: #fff;
  margin-bottom: 12rpx;
}

.course-name {
  display: block;
  font-size: 24rpx;
  color: #29D3B4;
}

.form-group {
  margin-bottom: 24rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #fff;
  margin-bottom: 16rpx;
}

.form-input {
  width: 100%;
  padding: 0 24rpx;
  background: #3a3a3a;
  border: 1px solid #404040;
  border-radius: 8rpx;
  color: #fff;
  font-size: 28rpx;
  height: 80rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;

  &:focus {
    border-color: #29D3B4;
  }
}

.form-textarea {
  width: 100%;
  padding: 20rpx 24rpx;
  background: #3a3a3a;
  border: 1px solid #404040;
  border-radius: 8rpx;
  color: #fff;
  font-size: 28rpx;
  min-height: 120rpx;
  resize: none;
  height: auto;
  box-sizing: border-box;

  &:focus {
    border-color: #29D3B4;
  }
}

.picker-input {
  width: 100%;
  padding: 20rpx 24rpx;
  background: #3a3a3a;
  border: 1px solid #404040;
  border-radius: 8rpx;
  color: #fff;
  font-size: 28rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80rpx;
  box-sizing: border-box;

  &:active {
    border-color: #29D3B4;
  }
}

.picker-arrow {
  color: #999;
  font-size: 24rpx;
}

.modal-footer {
  display: flex;
  gap: 20rpx;
  padding: 32rpx;
  border-top: 1px solid #404040;
}

.btn {
  flex: 1;
  padding: 20rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  font-weight: 500;
  border: none;

  &.btn-cancel {
    background: #404040;
    color: #fff;
  }

  &.btn-confirm {
    background: #29D3B4;
    color: #fff;
  }

  &:disabled {
    opacity: 0.6;
  }
}
</style>