zhjwxt/uniapp/components/course-edit-popup/course-edit-popup.vue

<template>
  <uni-popup ref="popup" type="center">
    <view class="popup-container">
      <view class="popup-header">
        <view class="popup-title">修改教练配置</view>
        <view class="popup-close" @click="close">✕</view>
      </view>
      <view class="course-edit-container">
        <view class="edit-section">
          <view class="section-title">主教练（单选）</view>
          <view v-if="coachList.length === 0" class="empty-tip">暂无主教练数据</view>
          <view class="coach-list">
            <view v-for="coach in coachList" :key="coach.person_id" class="coach-item"
                  :class="{selected: selectedMainCoach === coach.person_id}"
                  @click="selectMainCoach(coach.person_id)">
              <view class="coach-name">{{ coach.name }}</view>
              <view class="coach-check" v-if="selectedMainCoach === coach.person_id">✓</view>
            </view>
          </view>
        </view>

        <view class="edit-section">
          <view class="section-title">教务（单选）</view>
          <view v-if="educationList.length === 0" class="empty-tip">暂无教务数据</view>
          <view class="coach-list">
            <view v-for="education in educationList" :key="education.person_id" class="coach-item"
                  :class="{selected: selectedEducation === education.person_id}"
                  @click="selectEducation(education.person_id)">
              <view class="coach-name">{{ education.name }}</view>
              <view class="coach-check" v-if="selectedEducation === education.person_id">✓</view>
            </view>
          </view>
        </view>

        <view class="edit-section">
          <view class="section-title">助教（多选）</view>
          <view v-if="assistantList.length === 0" class="empty-tip">暂无助教数据</view>
          <view class="coach-list">
            <view v-for="assistant in assistantList" :key="assistant.person_id" class="coach-item"
                  :class="{selected: selectedAssistants.includes(assistant.person_id)}"
                  @click="toggleAssistant(assistant.person_id)">
              <view class="coach-name">{{ assistant.name }}</view>
              <view class="coach-check" v-if="selectedAssistants.includes(assistant.person_id)">✓</view>
            </view>
          </view>
        </view>
      </view>
      <view class="popup-footer">
        <view class="popup-btn cancel-btn" @click="close">取消</view>
        <view class="popup-btn confirm-btn" @click="confirm">确认</view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  name: 'CourseEditPopup',
  components: {
    uniPopup: () => import('@/components/uni-popup/uni-popup.vue')
  },
  props: {
    // 教练列表
    coachList: {
      type: Array,
      default: () => []
    },
    // 教务列表
    educationList: {
      type: Array,
      default: () => []
    },
    // 助教列表
    assistantList: {
      type: Array,
      default: () => []
    },
    // 当前课程信息
    currentCourse: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
      selectedMainCoach: null, // 选中的主教练ID
      selectedEducation: null, // 选中的教务ID
      selectedAssistants: [], // 选中的助教ID数组
    }
  },
  methods: {
    // 打开弹窗
    open(courseData = {}) {
      console.log('CourseEditPopup - 打开弹窗，课程数据:', courseData)
      
      // 初始化选中状态
      this.selectedMainCoach = courseData.main_coach_id || null
      this.selectedEducation = courseData.education_id || null
      this.selectedAssistants = courseData.assistant_ids ? 
        courseData.assistant_ids.split(',').map(Number) : []
      
      console.log('CourseEditPopup - 初始化选中状态:', {
        selectedMainCoach: this.selectedMainCoach,
        selectedEducation: this.selectedEducation,
        selectedAssistants: this.selectedAssistants,
      })
      
      this.$refs.popup.open()
    },

    // 关闭弹窗
    close() {
      this.$refs.popup.close()
      this.$emit('close')
    },

    // 选择主教练
    selectMainCoach(personId) {
      this.selectedMainCoach = personId
      console.log('CourseEditPopup - 选择主教练:', personId)
    },

    // 选择教务
    selectEducation(personId) {
      this.selectedEducation = personId
      console.log('CourseEditPopup - 选择教务:', personId)
    },

    // 切换助教选择
    toggleAssistant(personId) {
      const index = this.selectedAssistants.indexOf(personId)
      if (index > -1) {
        this.selectedAssistants.splice(index, 1)
      } else {
        this.selectedAssistants.push(personId)
      }
      console.log('CourseEditPopup - 切换助教选择:', personId, '当前选中:', this.selectedAssistants)
    },

    // 确认修改
    confirm() {
      const result = {
        main_coach_id: this.selectedMainCoach,
        education_id: this.selectedEducation,
        assistant_ids: this.selectedAssistants.join(','),
        selectedAssistants: this.selectedAssistants
      }
      
      console.log('CourseEditPopup - 确认修改，返回数据:', result)
      this.$emit('confirm', result)
      this.close()
    }
  }
}
</script>

<style lang="less" scoped>
@import './course-edit-popup.less';
</style>