ylrz_scrm_companyUI/src/views/course/userCoursePeriod/index.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="营期名称" prop="periodName">
        <el-input
          v-model="queryParams.periodName"
          placeholder="请输入营期名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="开营日期开始" prop="periodStartingTime" label-width="120px">
        <el-date-picker clearable size="small" style="width: 200px"
                        v-model="queryParams.periodStartingTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择开营日期开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="开营日期结束" prop="periodEndTime" label-width="120px">
        <el-date-picker clearable size="small" style="width: 300px"
                        v-model="queryParams.periodEndTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择开营日期结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="primary"-->
<!--          plain-->
<!--          icon="el-icon-plus"-->
<!--          size="mini"-->
<!--          @click="handleAdd"-->
<!--          v-hasPermi="['course:period:add']"-->
<!--        >新增-->
<!--        </el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="warning"-->
<!--          plain-->
<!--          icon="el-icon-download"-->
<!--          size="mini"-->
<!--          @click="handleExport"-->
<!--          v-hasPermi="['course:period:export']"-->
<!--        >导出-->
<!--        </el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="primary"-->
<!--          plain-->
<!--          icon="el-icon-edit"-->
<!--          size="mini"-->
<!--          @click="handleBatchSetRedPacket"-->
<!--          v-hasPermi="['course:period:export']"-->
<!--          :disabled="batchSetRedPacketDisabled"-->
<!--        >批量设置红包-->
<!--        </el-button>-->
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="periodList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="营期名称" align="center" prop="periodName"/>
      <el-table-column label="营期状态" align="center" prop="periodStatus" width="100"
                       :formatter="periodStatusFormatter"/>
      <el-table-column label="开营开始时间" align="center" prop="periodStartingTime" width="180"/>
      <el-table-column label="开营结束时间" align="center" prop="periodEndTime" width="180"/>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['course:period:edit']"
          >详情
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-setting"
            @click="handlePeriodSettings(scope.row)"
          >营期相关设置
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改会员营期对话框-->
    <el-drawer :title="title" :visible.sync="open" size="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="营期名称" prop="periodName">
          <el-input disabled v-model="form.periodName" placeholder="请输入营期名称"/>
        </el-form-item>
        <el-form-item label="课程风格" prop="courseStyle">
          <image-upload disabled v-model="form.courseStyle" :limit="1"/>
        </el-form-item>
        <el-form-item label="直播间风格" prop="liveRoomStyle">
          <image-upload disabled v-model="form.liveRoomStyle" :limit="1"/>
        </el-form-item>
        <el-form-item label="红包发放方式" prop="redPacketGrantMethod">
          <el-radio-group disabled v-model="form.redPacketGrantMethod">
            <el-radio :label="1">按课程</el-radio>
            <el-radio :label="2">按营期</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="营期类型" prop="periodType">
          <el-radio-group disabled v-model="form.periodType">
            <el-radio :label="1">多课程</el-radio>
            <el-radio :label="2">单课程</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="开营日期" prop="periodStartingTime">
          <el-date-picker
            disabled
            :style="{display: form.periodType == 1 ? '' : 'none !important'}"
            v-model="form.dateRange"
            @change="timeChange(1)"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
          <el-date-picker
            disabled
            :style="{display: form.periodType == 2 ? '' : 'none !important'}"
            @change="timeChange(2)"
            v-model="form.date"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
    </el-drawer>

    <!-- 添加训练营对话框 -->
    <el-dialog :title="campForm.trainingCampId ? '修改训练营' : '新建训练营'" :visible.sync="campDialogVisible"
               width="500px" append-to-body>
      <el-form ref="campForm" :model="campForm" :rules="campRules" label-width="100px">
        <el-form-item label="训练营名称" prop="trainingCampName">
          <el-input v-model="campForm.trainingCampName" placeholder="请输入训练营名称"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitCampForm">确 定</el-button>
        <el-button @click="cancelCampForm">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加课程对话框-->
    <el-dialog title="添加课程" :visible.sync="course.addOpen" width="500px" append-to-body>
      <el-form ref="courseAddForm" :model="course.form" label-width="100px">
        <el-form-item label="课程" prop="courseId">
          <el-select filterable v-model="course.form.courseId" placeholder="请选择课程" clearable size="small"
                     @change="courseChange(course.form.courseId)" style="width: 100%" :value-key="'dictValue'">
            <el-option
              v-for="dict in courseList"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="parseInt(dict.dictValue)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="小节" prop="videoId">
          <el-select filterable v-model="course.form.videoIds" placeholder="请选择小节"
                     :multiple-limit="getDiff(course.row.periodStartingTime, course.row.periodEndTime) - course.total"
                     multiple clearable size="small" style="width: 100%" :value-key="'dictValue'">
            <el-option
              v-for="dict in videoList"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="parseInt(dict.dictValue)"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitCourseForm">确 定</el-button>
        <el-button @click="closeAddCourse">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改看课时间" :visible.sync="updateCourse.open" width="500px" append-to-body>
      <el-form ref="courseUpdateForm" :model="updateCourse.form" label-width="100px">
        <el-form-item label="看课时间" prop="timeRange">
          <el-time-picker
            is-range
            v-model="updateCourse.form.timeRange"
            range-separator="至"
            start-placeholder="开始时间"
            value-format="HH:mm:ss"
            end-placeholder="结束时间"
            placeholder="选择时间范围">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="领取红包时间" prop="lastJoinTime">
          <el-time-picker
            v-model="updateCourse.form.joinTime"
            :selectableRange="updateCourse.form.timeRange"
            value-format="HH:mm:ss"
            placeholder="选择时间范围">
          </el-time-picker>
          <p style="color: red;margin: 0;font-size: 12px">超过领取红包时间，只允许看课，不允许领取红包</p>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitUpdateCourseForm">确 定</el-button>
        <el-button @click="closeUpdateCourse">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改营期时间" :visible.sync="updateDateOpen" width="500px" append-to-body>
      <el-form ref="courseUpdateForm" :model="form" label-width="100px">
        <el-form-item label="营期时间" prop="dayDate">
          <el-date-picker
            v-model="form.dayDate"
            :selectableRange="form.dayDate"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateDate">确 定</el-button>
        <el-button @click="updateDateOpen = false">取 消</el-button>
      </div>
    </el-dialog>

    <!--    <red-packet-->
    <!--      :visible.sync="redPacketVisible"-->
    <!--      :periodId="currentRedPacketData.periodId"-->
    <!--      :videoId="currentRedPacketData.videoId"-->
    <!--      @success="handleRedPacketSuccess"-->
    <!--    />-->

    <!-- 营期相关设置抽屉 -->
    <el-drawer
      title="营期相关设置"
      :visible.sync="periodSettingsVisible"
      direction="rtl"
      size="70%"
      :destroy-on-close="true"
      append-to-body
      custom-class="period-settings-drawer"
    >
      <div class="drawer-content" style="margin-left: 25px">
        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
          <el-tab-pane label="课程管理" name="course">
            <el-table v-loading="course.loading" :data="course.list" @selection-change="handleSelectionCourseChange">
              <el-table-column label="课程" align="center" prop="courseName" width="180"/>
              <el-table-column label="小节" align="center" prop="videoName"/>
              <el-table-column label="营期时间" align="center" prop="dayDate"/>
              <el-table-column label="开始时间" align="center" prop="startDateTime" width="100">
                <template slot-scope="scope">
                  <el-tag>{{ parseTime(scope.row.startDateTime, '{h}:{i}:{s}') }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="结束时间" align="center" prop="endDateTime" width="100">
                <template slot-scope="scope">
                  <el-tag type="success">{{ parseTime(scope.row.endDateTime, '{h}:{i}:{s}') }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="领取红包时间" align="center" prop="lastJoinTime" width="100">
                <template slot-scope="scope">
                  <el-tag type="danger">{{ parseTime(scope.row.lastJoinTime, '{h}:{i}:{s}') }}</el-tag>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="课程统计" name="statistics">
            <course-statistics
              :periodId="periodSettingsData.periodId"
              :active="activeTab === 'statistics'"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>

    <batch-red-packet
      :visible.sync="batchRedPacketVisible"
      :selected-data="selectedPeriods"
      @success="handleBatchRedPacketSuccess"
    />

  </div>
</template>

<script>
import {
  addPeriod,
  delPeriod,
  exportPeriod,
  getPeriod,
  pagePeriod,
  updatePeriod,
  getDays,
  addCourse,
  updateCourseTime,
  updateCourseDate,
  updateListCourseData,
  periodCourseMove,
  closePeriod
} from "@/api/course/userCoursePeriod";
import {getCompanyList} from "@/api/company/company";
import {courseList, videoList} from '@/api/course/courseRedPacketLog'
import RedPacket from './redPacket.vue'
import BatchRedPacket from './batchRedPacket.vue'
import CourseStatistics from './statistics.vue'

export default {
  name: "Period",
  components: {
    RedPacket,
    BatchRedPacket,
    CourseStatistics
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      updateDateOpen: false,
      // 左侧遮罩层
      leftLoading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 左侧总条数
      leftTotal: 0,
      // 会员营期表格数据
      periodList: [],
      // 左侧列表数据
      leftList: [],
      videoList: [],
      // 弹出层标题
      title: "",
      isDisabledDateRange: false, //是否禁用开营日期
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        periodName: null,
        periodStartingTime: null,
        periodEndTime: null,
        companyIdList: []
      },
      // 左侧查询参数
      leftQueryParams: {
        pageNum: 1,
        pageSize: 10,
        hasNextPage: false,
        scs: 'order_number(desc),training_camp_id(desc)',
        trainingCampName: null
      },
      // 表单参数
      form: {},
      course: {
        open: false,
        row: {},
        list: [],
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        loading: true,
        total: 0,
        addOpen: false,
        form: {},
      },
      updateCourse: {
        open: false,
        loading: true,
        ids: [],
        form: {},
      },
      // 表单校验
      rules: {},
      // 公司选项
      companyOptions: [],
      // 训练营列表
      campList: [],
      // 激活的训练营索引
      activeCampIndex: null,
      // 训练营对话框是否显示
      campDialogVisible: false,
      courseList: false,
      // 训练营表单
      campForm: {
        trainingCampId: null,
        trainingCampName: ''
      },
      // 训练营表单校验
      campRules: {
        trainingCampName: [
          {required: true, message: '训练营名称不能为空', trigger: 'blur'},
          {min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur'}
        ]
      },
      // 滚动节流标志
      scrollThrottle: false,
      // 加载更多状态
      loadingMore: false,
      // 设置红包对话框
      redPacketVisible: false,
      periodCompanyList: [],
      currentRedPacketData: {
        periodId: '',
        videoId: ''
      },
      // 营期相关设置抽屉
      periodSettingsVisible: false,
      activeTab: 'course',
      periodSettingsData: {},
      companyList: [],
      courseDialogVisible: false,
      redPacketList: [],
      currentCompany: null,
      // 选中的营期数据
      selectedPeriods: [],
      // 批量设置红包按钮是否禁用
      batchSetRedPacketDisabled: true,
      // 批量设置红包弹出框
      batchRedPacketVisible: false,
    };
  },
  created() {

    courseList().then(response => {
      this.courseList = response.list;
    });
    this.getCompanyList();
    this.getList();
  },
  methods: {
    /** 查询会员营期列表 */
    getList() {
      this.loading = true;
      const params = {...this.queryParams};
      pagePeriod(params).then(response => {
        this.periodList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询左侧列表 */
    getLeftList() {
      this.leftLoading = true;
      // 重置页码和加载更多状态
      this.leftQueryParams.pageNum = 1;
      this.loadingMore = false;

      // 训练营数据
      listCamp(this.leftQueryParams).then(response => {
        if (response && response.code === 200) {
          this.campList = response.data.list || [];
          this.leftQueryParams.hasNextPage = response.data.hasNextPage;
          this.activeCampIndex = this.campList.length > 0 ? 0 : null;
          this.selectCamp(this.activeCampIndex);
          // 如果当前显示的列表高度不足以触发滚动，但还有更多数据，自动加载下一页
          this.$nextTick(() => {
            const scrollEl = this.$refs.campList;
            if (scrollEl && this.leftQueryParams.hasNextPage && scrollEl.scrollHeight <= scrollEl.clientHeight) {
              this.loadMoreCamps();
            }
          });
        } else {
          this.$message.error(response.msg || '获取训练营列表失败');
          this.campList = [];
          this.leftQueryParams.hasNextPage = false;
        }
        this.leftLoading = false;
      }).catch(error => {
        console.error('获取训练营列表失败:', error);
        this.$message.error('获取训练营列表失败');
        this.campList = [];
        this.leftQueryParams.hasNextPage = false;
        this.leftLoading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 左侧搜索按钮操作 */
    handleLeftQuery() {
      // 重置页码和列表
      this.leftQueryParams.pageNum = 1;
      this.campList = [];
      this.getLeftList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.companyIdList = [];
      this.handleQuery();
    },
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.periodId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
      // 更新批量设置红包相关数据
      this.selectedPeriods = selection;
      this.batchSetRedPacketDisabled = selection.length === 0;
    },
    handleSelectionCourseChange(selection) {
      this.updateCourse.ids = selection.map(item => item.id)
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加会员营期";
      this.isDisabledDateRange = false;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const periodId = row.periodId || this.ids
      getPeriod(periodId).then(response => {
        this.form = response.data;
        if (this.form.companyId) {
          this.form.companyId = this.form.companyId.split(',').map(id => Number(id));
        }
        // 设置看课时间范围（回显）
        if (this.form.viewStartTime && this.form.viewEndTime) {
          this.form.timeRange = [this.form.viewStartTime, this.form.viewEndTime];
        }
        if (this.form.periodType == 1) {
          this.form.dateRange = [this.form.periodStartingTime, this.form.periodEndTime];
        }
        if (this.form.periodType == 1) {
          this.form.date = this.form.periodStartingTime;
        }
        this.open = true;
        this.title = "修改会员营期";
        this.isDisabledDateRange = true;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let data = JSON.parse(JSON.stringify(this.form));
          // 处理看课时间范围
          if (data.timeRange && data.timeRange.length === 2) {
            data.viewStartTime = data.timeRange[0];
            data.viewEndTime = data.timeRange[1];
          }
          data.companyId = data.companyId.join()
          data.trainingCampId = this.queryParams.trainingCampId
          if (data.periodId != null) {
            updatePeriod(data).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              }
            });
          } else {
            addPeriod(data).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      //添加删除判断，只能删除未开始的营期
      console.log(row.periodStatus)
      if (row.periodStatus !== 1) {
        this.$message.error('营期处于进行中或者结束，不能删除');
        return;
      }
      const periodIds = row.periodId || this.ids;
      this.$confirm('是否确认删除该营期？', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delPeriod(periodIds);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(function () {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有会员营期数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return exportPeriod(queryParams);
      }).then(response => {
        this.download(response.msg);
      }).catch(function () {
      });
    },

    /** 批量设置红包 */
    handleBatchSetRedPacket() {
      if (this.selectedPeriods.length === 0) {
        this.$message.warning('请至少选择一个营期');
        return;
      }
      this.batchRedPacketVisible = true;
    },

    /** 处理批量设置红包保存 */
    // handleBatchRedPacketSave(data) {
    //   // 这里等待接口提供后补充具体实现
    //   // 示例代码：
    //   // batchSetRedPacket(data).then(response => {
    //   //   if (response.code === 200) {
    //   //     this.$message.success('批量设置成功');
    //   //     this.getList();
    //   //   }
    //   // });
    //   this.batchRedPacketVisible = false;
    // },

    /** 获取公司下拉列表*/
    getCompanyList() {
      this.loading = true;
      getCompanyList().then(response => {
        this.companyOptions = response.data;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        periodId: null,
        periodName: null,
        companyId: null,
        courseId: null,
        videoId: null,
        trainingCampId: null,
        createTime: null,
        updateTime: null,
        courseStyle: null,
        liveRoomStyle: null,
        redPacketGrantMethod: 1,
        periodType: 1,
        periodStartingTime: null,
        dateRange: [],
        date: null,
        days: [],
        periodEndTime: null,
        timeRange: [], // 看课时间范围
        viewStartTime: null, // 看课开始时间
        viewEndTime: null, // 看课结束时间
        lastJoinTime: null // 领取红包时间
      };
      this.resetForm("form");
    },
    // 处理训练营列表的逻辑
    handleDeleteCamp(item) {
      this.$confirm(`确定要删除训练营"${item.trainingCampName}"吗？`, '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用删除训练营API
        const trainingCampId = item.trainingCampId;
        this.leftLoading = true;

        delCamp(trainingCampId).then(response => {
          if (response.code === 200) {
            this.$message.success('删除成功');
            // 从列表中移除
            const index = this.campList.findIndex(camp => camp.trainingCampId === trainingCampId);
            if (index !== -1) {
              this.campList.splice(index, 1);
            }
            // 如果删除的是当前选中的训练营，则重置选中状态
            if (this.activeCampIndex === index) {
              this.activeCampIndex = this.campList.length > 0 ? 0 : null;
              if (this.activeCampIndex !== null) {
                // 更新右侧列表
                this.selectCamp(this.activeCampIndex);
              } else {
                // 没有训练营了，清空右侧列表
                this.periodList = [];
              }
            }
          } else {
            this.$message.error(response.msg || '删除失败');
          }
          this.leftLoading = false;
        }).catch(error => {
          this.$message.error('删除失败: ' + error.message);
          this.leftLoading = false;
        });
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    /** 复制训练营 */
    handleCopyCamp(item) {
      // 调用添加训练营API
      copyCamp(item.trainingCampId).then(response => {
        if (response.code === 200) {
          this.$message.success('复制成功');
          // 重新加载训练营列表
          this.getLeftList();
        } else {
          this.$message.error(response.msg || '复制训练营失败');
        }
      }).catch(error => {
        this.$message.error('复制训练营失败: ' + error.message);
      });
    },
    /** 修改训练营按钮操作 */
    handleEditCamp(item) {
      this.resetCampForm();
      this.leftLoading = true;

      // 获取最新的训练营数据
      const trainingCampId = item.trainingCampId;
      // 应该调用获取训练营详情的API
      setTimeout(() => {
        // 填充表单数据
        this.campForm = {
          trainingCampId: item.trainingCampId,
          trainingCampName: item.trainingCampName,
          orderNumber: item.orderNumber || 1,
          status: item.status !== undefined ? item.status : 1
        };
        this.campDialogVisible = true;
        this.leftLoading = false;
      }, 300);
    },
    /** 新建训练营按钮操作 */
    handleAddTrainingCamp() {
      this.resetCampForm();
      this.campDialogVisible = true;
    },
    /** 重置训练营表单 */
    resetCampForm() {
      this.campForm = {
        trainingCampId: null,
        trainingCampName: ''
      };
      // 如果表单已经创建，则重置校验结果
      if (this.$refs.campForm) {
        this.$refs.campForm.resetFields();
      }
    },
    /** 取消训练营表单 */
    cancelCampForm() {
      this.campDialogVisible = false;
      this.resetCampForm();
    },
    /** 提交训练营表单 */
    submitCampForm() {
      this.$refs.campForm.validate(valid => {
        if (valid) {
          // 显示加载中
          this.leftLoading = true;

          // 准备提交的数据
          const submitData = JSON.parse(JSON.stringify(this.campForm));

          // 判断是新增还是修改
          if (submitData.trainingCampId) {
            // 修改训练营
            editCamp(submitData).then(response => {
              if (response.code === 200) {
                this.$message.success('修改训练营成功');
                this.campDialogVisible = false;

                // 更新列表中的数据
                const index = this.campList.findIndex(camp => camp.trainingCampId === submitData.trainingCampId);
                if (index !== -1) {
                  this.campList[index] = {...this.campList[index], ...submitData};
                  // 如果修改的是当前选中的训练营，更新右侧列表
                  if (this.activeCampIndex === index) {
                    this.selectCamp(index);
                  }
                }

                // 重新加载训练营列表
                this.getLeftList();
              } else {
                this.$message.error(response.msg || '修改训练营失败');
                this.leftLoading = false;
              }
            }).catch(error => {
              this.$message.error('修改训练营失败: ' + (error.message || '未知错误'));
              this.leftLoading = false;
            });
          } else {
            // 新增训练营
            addCamp(submitData).then(response => {
              if (response.code === 200) {
                this.$message.success('新建训练营成功');
                this.campDialogVisible = false;
                // 重新加载训练营列表
                this.getLeftList();
              } else {
                this.$message.error(response.msg || '新建训练营失败');
                this.leftLoading = false;
              }
            }).catch(error => {
              this.$message.error('新建训练营失败: ' + (error.message || '未知错误'));
              this.leftLoading = false;
            });
          }
        }
      });
    },
    /** 排序方式改变 */
    handleSortChange(value) {
      this.leftQueryParams.scs = value;
      // 重置页码和列表
      this.leftQueryParams.pageNum = 1;
      this.campList = [];
      this.getLeftList();
    },
    /** 选中训练营 */
    selectCamp(index) {
      if (index == null || index == undefined) return;
      this.activeCampIndex = index;
      // 加载对应的训练营营期数据
      const selectedCamp = this.campList[index];
      this.queryParams.trainingCampId = selectedCamp.trainingCampId;
      this.getList();
    },
    /** 处理滚动事件，实现滚动到底部加载更多 */
    handleScroll() {
      // 如果正在节流中或者正在加载中，则不处理
      if (this.scrollThrottle || this.loadingMore) return;

      // 设置节流，200ms内不再处理滚动事件
      this.scrollThrottle = true;
      setTimeout(() => {
        this.scrollThrottle = false;
      }, 200);

      const scrollEl = this.$refs.campList;
      if (!scrollEl) return;

      // 判断是否滚动到底部：滚动高度 + 可视高度 >= 总高度 - 30（添加30px的容差，提前触发加载）
      const isBottom = scrollEl.scrollTop + scrollEl.clientHeight >= scrollEl.scrollHeight - 30;

      // 如果滚动到底部，且有下一页数据，且当前不在加载中，则加载更多
      if (isBottom && this.leftQueryParams.hasNextPage && !this.leftLoading && !this.loadingMore) {
        this.loadMoreCamps();
      }
    },
    /** 加载更多训练营数据 */
    loadMoreCamps() {
      // 已在加载中，防止重复加载
      if (this.leftLoading || this.loadingMore) return;

      // 设置加载状态
      this.loadingMore = true;

      // 页码加1
      this.leftQueryParams.pageNum += 1;

      // 加载下一页数据
      listCamp(this.leftQueryParams).then(response => {
        if (response && response.code === 200) {
          // 将新数据追加到列表中
          const newList = response.data.list || [];
          if (newList.length > 0) {
            this.campList = [...this.campList, ...newList];
          }

          // 更新是否有下一页的标志
          this.leftQueryParams.hasNextPage = response.data.hasNextPage;

          // 如果当前显示的列表高度不足以触发滚动，但还有更多数据，自动加载下一页
          this.$nextTick(() => {
            const scrollEl = this.$refs.campList;
            if (scrollEl && this.leftQueryParams.hasNextPage && scrollEl.scrollHeight <= scrollEl.clientHeight) {
              // 延迟一点再加载下一页，避免过快加载
              setTimeout(() => {
                this.loadMoreCamps();
              }, 300);
            }
          });
        } else {
          this.$message.error(response.msg || '加载更多训练营失败');
        }
        this.loadingMore = false;
      }).catch(error => {
        console.error('加载更多训练营失败:', error);
        this.$message.error('加载更多训练营失败');
        this.loadingMore = false;
      });
    },
    timeChange(type) {
      if (type == 1) {
        this.form.periodStartingTime = this.form.dateRange[0];
        this.form.periodEndTime = this.form.dateRange[1];


        // 转换为天数
        let days = this.getDiff(this.form.periodStartingTime, this.form.periodEndTime);
        for (let i = 0; i < days; i++) {
          this.form.days.push({lesson: i + 1});
        }
      }
      if (type == 2) {
        this.form.periodStartingTime = this.form.date;
        this.form.periodEndTime = this.form.date;
      }
    },
    getDiff(start, end) {
      if (start == null || start == undefined || start == '') return 0;
      if (end == null || end == undefined || end == '') return 0;
      if (start == end) 1;
      const startDate = this.getUTCDate(start);
      const endDate = this.getUTCDate(end);

      const timeDiff = endDate - startDate;
      return (Math.floor(timeDiff / (1000 * 3600 * 24))) + 1; // 直接取整
    },
    getUTCDate(dateStr) {
      const [year, month, day] = dateStr.split('-').map(Number);
      return new Date(Date.UTC(year, month - 1, day)); // 月份从0开始
    },
    handleCourse(row) {
      this.course = {
        open: false,
        row: {},
        list: [],
        queryParams: {
          pageNum: 1,
          pageSize: 9999,
        },
        loading: true,
        total: 0,
        addOpen: false,
        form: {},
      };
      this.course.open = true;
      this.course.row = row;
      this.course.queryParams.periodId = row.periodId;
      this.getCourseList();
    },
    getCourseList() {
      this.course.loading = true;
      getDays(this.course.queryParams).then(e => {
        this.course.list = e.rows;
        this.course.total = e.total;
        this.course.loading = false;
      });
    },
    handleAddCourse() {
      this.course.addOpen = true;
      this.course.form = {
        periodId: this.course.queryParams.periodId,
        courseId: null,
        videoIds: []
      };
      // 重置表单
      this.$nextTick(() => {
        if (this.$refs.courseAddForm) {
          this.$refs.courseAddForm.resetFields();
        }
      });
    },
    handleUpdateCourse() {
      this.updateCourse.open = true;
      this.updateCourse.form = {
        ids: this.updateCourse.ids,
        joinTime: [],
      };
    },
    closeAddCourse() {
      this.course.addOpen = false;
      this.course.form = {
        periodId: null,
        courseId: null,
        videoIds: []
      };
      // 重置表单
      if (this.$refs.courseAddForm) {
        this.$refs.courseAddForm.resetFields();
      }
    },
    closeUpdateCourse() {
      this.course.open = false;
    },
    courseChange(row) {
      this.course.form.videoIds = [];
      videoList(row).then(response => {
        this.videoList = response.list
      });
    },
    submitCourseForm() {
      this.$refs.courseAddForm.validate(valid => {
        if (valid) {
          if (this.course.form.timeRange != null && this.course.form.timeRange.length === 2) {
            this.course.form.startTime = this.course.form.timeRange[0];
            this.course.form.endTime1 = this.course.form.timeRange[1];
          }
          // 提交数据
          addCourse(this.course.form).then(response => {
            this.$message.success('添加成功');
            this.course.addOpen = false;
            // 重新加载训练营列表
            this.getCourseList();
          });
        }
      });
    },
    submitUpdateCourseForm() {
      this.$refs.courseUpdateForm.validate(valid => {
        if (valid) {
          if (this.updateCourse.form.timeRange != null && this.updateCourse.form.timeRange.length === 2) {
            this.updateCourse.form.startTime = this.updateCourse.form.timeRange[0];
            this.updateCourse.form.endTime1 = this.updateCourse.form.timeRange[1];
          }
          // 提交数据
          updateCourseTime(this.updateCourse.form).then(response => {
            this.$message.success('添加成功');
            this.updateCourse.open = false;
            // 重新加载训练营列表
            this.getCourseList();
          });
        }
      });
    },
    updateDate() {
      updateCourseDate(this.form).then(response => {
        this.$message.success('修改成功');
        this.updateDateOpen = false;
        // 重新加载训练营列表
        this.getCourseList();
      });
    },
    saveCourseData() {
      updateListCourseData(this.course.list).then(response => {
        this.$message.success('保存成功');
        this.getCourseList();
      });
    },
    setRedPacket(row) {
      this.currentRedPacketData = {
        periodId: row.periodId
        // videoId: row.videoId
      };
      this.redPacketVisible = true;
    },
    handleRedPacketSuccess() {
      this.getCourseList();
    },
    handlePeriodSettings(row) {
      this.periodSettingsData = row;
      this.periodSettingsVisible = true;
      // 初始化课程列表
      this.course.queryParams.periodId = row.periodId;
      // 根据当前激活的tab加载对应数据
      this.handleTabClick({name: this.activeTab});
    },
    // 结束营期
    handleClosePeriod(row) {
      const msg = `注: 1.确认结束营期，该营期的开营结束时间改为当天24点。2.当天正在播放中的课程不变。3.第二天如有未开始的课程，统一改为已结束。是否确认结束 ${row.periodName} 营期吗?`
      this.$confirm(msg, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        closePeriod({id: row.periodId}).then(response => {
          if (response.code === 200) {
            this.getList()
          } else {
            this.$message.error(response.msg)
          }
        })
      }).catch(() => {
      })
    },
    handleBatchRedPacketSuccess() {
      this.batchRedPacketVisible = false;
      this.getCourseList();
    },
    /** 处理tab切换 */
    handleTabClick(tab) {
      if (tab.name === 'course') {
        this.getCourseList();
      } else if (tab.name === 'company') {
        this.redPacketVisible = true;
      }
    },
    /** 上移课程 */
    handleTop(row) {
      const currentIndex = this.course.list.findIndex(item => item.id === row.id);
      if (currentIndex <= 0) {
        this.$message.warning('已经是第一条数据');
        return;
      }

      // 获取上一条数据
      const prevRow = this.course.list[currentIndex - 1];
      console.log({
        id: row.id,
        targetId: prevRow.id,
        type: 1 //上移
      })
      periodCourseMove({
        id: row.id,
        targetId: prevRow.id,
        type: 1 //上移
      }).then(response => {
        if (response.code === 200) {
          this.$message.success('上移成功');
          this.getCourseList();
        } else {
          this.$message.error(response.msg || '上移失败');
        }
      }).catch(() => {
        this.$message.error('上移失败');
      });
    },
    /** 下移课程 */
    handleBottom(row) {
      const currentIndex = this.course.list.findIndex(item => item.id === row.id);
      if (currentIndex === -1 || currentIndex >= this.course.list.length - 1) {
        this.$message.warning('已经是最后一条数据');
        return;
      }

      // 获取下一条数据
      const nextRow = this.course.list[currentIndex + 1];

      periodCourseMove({
        id: row.id,
        targetId: nextRow.id,
        type: 2 //下移
      }).then(response => {
        if (response.code === 200) {
          this.$message.success('下移成功');
          this.getCourseList(); // 重新加载列表
        } else {
          this.$message.error(response.msg || '下移失败');
        }
      }).catch(() => {
        this.$message.error('下移失败');
      });
    },
    /** 营期状态格式化 */
    periodStatusFormatter(row) {
      const statusMap = {
        1: '未开始',
        2: '进行中',
        3: '已结束'
      };
      return statusMap[row.periodStatus] || '未知状态';
    },
    /** 开课状态格式化 */
    courseStatusFormatter(row) {
      const statusMap = {
        0: '未开始',
        1: '进行中',
        2: '已结束'
      };
      return statusMap[row.status] || '未知状态';
    },
    /** 营期状态格式化 */
    handleUpdateDate(row) {
      this.form = {id: row.id, dayDate: row.dayDate};
      this.updateDateOpen = true;
    },
  },
};
</script>

<style scoped>
.left-aside {
  background-color: #fff;
  border-right: 1px solid #EBEEF5;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 800px;
}

.left-header {
  padding: 10px;
  border-bottom: 1px solid #EBEEF5;
}

.left-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.search-btn {
  width: 50%;
  height: 36px;
  background-color: #409EFF;
  color: white;
  border: none;
}

.search-input-wrapper {
  margin-bottom: 10px;
}

.sort-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.sort-label {
  width: 70px;
  font-size: 14px;
  font-weight: 600;
  color: #909399;
}

.sort-select {
  margin-left: 10px;
  width: 280px;
}

.color-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.color-label {
  width: 70px;
  color: #606266;
}

.color-hint {
  margin-left: 10px;
  color: #606266;
  font-size: 12px;
}

.color-help {
  margin-left: 5px;
  color: #909399;
  cursor: pointer;
}

.hint-text {
  color: #606266;
  font-size: 12px;
  margin-top: 5px;
}

.camp-list {
  flex: 1;
  overflow-y: auto;
  padding: 3px;
}

.camp-item {
  margin-bottom: 5px;
  padding: 15px;
  background-color: #ffffff;
  position: relative;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  border: 1px solid #eaedf2;
}

.camp-item:last-child {
  margin-bottom: 0;
}

.camp-item:hover {
  background-color: #f5f9ff;
}

.camp-item.active {
  background-color: #eaf4ff;
  border-left: 1px solid #75b8fc;
}

.camp-content {
  flex: 1;
  padding-right: 10px;
}

.camp-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 8px;
  color: #333;
  display: flex;
  align-items: center;
}

.camp-icon {
  font-size: 16px;
  margin-right: 6px;
  color: #409EFF;
}

.camp-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
  color: #c4c1c1;
  line-height: 1.5;
}

.camp-stats {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
  background-color: #f5f9ff;
  padding: 6px 10px;
  border-radius: 4px;
  line-height: 1.5;
}

.stat-item {
  display: flex;
  align-items: center;
}

.stat-item i {
  margin-right: 4px;
  font-size: 14px;
  color: #409EFF;
}

.camp-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 8px;
  border-left: 1px dashed #eaedf2;
  padding-left: 12px;
  min-width: 50px;
}

.action-btn {
  padding: 2px 5px;
  font-size: 12px;
  border-radius: 4px;
  transition: all 0.2s;
}

.action-btn:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

.delete-btn {
  color: #f56c6c;
}

.delete-btn:hover {
  background-color: rgba(245, 108, 108, 0.1);
}

.copy-btn {
  color: #409EFF;
}

.copy-btn:hover {
  background-color: rgba(64, 158, 255, 0.1);
}

.warning-icon {
  color: #E6A23C;
  font-size: 16px;
  margin-left: 5px;
}

.el-main {
  padding: 10px;
}

/* 添加训练营表单样式 */
.drawer-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: #fff;
  text-align: right;
  border-top: 1px solid #e8e8e8;
}

.el-input-number {
  width: 100%;
}

/* 加载更多样式 */
.loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  color: #909399;
  font-size: 14px;
}

.loading-more i {
  margin-right: 5px;
  font-size: 16px;
}

/* 无更多数据提示 */
.no-more-data {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  color: #c0c4cc;
  font-size: 13px;
}

.no-more-data span {
  position: relative;
  display: flex;
  align-items: center;
}
</style>