ylrz_his_scrm_adminUI/src/views/components/course/userCourseCatalogDetails.vue

<template>
  <div class="app-container">
    <div style="padding-bottom: 20px">
      <span v-if="courseName!=null">{{ courseName }}</span>
    </div>
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="小节名称" prop="title">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入小节名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" 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:userCourseVideo:add']"
        >新增目录</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          :disabled="!ids || ids.length <= 0"
          size="mini"
          @click="openUpdates"
          v-hasPermi="['course:userCourseVideo:updateTime']"
        >修改时间</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          size="mini"
          @click="openAdds"
          v-hasPermi="['course:userCourseVideo:batchAdd']"
        >批量添加</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          size="mini"
          v-if="isPrivate === 1"
          @click="updateRedPageckeOpen"
          v-hasPermi="['course:userCourseVideo:updateRed']"
        >修改红包</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['course:userCourseVideo:remove']"
        >删除</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table border v-loading="loading" :data="userCourseVideoList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="视频ID" align="center" prop="videoId" />
<!--      <el-table-column label="轮次" align="center" prop="round" />-->
      <el-table-column label="小节名称" align="center" show-overflow-tooltip prop="title" />
      <el-table-column label="视频文件名称" align="center" show-overflow-tooltip  prop="fileName" >
      </el-table-column>
      <el-table-column label="视频时长" align="center" prop="duration">
        <template slot-scope="{ row }">
          {{ formatDuration(row.duration) }}
        </template>
      </el-table-column>
      <el-table-column label="看课开始时间" align="center" prop="duration">
        <template slot-scope="{ row }">
          <el-tag v-if="row.viewStartTime">{{row.viewStartTime}}</el-tag>
          <el-tag type="danger" v-if="!row.viewStartTime">无</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="看课结束时间" align="center" prop="duration">
        <template slot-scope="{ row }">
          <el-tag v-if="row.viewEndTime">{{row.viewEndTime}}</el-tag>
          <el-tag type="danger" v-if="!row.viewEndTime">无</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="领取红包时间" align="center" prop="duration">
        <template slot-scope="{ row }">
          <el-tag v-if="row.lastJoinTime">{{ row.lastJoinTime }}</el-tag>
          <el-tag type="danger" v-if="!row.lastJoinTime">无</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="红包金额" align="center" prop="redPacketMoney" v-if="isPrivate === 1"/>
      <el-table-column label="排序" align="center" prop="courseSort" />
      <el-table-column label="上传时间" align="center" prop="createTime" />
      <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:userCourseVideo:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleComment(scope.row)"
          >查看评论</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['course:userCourseVideo: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-dialog :title="title" :visible.sync="open" width="1000px" append-to-body >
      <el-form ref="form" :model="form" :rules="rules" label-width="110px" v-loading="uploadLoading">
        <el-form-item label="视频标题" prop="title">
          <el-input v-model="form.title"  placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="视频描述" prop="description">
          <el-input v-model="form.description" type="textarea" :rows="2"  placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="轮次" prop="round">
          <el-input v-model="form.round"  placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="课程排序" prop="courseSort">
          <el-input-number v-model="form.courseSort" :min="1" ></el-input-number>
        </el-form-item>
        <!--        <el-form-item label="看课时间" prop="timeRange" v-if="isPrivate === 1">-->
        <!--          <el-time-picker-->
        <!--            is-range-->
        <!--            v-model="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" v-if="isPrivate === 1">-->
        <!--          <el-time-picker-->
        <!--            v-model="form.lastJoinTime"-->
        <!--            :selectableRange="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-item label="视频缩略图" prop="thumbnail">
          <el-upload
            v-model="form.thumbnail"
            class="avatar-uploader"
            :action="uploadUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="form.thumbnail" :src="form.thumbnail" class="avatar" width="300px">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <video-upload
          :type = "1"
          :isPrivate = "isPrivate"
          :fileKey.sync = "form.fileKey"
          :fileSize.sync = "form.fileSize"
          :videoUrl.sync="videoUrl"
          :fileName.sync="form.fileName"
          :line_1.sync="form.lineOne"
          :line_2.sync="form.lineTwo"
          :line_3.sync="form.lineThree"
          :thumbnail.sync="form.thumbnail"
          :uploadType.sync="form.uploadType"
          @video-duration="handleVideoDuration"
          @change="handleVideoChange"
          @selectProjects="handleSelectProjects"
          ref="videoUpload"
          append-to-body
        />

        <el-form-item label="课题选择" prop="questionBankId" v-if="isPrivate === 1">
          <el-button size="small" type="primary" @click="chooseQuestionBank">选取课题</el-button>
          <el-table border width="100%" style="margin-top:5px;"  :data="form.questionBankList">

            <el-table-column label="问题" align="center" prop="title">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.title" placement="top">
                  <div style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis;">
                    <span>{{ scope.row.title }}</span>
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="类别" align="center" prop="type">
              <template slot-scope="scope">
                <dict-tag :options="typeOptions" :value="scope.row.type"/>
              </template>
            </el-table-column>
            <el-table-column label="答案" align="center" prop="answer" />
            <el-table-column label="操作" align="center" width="100px" fixed="right">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleQuestionBankDelete(scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item >
        <el-form-item label="红包金额" prop="redPacketMoney" v-if="isPrivate === 1">
          <el-input-number v-model="form.redPacketMoney" :min="0.1" :max="200" :step="0.1" ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="updateBatchData.open" width="1000px" append-to-body >
      <el-form ref="form" :model="updateBatchData.form" label-width="110px">
        <el-form-item label="看课时间" prop="timeRange">
          <el-time-picker
            is-range
            v-model="updateBatchData.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="updateBatchData.form.lastJoinTime"
            :selectableRange="updateBatchData.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="updateBatch">确 定</el-button>
        <el-button @click="updateBatchData.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="questionBank.title" :visible.sync="questionBank.open" width="1000px" append-to-body >
      <question-bank ref="questionBank" @questionBankResult="questionBankResult" ></question-bank>
    </el-dialog>
    <el-dialog title="视频库选择" :visible.sync="addBatchData.open" width="900px" append-to-body>
      <!-- 搜索条件 -->
      <el-form :inline="true" :model="addBatchData.queryParams" class="library-search">
        <el-form-item label="素材名称">
          <el-input
            v-model="addBatchData.queryParams.resourceName"
            placeholder="请输入素材名称"
            clearable
            size="small"
            @keyup.enter.native="resourceList"
          />
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="addBatchData.queryParams.typeId" @change="changeCateType" placeholder="请选择素材类型" clearable size="small">
            <el-option
              v-for="item in addBatchData.typeOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="子类型">
          <el-select v-model="addBatchData.queryParams.typeSubId" placeholder="请选择素材子类型" clearable size="small">
            <el-option
              v-for="item in addBatchData.typeSubOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="resourceList">搜索</el-button>
        </el-form-item>
      </el-form>

      <!-- 视频列表 -->
      <el-table v-loading="addBatchData.loading" :data="addBatchData.list" @selection-change="handVideoleSelectionChange" height="400px">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="素材名称" align="center" prop="resourceName" />
        <el-table-column label="文件名称" align="center" prop="fileName" />
        <el-table-column label="缩略图" align="center">
          <template slot-scope="scope">
            <el-popover
              placement="right"
              title=""
              trigger="hover"
            >
              <img alt="" slot="reference" :src="scope.row.thumbnail" style="width: 80px; height: 50px" />
              <img alt="" :src="scope.row.thumbnail" style="max-width: 150px;" />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="视频时长" align="center">
          <template slot-scope="scope">
            <span>{{ formatDuration(scope.row.duration) }}</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination
        v-show="addBatchData.total>0"
        :total="addBatchData.total"
        :page.sync="addBatchData.queryParams.pageNum"
        :limit.sync="addBatchData.queryParams.pageSize"
        @pagination="resourceList"
      />

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="batchVideoSave">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="章节红包" :visible.sync="redData.open" width="900px" append-to-body>
      <el-table border v-loading="redData.loading" :data="redData.list" height="600px">
        <el-table-column label="小节名称" align="center" show-overflow-tooltip prop="title" />
        <el-table-column label="视频文件名称" align="center" show-overflow-tooltip  prop="fileName" >
        </el-table-column>
        <el-table-column label="视频时长" align="center" prop="duration">
          <template slot-scope="{ row }">
            {{ formatDuration(row.duration) }}
          </template>
        </el-table-column>
        <el-table-column label="红包金额" align="center" prop="redPacketMoney">
          <template slot-scope="scope">
            <el-input class="el-input" v-model="scope.row.redPacketMoney" />
          </template>
        </el-table-column>
        <el-table-column label="排序" align="center" prop="courseSort" />
        <el-table-column label="上传时间" align="center" prop="createTime" />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="batchRedSave">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="commentDialog.title" :visible.sync="commentDialog.open" width="1000px" append-to-body :close-on-click-modal="false">
      <course-watch-comment
        ref="courseWatchComment"
        :courseId="commentDialog.courseId"
        :videoId="commentDialog.videoId"
        v-if="commentDialog.open">
      </course-watch-comment>
    </el-dialog>

  </div>
</template>

<script>
import {
  addUserCourseVideo,
  delUserCourseVideo,
  getSort,
  getUserCourseVideo,
  getVideoListByCourseId,
  updates,
  batchSaveVideo,
  batchUpdateRed,
  updateUserCourseVideo
} from "@/api/course/userCourseVideo";
import QuestionBank from "@/views/course/courseQuestionBank/QuestionBank.vue";
import VideoUpload from "@/components/VideoUpload/index.vue";
import { listVideoResource } from '@/api/course/videoResource';
import { getByIds } from '@/api/course/courseQuestionBank'
import CourseWatchComment from "./courseWatchComment.vue";
import { getCateListByPid, getCatePidList } from '@/api/course/userCourseCategory'

export default {
  name: "userCourseCatalog",
  components: {VideoUpload,QuestionBank,CourseWatchComment},
  data() {
    return {
      duration: null,
      packageList:[],
      //课题
      package:{
        title:'',
        open:false,
      },
      //课题
      questionBank:{
        title:'',
        open:false,
      },
      isPrivate:null,
      videoUrl: "",
      uploadTypeOptions: [
        { dictLabel: "线路一", dictValue: 2 },

        { dictLabel: "线路二", dictValue: 3 },
      ],
      uploadLoading:false,
      courseId:null,
      videoName:'',
      title: "",
      // 是否显示弹出层
      open: false,
      uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
      baseUrl: process.env.VUE_APP_BASE_API,
      typeOptions:[],
      files:[],
      fileList: [],
      // 上传成功后的地址
      videoURL: '',
      // 进度条百分比
      progress: 0,
      // 上传视频获取成功后拿到的fileID【备用】
      fileId: '',
      courseName:null,
      userCourseVideoList:[],
      total: 0,
      redData:{
        queryParams: {
          pageNum: 1,
          pageSize: 99999,
          courseId:null,
        },
        list: [],
        open: false,
        loading:true,
        form:{
        }
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        courseId:null,
        title:null
      },
      addBatchData: {
        open: false,
        loading: true,
        form: {},
        select: [],
        total:0,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          resourceName: null,
          typeId: null,
          typeSubId: null
        },
        typeOptions: [],
        typeSubOptions: []
      },
      // 显示搜索条件
      showSearch: true,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 表单参数
      form: {},
      updateBatchData: {
        open: false,
        form:{}
      },
      // 表单校验
      rules: {
        title: [
          { required: true, message: "小节名称不能为空", trigger: "change" }
        ],
        courseSort: [
          { required: true, message: "排序不能为空", trigger: "change" }
        ],

      },
      // 评论弹窗数据
      commentDialog: {
        open: false,
        courseId: null,
        videoId: null,
        title: ""
      },
    }
  },
  created() {
    this.getDicts("sys_course_temp_type").then(response => {
      this.typeOptions = response.data;
    });
  },
  methods: {
    getPickerOptions() {
      const durationInMinutes = Math.floor(this.form.duration / 60); // 将秒转换为分钟
      const endHour  = Math.floor(durationInMinutes / 60); // 起始小时
      const endMinute  = durationInMinutes % 60; // 起始分钟
      return {
        start: "00:00", // 固定开始时间
        step: "00:01", // 时间间隔
        end: `${endHour.toString().padStart(2, "0")}:${endMinute
          .toString()
          .padStart(2, "0")}`, // 动态结束时间
      };
    },
    handlePackageDelete(row){
      this.packageList.splice(this.packageList.findIndex(item => item.packageId === row.packageId), 1)
    },
    choosePackage(){
      this.package.open=true;
      this.package.title='疗法选择';
    },
    /**
     * 选择课题
     */
    chooseQuestionBank(){
      this.questionBank.open=true;
      this.questionBank.title='课题选择';
    },

    //选择疗法
    selectPackage(row){
      const drug = {};
      for(var i=0;i<this.packageList.length;i++){
        if(this.packageList[i].packageId==row.packageId){
          this.$message.warning("疗法已存在！")
          return;
        }
      }
      drug.packageId=row.packageId;
      drug.packageName=row.packageName;
      drug.secondName=row.secondName;
      drug.totalPrice=row.totalPrice;
      drug.imgUrl=row.imgUrl;
      this.packageList.push(drug);
      this.$message({
        message: '添加成功',
        type: 'success'
      });

    },

    //选择结果
    questionBankResult(val){

      // 确保 questionBankList 是数组
      this.form.questionBankList = this.form.questionBankList || [];

      for(var i=0;i<this.form.questionBankList.length;i++){
        if(this.form.questionBankList[i].id==val.id){
          return this.$message.error("当前课题已选择")
        }
      }

      this.form.questionBankList.push(val);
      this.$message({
        message: '添加成功',
        type: 'success'
      });
    },

    //删除课题
    handleQuestionBankDelete(row){
      this.form.questionBankList.splice(this.form.questionBankList.findIndex(item => item.id === row.id), 1)
    },
    handleVideoChange(){
      if(this.form.uploadType==1){
        this.videoUrl = this.form.lineOne;
      }else if(this.form.uploadType==2){
        this.videoUrl = this.form.lineTwo;
      }else if(this.form.uploadType==3){
        this.videoUrl = this.form.lineThree;
      }
      // console.log("选择的video=======>>>>>>>",this.videoUrl)
    },
    // 视频库课题
    handleSelectProjects(projectIds) {
      this.form.questionBankList = []
      if (!projectIds || projectIds.length === 0 || this.isPrivate === 0) {
        return
      }

      const params = {ids: projectIds}
      getByIds(params).then(response => {
        if (response.code === 200) {
          response.data.forEach(item => {
            let isExist = this.form.questionBankList.some(q => q.id === item.id)
            if (!isExist) {
              this.form.questionBankList.push(item)
            }
          });
        }
      })
    },
    handleVideoDuration(duration) {
      this.form.duration = duration;
    },
    formatDuration(seconds) {
      if (seconds === null || seconds === undefined) {
        return '未上传视频'; // 或者您可以根据具体需求返回其他默认值
      }
      const hours = Math.floor(seconds / 3600);
      const minutes = Math.floor((seconds % 3600) / 60);
      const remainingSeconds = seconds % 60;

      const formattedHours = hours > 0 ? hours.toString() + ':' : '';
      const formattedMinutes = minutes.toString().padStart(2, '0');
      const formattedSeconds = remainingSeconds.toString().padStart(2, '0');

      return `${formattedHours}${formattedMinutes}:${formattedSeconds}`;
    },

    handleAvatarSuccess(res, file) {
      if(res.code==200){
        this.form.thumbnail=res.url;
        this.$forceUpdate()
      }
      else{
        this.msgError(res.msg);
      }
    },
    beforeAvatarUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (!isLt1M) {
        this.$message.error('上传图片大小不能超过 1MB!');
      }
      return   isLt1M;
    },
    getDetails(courseId,courseName,isPrivate) {
      this.isPrivate = isPrivate
      this.courseName = courseName
      this.courseId = courseId;
      this.queryParams.courseId = courseId;
      this.getList();
    },
    getList() {
      this.loading = true;
      getVideoListByCourseId(this.queryParams).then(response => {
        this.userCourseVideoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        videoId: null,
        title: null,
        description: null,
        url: null,
        thumbnail: null,
        duration: null,
        createTime: null,
        uploadType:null,
        lineOne:null,
        lineTwo:null,
        lineThree:null,
        fileName:null,
        userId: null,
        cateId: null,
        courseId: null,
        likes: null,
        views: null,
        comments: null,
        status: 0,
        courseSort: 1,
        isHot: null,
        isShow: null,
        isAudit: null,
        auditBy: null,
        auditTime: null,
        updateTime: null,
        source: null,
        isDel: null,
        shares: null,
        tags: null,
        productId: null,
        productJson: null,
        questionBankId:null,
        questionBankList:[],
        redPacketMoney:0,
      };
      this.videoURL = '';
      this.progress=0;
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.videoId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    // 多选框选中数据
    handVideoleSelectionChange(selection) {
      this.addBatchData.select = selection.map(item => item.id);
    },
    handleAdd(){
      this.reset();
      this.form.courseId = this.courseId;
      this.open = true;
      this.title = "添加课堂视频";
      this.videoUrl = '';
      this.packageList=[];
      getSort(this.courseId).then(response => {
        this.form.courseSort = Number(response.data);
      })
      setTimeout(() => {
        this.$refs.videoUpload.resetUpload();
      }, 500);

    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.packageList=[];
      const videoId = row.videoId || this.ids
      getUserCourseVideo(videoId).then(response => {
        this.form = response.data;
        if(response.data.videoUrl!=null && response.data.videoUrl!==''){
          this.videoUrl = response.data.videoUrl;
        }
        if (this.form.packageJson!=null){
          this.packageList = JSON.parse(this.form.packageJson);
        }

        if(response.data.viewStartTime != null && response.data.viewEndTime != null){
          this.form.timeRange = [response.data.viewStartTime, response.data.viewEndTime]
        }
        setTimeout(() => {
          this.$refs.videoUpload.resetUpload();
        }, 500);
        this.open = true;
        this.title = "修改课堂视频";
      });

    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {

        if (valid) {
          this.form.videoUrl = this.videoUrl;
          if(this.form.videoUrl==null || this.form.videoUrl===''){
            this.$message({
              message: '请上传视频！',
              type: 'warning'
            });
            return
          }
          if(this.form.timeRange != null && this.form.timeRange.length === 2){
            this.form.viewStartTime = this.form.timeRange[0];
            this.form.viewEndTime = this.form.timeRange[1];
          }
          if(this.form.duration==null){
            this.$message({
              message: '未识别到视频时长请稍等。。。',
              type: 'warning'
            });
            return
          }
          if(this.form.uploadType==null){
            this.$message({
              message: '请选择播放线路！',
              type: 'warning'
            });
            return
          }
          if (this.form.questionBankList!==null){
            this.form.questionBankId = this.form.questionBankList.map(item => item.id).join(',');
          }
          if (this.packageList.length>0){
            this.form.packageJson = JSON.stringify(this.packageList);
          }
          if (this.form.videoId != null) {
            updateUserCourseVideo(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addUserCourseVideo(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    openUpdates(){
      this.updateBatchData.form = {};
      this.updateBatchData.open = true;
    },
    /** 提交按钮 */
    updateBatch() {
      this.updateBatchData.form.ids = this.ids;
      if(this.updateBatchData.form.timeRange != null && this.updateBatchData.form.timeRange.length === 2){
        this.updateBatchData.form.viewStartTime = this.updateBatchData.form.timeRange[0];
        this.updateBatchData.form.viewEndTime = this.updateBatchData.form.timeRange[1];
      }
      updates(this.updateBatchData.form).then(response => {
        this.msgSuccess("修改成功");
        this.updateBatchData.open = false;
        this.getList();
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const videoIds = row.videoId || this.ids;
      this.$confirm('是否确认删除视频编号为"' + videoIds + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return delUserCourseVideo(videoIds);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(() => {});
    },
    openAdds(){
      this.addBatchData.open = true;
      this.getRootTypeList();
      this.addBatchData.form = {
        courseId: this.courseId,
      };
      this.resourceList();
    },
    getRootTypeList() {
      getCatePidList().then(response => {
        this.addBatchData.typeOptions = response.data
      });
    },
    async changeCateType(val) {
      this.addBatchData.queryParams.typeSubId = null
      this.addBatchData.typeSubOptions = []
      if (!val) {
        return
      }
      await getCateListByPid(val).then(response => {
        this.addBatchData.typeSubOptions = response.data
      })
    },
    resourceList(){
      this.addBatchData.loading = true;
      listVideoResource(this.addBatchData.queryParams).then(response => {
        this.addBatchData.loading = false;
        this.addBatchData.list = response.rows;
        this.addBatchData.total = response.total;
      });
    },
    batchVideoSave(){
      if (this.addBatchData.select.length===0){
        this.$message({
          message: '请选择视频！！',
          type: 'warning'
        });
        return
      }
      console.log(this.addBatchData.select)
      this.addBatchData.form.ids = this.addBatchData.select;
      batchSaveVideo(this.addBatchData.form).then(response => {
        this.addBatchData.open = false;
        this.getList();
      })
    },
    updateRedPageckeOpen(){
      this.redData.open = true;
      this.redData.loading = true;
      this.redData.queryParams.courseId = this.courseId;
      getVideoListByCourseId(this.redData.queryParams).then(response => {
        this.redData.list = response.rows;
        this.redData.loading = false;
      });
    },
    batchRedSave(){
      batchUpdateRed(this.redData.list).then(response => {
        this.redData.open = false;
        this.getList();
      })
    },
    /** 查看评论按钮操作 */
    handleComment(row) {
      this.commentDialog.courseId = row.courseId || this.courseId;
      this.commentDialog.videoId = row.videoId;
      this.commentDialog.title = `查看评论 - ${row.title}`;
      this.commentDialog.open = true;
    },
  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

</style>