ylrz_saas_his_scrm_companyUI/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>
          </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">
            </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="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="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="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-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-main>
    </el-container>

    <!-- 营期相关设置抽屉 -->
  <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-col :span="1.5">
              <el-button
                type="warning"
                size="mini"
                icon="el-icon-delete"
                :disabled="updateCourse.ids.length <= 0"
                @click="handleDeleteCourse"
                v-hasPermi="['course:period:dayRemove']"
              >删除课程</el-button>
            </el-col>
          </el-row>-->
          <el-table ref="courseTable" 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" width="100"/>
            <el-table-column label="开始时间" align="center" prop="startDateTime" width="100">

            </el-table-column>
            <el-table-column label="结束时间" align="center" prop="endDateTime" width="100">

            </el-table-column>
            <el-table-column label="领取红包时间" align="center" prop="lastJoinTime" width="160">
              <template slot-scope="scope">
                <el-tag type="danger">{{scope.row.lastJoinTime}}</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"
                  @click="handleDetails(scope.row)"
                >查看</el-button>
              </template>
            </el-table-column>
          </el-table>
            <pagination
              v-show="course.total > 0"
              :total="course.total"
              :page.sync="course.queryParams.pageNum"
              :limit.sync="course.queryParams.pageSize"
              @pagination="getCourseList"
              style="height: 40px"
            />
        </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>
    <el-drawer
      :with-header="false"
      size="75%"
      :visible.sync="open" append-to-body>
      <userCourseVideoDetails  ref="userCourseVideoDetails" />
    </el-drawer>
  <batch-red-packet
    :visible.sync="batchRedPacketVisible"
    :selected-data="selectedPeriods"
    @success="handleBatchRedPacketSuccess"
  />

  </div>
</template>

<script>
import {exportPeriod, listPeriod,  getDays, closePeriod} from "@/api/course/userCoursePeriod";
import { listCamp } 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'
import userCourseVideoDetails from '../../components/course/userCourseVideoDetails.vue';
export default {
  name: "Period",
  components: {
    RedPacket,
    BatchRedPacket,
    CourseStatistics,
    userCourseVideoDetails
  },
  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: {},
      },
      //修改营期时间参数
      updatePeriodDate: {
        open: false,
        loading: true,
        ids: [],
        form: {},
      },
      updateCourse: {
        open: false,
        loading: true,
        ids: [],
        form: {
          timeRange: null,
          joinTime: null
        },
      },
      // 表单校验
      rules: {
        periodName: [
          { required: true, message: '营期名称不能为空', trigger: 'blur' }
        ],
        companyId: [
          { required: true, message: '公司不能为空', trigger: 'change' }
        ],
        courseStyle: [
          { 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' }
        ]
      },
      // 训练营列表
      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' }
        ]
      },
      // 添加课程表单校验
      courseAddRules: {
        courseId: [
          { required: true, message: '请选择课程', trigger: 'change' }
        ],
        videoIds: [
          { required: true, message: '请选择小节', trigger: 'change' },
          { type: 'array', min: 1, message: '请至少选择一个小节', trigger: 'change' }
        ]
      },
      // 修改看课时间表单校验
      courseUpdateRules: {
        timeRange: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value || !Array.isArray(value) || value.length !== 2) {
                callback(new Error('请选择完整的看课时间范围'));
              } else {
                // 检查时间格式是否正确（yyyy-MM-dd HH:mm:ss）
                const timeRegex = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/;
                if (!timeRegex.test(value[0]) || !timeRegex.test(value[1])) {
                  callback(new Error('时间格式不正确'));
                } else if (value[0] >= value[1]) {
                  callback(new Error('结束时间必须大于开始时间'));
                } else {
                  callback();
                }
              }
            },
            trigger: 'change'
          }
        ],
        joinTime: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请选择领取红包时间'));
              } else {
                // 检查时间格式是否正确（yyyy-MM-dd HH:mm:ss）
                const timeRegex = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/;
                if (!timeRegex.test(value)) {
                  callback(new Error('时间格式不正确'));
                } else {
                  // 检查领取红包时间是否在看课时间范围内
                  const timeRange = this.updateCourse.form.timeRange;
                  if (timeRange && Array.isArray(timeRange) && timeRange.length === 2) {
                    if (value < timeRange[0] || value > timeRange[1]) {
                      callback(new Error('领取红包时间必须在看课时间范围内'));
                    } else {
                      callback();
                    }
                  } else {
                    callback();
                  }
                }
              }
            },
            trigger: 'change'
          }
        ]
      },
      // 滚动节流标志
      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.getLeftList();

  },
  methods: {
    /** 查询会员营期列表 */
    getList() {
      this.loading = true;
      const params = { ...this.queryParams };
      listPeriod(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;
    },
    /** 导出按钮操作 */
    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;
    },

    // 取消按钮
    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");
    },
    /** 排序方式改变 */
    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];
        if (!Array.isArray(this.form.days)) {
          this.form.days = [];
        }
        this.form.days = [];
        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;
        this.form.days = [];
      }
    },
    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开始
    },

    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;
      });
    },
    courseChange(row){
      this.course.form.videoIds = [];
      videoList(row).then(response => {
        this.videoList=response.list
      });
    },
    handlePeriodSettings(row) {
      this.periodSettingsData = row;
      this.periodSettingsVisible = true;
      // 初始化课程列表
      this.course.queryParams.periodId = row.periodId;
      // 根据当前激活的tab加载对应数据
      this.handleTabClick({ name: this.activeTab });
    },

    handleBatchRedPacketSuccess() {
      this.batchRedPacketVisible = false;
      // this.getCourseList();
    },
    /** 处理tab切换 */
    handleTabClick(tab) {
      if (tab.name === 'course') {
        this.getCourseList();
      } else if (tab.name === 'company') {
        this.redPacketVisible = true;
      }
    },
    /** 营期状态格式化 */
    periodStatusFormatter(row) {
      const statusMap = {
        1: '未开始',
        2: '进行中',
        3: '已结束'
      };
      return statusMap[row.periodStatus] || '未知状态';
    },
    /** 开课状态格式化 */
    courseStatusFormatter(row) {
      const statusMap = {
        0: '未开始',
        1: '进行中',
        2: '已结束'
      };
      return statusMap[row.status] || '未知状态';
    },

    disabledDate(time) {
      return time.getTime() < new Date(new Date().setHours(0,0,0,0));
    },
    handleDetails(row) {
      this.open=true;
      setTimeout(() => {
        this.$refs.userCourseVideoDetails.getDetails(row.videoId);
      }, 500);

    }
  },

};
</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;
}

.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;
}

/* 加载更多样式 */
.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>