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

<template>
  <div class="app-container">
    <el-container>
      <!-- 左侧区域 -->
      <el-aside width="360px" class="left-aside">
        <!-- 顶部区域 -->
        <div class="left-header">
          <div class="left-header-top">
            <el-button type="primary" class="search-btn" @click="handleLeftQuery" v-hasPermi="['course:trainingCamp:list']">搜索</el-button>
            <el-button type="primary" style="width: 50%" icon="el-icon-plus" @click="handleAddTrainingCamp" v-hasPermi="['course:trainingCamp:add']">新建训练营</el-button>
          </div>
          <div class="search-input-wrapper">
            <el-input
              v-model="leftQueryParams.trainingCampName"
              placeholder="请输入训练营名称"
              prefix-icon="el-icon-search"
              clearable
              size="small"
              @keyup.enter.native="handleLeftQuery"
            />
          </div>
          <div class="sort-wrapper">
            <span class="sort-label">排序方式</span>
            <el-select v-model="leftQueryParams.scs"
            placeholder="按序号倒序"
            size="small"
            class="sort-select"
            @change="handleSortChange"
            >
              <el-option label="按序号倒序" value="order_number(desc),training_camp_id(desc)" />
              <el-option label="按序号顺序" value="order_number(asc),training_camp_id(desc)" />
            </el-select>
          </div>
        </div>

        <!-- 训练营列表 -->
        <div class="camp-list" ref="campList" @scroll="handleScroll" v-loading="leftLoading">
          <div
            v-for="(item, index) in campList"
            :key="index"
            class="camp-item"
            :class="{ 'active': activeCampIndex === index }"
            @click="selectCamp(index)"
          >
            <div class="camp-content">
              <div class="camp-title">
                <i class="el-icon-s-flag camp-icon"></i>
                {{ item.trainingCampName }}
              </div>
              <div class="camp-info">
                <span>序号：{{ item.orderNumber }}</span>
                <span>最新营期开课：{{ item.recentDate || '-' }}</span>
              </div>
              <div class="camp-stats">
                <span class="stat-item">
                  <i class="el-icon-s-data"></i>
                  营期数：{{ item.periodCount || 0 }}
                </span>
                <span class="stat-item">
                  <i class="el-icon-user"></i>
                  会员总数：{{ item.vipCount || 0 }}
                </span>
              </div>
            </div>
            <div class="camp-actions">
              <el-button type="text" class="action-btn delete-btn" @click.stop="handleDeleteCamp(item)" v-hasPermi="['course:trainingCamp:remove']">删除</el-button>
<!--              <el-button type="text" class="action-btn copy-btn" @click.stop="handleCopyCamp(item)" v-hasPermi="['course:trainingCamp:copy']">复制</el-button>-->
              <el-button type="text" class="action-btn copy-btn" @click.stop="handleEditCamp(item)" v-hasPermi="['course:trainingCamp:edit']">编辑</el-button>
            </div>
          </div>
          <!-- 底部加载更多提示 -->
          <div v-if="loadingMore" class="loading-more">
            <i class="el-icon-loading"></i>
            <span>加载中...</span>
          </div>

          <!-- 所有数据加载完毕提示 -->
          <div v-if="campList.length > 0 && !leftQueryParams.hasNextPage && !loadingMore" class="no-more-data">
            <span>—— 已加载全部训练营 ——</span>
          </div>
        </div>
      </el-aside>

      <!-- 右侧区域 -->
      <el-main>
        <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="companyIdList">
            <el-select v-model="queryParams.companyIdList" placeholder="请选择公司" clearable size="small" multiple>
              <el-option
                v-for="item in companyOptions"
                :key="item.companyId"
                :label="item.companyName"
                :value="item.companyId"
              />
            </el-select>
          </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" v-hasPermi="['course:period:list']">搜索</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:setRedPacket']"
              :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" border>
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="营期名称" align="center" prop="periodName" />
          <el-table-column label="公司名称" align="center" prop="companyName" />
          <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:query']"
              >修改</el-button>
    <!--              <el-button-->
    <!--                size="mini"-->
    <!--                type="text"-->
    <!--                icon="el-icon-edit"-->
    <!--                @click="handleCourse(scope.row)"-->
    <!--                v-hasPermi="['course:period:edit']"-->
    <!--              >课程管理</el-button>-->
    <!--              <el-button-->
    <!--                size="mini"-->
    <!--                type="text"-->
    <!--                icon="el-icon-money"-->
    <!--                @click="setRedPacket(scope.row)"-->
    <!--              >设置红包</el-button>-->
              <el-button
                size="mini"
                type="text"
                icon="el-icon-setting"
                @click="handlePeriodSettings(scope.row)"
              >营期相关设置</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-circle-close"
                @click="handleClosePeriod(scope.row)"
                v-hasPermi="['course:period:close']"
              >结束营期</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['course:period:remove']"
              >删除</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-main>
    </el-container>

    <!-- 添加或修改会员营期对话框-->
    <el-drawer :title="title" :visible.sync="open" size="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="营期名称" prop="periodName">
          <el-input v-model="form.periodName" placeholder="请输入营期名称" />
        </el-form-item>
         <el-form-item label="公司" prop="companyId">
          <el-select v-model="form.companyId" placeholder="请选择公司" multiple>
            <el-option
              v-for="item in companyOptions"
              :key="item.companyId"
              :label="item.companyName"
              :value="item.companyId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="课程风格" prop="courseStyle">
          <image-upload v-model="form.courseStyle" :limit="1" />
        </el-form-item>
        <el-form-item label="直播间风格" prop="liveRoomStyle">
          <image-upload v-model="form.liveRoomStyle" :limit="1" />
        </el-form-item>
        <el-form-item label="课程LOGO" prop="courseLogo">
          <image-upload v-model="form.courseLogo" :limit="1" />
        </el-form-item>
        <el-form-item label="红包发放方式" prop="redPacketGrantMethod">
          <el-radio-group 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 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="maxViewNum">
          <el-input-number :min="0" v-model="form.maxViewNum" style="width: 200px" />
        </el-form-item>
        <el-form-item label="开营日期" prop="periodStartingTime">
          <el-date-picker
            :disabled = "isDisabledDateRange"
            :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"
            :picker-options="{disabledDate}"
          >
          </el-date-picker>
          <el-date-picker
            :style="{display: form.periodType == 2 ? '' : 'none !important'}"
            @change="timeChange(2)"
            v-model="form.date"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            :picker-options="{disabledDate}"
          >
          </el-date-picker>
        </el-form-item>

<!--        <el-form-item label="看课时间" prop="timeRange">-->
<!--          <el-time-picker-->
<!--            is-range-->
<!--            v-model="form.timeRange"-->
<!--            @input="$forceUpdate()"-->
<!--            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="form.lastJoinTime"-->
<!--            :selectableRange="form.lastJoinTime"-->
<!--            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 class="drawer-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </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>

<!--    &lt;!&ndash; 添加或修改会员营期对话框&ndash;&gt;-->
<!--    <el-dialog title="课程管理" :visible.sync="course.open" width="75%" top="10px" append-to-body style="padding-bottom: 10px">-->
<!--      <el-row :gutter="10" class="mb8">-->
<!--        <el-col :span="1.5">-->
<!--          <el-button-->
<!--            v-if="(getDiff(course.row.periodStartingTime, course.row.periodEndTime) - course.total) > 0"-->
<!--            type="primary"-->
<!--            icon="el-icon-plus"-->
<!--            size="mini"-->
<!--            @click="handleAddCourse"-->
<!--            v-hasPermi="['course:period:add']"-->
<!--          >添加课程</el-button>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      <el-table v-loading="course.loading" :data="course.list">-->
<!--        <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" width="150"  />-->
<!--        <el-table-column label="创建时间" align="center" prop="createTime" width="150" />-->
<!--      </el-table>-->

<!--      <div slot="footer" class="dialog-footer">-->
<!--&lt;!&ndash;        <el-button type="primary" @click="saveCourseData">保存</el-button>&ndash;&gt;-->
<!--      </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"
            format="HH:mm:ss"
            :picker-options="{
              selectableRange: updateCourse.form.timeRange || '00:00:00 - 23:59:59'
            }"
            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="74%"
    :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-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                v-if="(getDiff(periodSettingsData.periodStartingTime, periodSettingsData.periodEndTime) - course.total) > 0"
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="handleAddCourse"
                v-hasPermi="['course:period:addCourse']"
              >添加课程</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="primary"
                size="mini"
                :disabled="updateCourse.ids.length <= 0"
                @click="handleUpdateCourse"
                v-hasPermi="['course:period:updateCourseTime']"
              >修改看课时间</el-button>
            </el-col>
          </el-row>
          <el-table v-loading="course.loading" :data="course.list" @selection-change="handleSelectionCourseChange" border>
            <el-table-column type="selection" width="55" align="center" />
            <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="status" width="100" :formatter="courseStatusFormatter" />
            <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-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-top"
                  @click="handleTop(scope.row)"
                  v-hasPermi="['course:period:courseMove']"
                >上移</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-bottom"
                @click="handleBottom(scope.row)"
                v-hasPermi="['course:period:courseMove']"
              >下移</el-button>
<!--              <el-button-->
<!--                size="mini"-->
<!--                type="text"-->
<!--                icon="el-icon-edit"-->
<!--                @click="handleUpdateDate(scope.row)"-->
<!--              >修改营期时间</el-button>-->
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="公司列表" name="company">
          <red-packet
            :visible.sync="redPacketVisible"
            :activeTab="activeTab"
            :periodId="periodSettingsData.periodId"
            @success="handleRedPacketSuccess"
          />
        </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 { listCamp, addCamp, editCamp, delCamp, copyCamp } from "@/api/course/userCourseCamp";
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: {
        periodName: [
          { required: true, message: '营期名称不能为空', trigger: 'blur' }
        ],
        companyId: [
          { required: true, message: '公司不能为空', trigger: 'change' }
        ],
        redPacketGrantMethod: [
          { required: true, message: '红包发放方式不能为空', trigger: 'change' }
        ],
        periodType: [
          { required: true, message: '营期类型不能为空', trigger: 'change' }
        ],
        maxViewNum: [
          { required: true, message: '销售可查看天数不能为空', trigger: 'blur' }
        ],
        periodStartingTime: [
          { required: true, message: '开营日期不能为空', trigger: 'change' }
        ]
      },
      // 公司选项
      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.getList();
    this.getLeftList();
    this.getCompanyList();

  },
  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: [],
        maxViewNum: 0,
        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,
        timeRange: [], // 初始化timeRange
        joinTime: null // 初始化joinTime
      };
    },
    closeAddCourse() {
      this.course.addOpen = false;
      this.course.form = {
        periodId: null,
        courseId: null,
        videoIds: []
      };
      // 重置表单
      if (this.$refs.courseAddForm) {
        this.$refs.courseAddForm.resetFields();
      }
    },
    closeUpdateCourse() {
      this.updateCourse.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;
    },
    disabledDate(time) {
      return time.getTime() < new Date(new Date().setHours(0,0,0,0));
    },
  },
};
</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>