ylrz_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"
          :isTranscode.sync="form.isTranscode"
          :transcodeFileKey.sync="form.transcodeFileKey"
          @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="800px" 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" border>
        <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,
          },
        },
        // 显示搜索条件
        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,
          isTranscode:0,
          transcodeFileKey:null
        };
        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(() => {});
      },
      /** 查看评论按钮操作 */
      handleComment(row) {
        this.commentDialog.courseId = row.courseId || this.courseId;
        this.commentDialog.videoId = row.videoId;
        this.commentDialog.title = `查看评论 - ${row.title}`;
        this.commentDialog.open = true;
      },
      openAdds(){
        this.addBatchData.open = true;
        this.getRootTypeList();
        this.addBatchData.form = {
          courseId: this.courseId,
        };
        this.addBatchData.queryParams.typeId = null;
        this.addBatchData.queryParams.typeSubId = null;
        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
        }
        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();
        })
      },
    }
  }
</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>