FE-V2-PC/src/views/safetyEducationExam/safeLearning/el_course/edit.vue

<template>
  <div class="edit-page">
    <el-steps :active="stepsType" simple class="top-steps-box" >
      <el-step title="资源信息" icon="el-icon-edit" :status="stepsType==0?'finish ':'process'" @click.native="stepsClick(0,$event)" style="cursor:pointer;"></el-step>
      <el-step title="资源章节" icon="el-icon-folder-add" :status="stepsType==1?'finish ':'process'" @click.native="stepsClick(1,$event)" style="cursor:pointer;"></el-step>
      <el-step title="资源设置" icon="el-icon-setting" :status="stepsType==2?'finish ':'process'" @click.native="stepsClick(2,$event)" style="cursor:pointer;"></el-step>
    </el-steps>
    <!--课程信息-->
    <div class="center-content-max-box info-max-box" v-if="stepsType === 0">
      <el-form :model="infoForm" ref="infoForm" :rules="infoRules" label-width="80px">
        <el-form-item label="课程名称" prop="title">
          <el-input
            style="width:400px;"
            v-model="infoForm.title"
            maxLength="25"
            placeholder="请输入课程名称"
            clearable
            size="small"
          />
          {{infoForm.title.length}}/25
        </el-form-item>
        <el-form-item label="课程分类" prop="cateName">
          <div style="display: flex">
            <el-input
              style="width:400px;"
              v-model="infoForm.cateName"
              disabled
              maxLength="25"
              placeholder="请选择课程分类"
              clearable
              size="small"
            />
            <p class="add-button-one-90"
               style="margin-left:20px;"
               @click="openClassTreeClick"
            >选择分类</p>
          </div>
        </el-form-item>
<!--        <el-form-item label="课程分类" prop="cateName">
          <el-select v-model="infoForm.cateName" placeholder="请选择">
            <el-option
              v-for="item in courseTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="适用类型" prop="checkList">
          <el-checkbox-group v-model="infoForm.checkList">
            <el-checkbox
            v-for="item in scopeTypeList"
            :label="item.id"
            :key="item.id">{{item.value}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="适用学院" prop="deptId">
          <el-select v-model="infoForm.deptId" placeholder="请选择适用学院" style="width:400px;">
            <el-option
              v-for="item in deptOptions"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!--<el-form-item label="上传封面" prop="certUrl">-->
          <!--<el-upload-->
            <!--class="certificate-avatar-uploader"-->
            <!--:action="uploadImgUrl"-->
            <!--:show-file-list="false"-->
            <!--accept="image/jpeg,image/gif,image/png"-->
            <!--:on-success="handleAvatarSuccess"-->
            <!--:headers="headers"-->
            <!--:before-upload="beforeAvatarUpload">-->
            <!--<img v-if="infoForm.certUrl" :src="infoForm.certUrl" class="avatar" style="height:80px;width:80px;">-->
            <!--<i v-if="!infoForm.certUrl" class="el-icon-plus avatar-uploader-icon"></i>-->
          <!--</el-upload>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="资料介绍" prop="content" style="width:1000px;height:400px;">-->
          <!--<editor style="height:400px;" v-model="infoForm.content" :min-height="192"/>-->
        <!--</el-form-item>-->
      </el-form>
    </div>
    <!--课程章节-->
    <div class="center-content-max-box chapter-max-box" v-if="stepsType === 1">
      <div class="left-new-chapter-box">
        <p class="title-p">新建章节</p>
        <p class="add-chapter-p add-button-one-120" @click="add_el_chapterClick">新增章节</p>
        <div class="chapter-list-for-max-box scrollbar-box">
          <div class="chapter-list-for-big-box" v-for="(item,index) in chapterList" :key="index" :index="item.id">
              <div class="chapter-list-for-box" :class="{'checkChapter':item.id == chapterIndex}" @click.stop="checkChapterClick(item)">
                <p v-if="item.showType" @click.stop="chapterTreeClick(item,false)"><i class="el-icon-remove-outline"></i></p>
                <p v-if="!item.showType" @click.stop="chapterTreeClick(item,true)"><i class="el-icon-circle-plus-outline"></i></p>
                <p>{{item.title}}</p>
                <p @click.stop="del_el_chapter(item)"><i class="el-icon-circle-close"></i></p>
              </div>
              <div class="chapter-list-min-for-box" :class="{'checkChapter':minItem.id == chapterIndex}"
                   @click.stop="checkChapterClick(minItem)"
                   v-if="item.showType"
                   v-for="(minItem,index2) in item.children" :key="index2" :index="minItem.id">
                <p>{{minItem.title}}</p>
                <p @click.stop="del_el_chapter(minItem)"><i class="el-icon-circle-close"></i></p>
              </div>
          </div>
        </div>
      </div>
      <div class="center-content-box scrollbar-box">
        <p class="title-p">编辑框</p>
        <p class="null-add-p" v-if="!chapterData.id">请先在左侧动作条选择或创建章节</p>
        <div class="center-content-box-one" v-if="!exerciseAddType">
          <el-form :model="chapterData" ref="chapterForm" :rules="chapterRules"   v-if="chapterData.id">
            <div style="display: flex">
              <el-form-item label="标题" prop="title" style="margin:20px 0;" label-width="100px">
                <el-input
                  style="width:190px;margin-right:20px;"
                  v-model="chapterData.title"
                  maxLength="20"
                  minlength="1"
                  placeholder="请输入标题"
                  clearable
                  size="small"
                />
              </el-form-item>
              <el-form-item label="时间" prop="timeValue" style="margin:20px 0;display: flex" v-if="chapterData.chapterData">
                <el-time-picker
                  @change="timeChange"
                  v-model="chapterData.timeValue"
                  format = 'HH:mm:ss'
                  value-format = 'HH:mm:ss'
                  placeholder="请选择时间">
                </el-time-picker>
              </el-form-item>
              <el-form-item label="课后考核" prop="exerciseValue1" style="margin:20px 0;" label-width="100px" v-if="chapterData.chapterData">
                <el-switch
                  v-model="chapterData.isAssess"
                  :active-value="1"
                  :inactive-value="0">
                </el-switch>
              </el-form-item>
              <p style="flex:1;"></p>
              <el-button type="primary" style="margin:20px 20px 0 20px;" @click="edit_el_chapterClick">保存</el-button>
            </div>
            <div class="exercise-title-max-box" v-if="chapterData.isAssess == 1">
              <el-form-item label="考核名称" prop="assessName" label-width="100px">
                <el-input
                  style="width:300px;"
                  v-model="chapterData.assessName"
                  maxLength="20"
                  minlength="1"
                  placeholder="请输入考核名称"
                  clearable
                  size="small"
                />
              </el-form-item>
              <div class="exercise-add-max-box">
                <p class="exercise-add-button inquire-button-one" @click="exerciseAddClickOn">设置考核题目</p>
                <div class="exercise-add-text-box">
                  <div>题目总数：{{totalNum}}</div>
                  <div>单选题数：{{oneNum}}</div>
                  <div>多选题数：{{manyNum}}</div>
                  <div>判断题数：{{judgeNum}}</div>
                </div>
              </div>
            </div>
            <!--<el-form-item label="简介" prop="description" v-if="!chapterData.chapterData">-->
            <!--<el-input-->
            <!--style="width:790px;"-->
            <!--:rows="6"-->
            <!--v-model="chapterData.description"-->
            <!--maxLength="150"-->
            <!--placeholder="请输入简介"-->
            <!--clearable-->
            <!--type="textarea"-->
            <!--resize="none"-->
            <!--size="small"-->
            <!--/>-->
            <!--</el-form-item>-->
          </el-form>
          <div class="center-info-components-max-box scrollbar-box" v-loading="loading">
            <!--图片-->
            <img
              style="display: block;margin:0 auto;max-width:900px;"
              v-if="chapterData.postfix == 'png' || chapterData.postfix == 'jpeg' || chapterData.postfix == 'gif'"
              :src="chapterData.chapterData">
            <!--视频-->
            <!--<video-player-->
              <!--class="video-player vjs-custom-skin"-->
              <!--v-if="chapterData.postfix == 'mp4' || chapterData.postfix == 'webm'"-->
              <!--@pause="demo($event)"-->
              <!--:playsinline="true"-->
              <!--:options="playerOptions">-->
            <!--</video-player>-->
            <!--poster="@/assets/ZDimages/video_logo.jpg"-->
            <video class="video-player vjs-custom-skin"
                   style="width:810px;height:512px;"
                   autoplay="autoplay"
                   :poster="videoCover"
                   v-if="chapterData.chapterData && chapterData.postfix == 'mp4'">
              <source :src="chapterData.chapterData" type="video/mp4">
            </video>
            <!--word-->
            <iframe
              class="iframe"
              v-if="chapterData.postfix == 'pdf' || chapterData.postfix == 'doc' || chapterData.postfix == 'docx' || chapterData.postfix == 'ppt' || chapterData.postfix == 'pptx'"
              :src="chapterData.iframeSrc" scrolling="auto" frameborder="0">
            </iframe>
            <!--富文本-->
            <div v-if="chapterData.type == 5" v-html="chapterData.chapterData"></div>
          </div>
        </div>
        <!--课后练习-->
        <div class="center-content-box-two" v-if="exerciseAddType">
          <el-form class="center-content-box-two-top" style="margin-bottom:10px;" :model="exerciseQueryParams" ref="exerciseQueryParams" :inline="true" label-width="80px">
            <el-form-item label="题目名称" prop="content">
              <el-input
                style="width:140px;"
                v-model="exerciseQueryParams.content"
                placeholder="请输入题目名称"
              />
            </el-form-item>
            <el-form-item label="题目类型" prop="quType">
              <el-select
                style="width:150px;"
                v-model="exerciseQueryParams.quType"
                placeholder="请选择题目类型">
                <el-option
                  v-for="dict in quTypes"
                  :key="dict.type"
                  :label="dict.value"
                  :value="dict.type">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="题目分类" prop="cIds">
              <el-select
                style="width:150px;"
                v-model="exerciseQueryParams.cIds"
                placeholder="请选择题目分类">
                <el-option
                  v-for="dict in optionList"
                  :key="dict.id"
                  :label="dict.title"
                  :value="dict.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <p class="inquire-button-one" @click="exerciseHandleQuery" style="margin:0 10px;">查询</p>
              <p class="reset-button-one" @click="exerciseResetQuery">重置</p>
            </el-form-item>
          </el-form>
          <div class="center-content-box-two-bottom">
            <div class="center-content-box-two-bottom-left">
              <el-table v-loading="loading" border :data="exerciseList" empty-text="请在右侧添加题目">
                <el-table-column label="题目名称" align="left" prop="content"  :show-overflow-tooltip="true"/>
                <el-table-column width="40">
                  <template slot-scope="scope">
                    <i class="el-icon-circle-close del-i" @click="delExerciseListClick(scope.row)"></i>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="center-content-box-two-bottom-right">
              <div class="center-content-box-two-bottom-right-table ">
                <el-table v-loading="loading" border :data="el_courseList">
                  <el-table-column label="题目名称" align="left" prop="content"  :show-overflow-tooltip="true"/>
                  <el-table-column label="题目类型" align="left" prop="title" width="120" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                    <span
                      v-for="(item, index) in quTypes"
                      :key="index"
                      v-if="scope.row.quType == item.type"
                    >{{ item.value }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="left" width="100">
                    <template slot-scope="scope">
                      <p class="table-min-button"
                         style="width:80px;height:24px;line-height:24px;"
                         @click="exerciseAdd(scope.row)">添加</p>
                    </template>
                  </el-table-column>
                </el-table>
                <pagination :page-sizes="[20, 30, 40, 50]"
                  v-show="el_courseTotal>0"
                  :total="el_courseTotal"
                  :pager-count="5"
                  layout="total, pager, jumper"
                  :page.sync="exerciseQueryParams.pageNum"
                  :limit.sync="exerciseQueryParams.pageSize"
                  @pagination="getExerciseList"
                />
              </div>
            </div>
          </div>
          <div class="center-content-box-two-bottom-button">
            <p></p>
            <p class="reset-button-one" @click="exerciseAddClickOff">取消</p>
            <p class="inquire-button-one" @click="exerciseAddClickSave">确定</p>
          </div>
        </div>
      </div>
      <div class="right-courseware-box">
        <p class="title-p">资源管理</p>

        <div class="el-resources-tree scrollbar-box">
          <el-select v-model="selectTree" placeholder="请选择分类" style="width: 100%;margin-top: 20px;">
            <el-option :value="selectTreeValue"  style="height: auto;">
              <el-tree
                :data="treeData"
                :props="defaultProps"
                :highlight-current="true"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                ref="resourcesTree"
                default-expand-all
                @node-click="handleNodeClick"
              />
            </el-option>
          </el-select>
          <el-input class="el-resources-search" placeholder="请输入资源名称" v-model="resourceName" clearable style="margin-top: 14px;">
            <i slot="append" class="el-icon-search" style="font-size: 22px;" @click="queryResources"></i>
          </el-input>
<!--          <el-tree
            :data="treeData"
            :props="defaultProps"
            :highlight-current="true"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="resourcesTree"
            default-expand-all
            @node-click="handleNodeClick"
          />-->
        </div>
        <div class="el-resources-list ">
          <el-table :data="el_resourcesList" border :show-header="false">
            <el-table-column label="课件名称" align="left" prop="title" width="240"  :show-overflow-tooltip="true"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="80">
              <template slot-scope="scope">
                <p style="cursor:pointer;color:#1c84c6!important;" @click="addMinChildren(scope.row)">添加</p>
              </template>
            </el-table-column>
          </el-table>
          <pagination :page-sizes="[20, 30, 40, 50]"
            style="height:50px;margin-left:10px;"
            v-show="total>0"
            :total="total"
            layout="total, prev, next"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getResources"
          />
        </div>
      </div>
    </div>
    <!--课程设置-->
    <div class="center-content-max-box set-up-max-box" v-if="stepsType === 2">
      <el-form :model="setUpForm" ref="setUpForm" :rules="setUpRules" label-width="180px">
        <!--<el-form-item label="课程学习时长(分钟)" prop="duration" style="margin-top:20px;">-->
          <!--<el-input-number-->
            <!--style="width:220px;"-->
            <!--v-model="setUpForm.duration"-->
            <!--:min="1" :max="1000"-->
            <!--label="请输入课程学习时长">-->
          <!--</el-input-number>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="积分值" prop="points" style="margin-top:20px;">-->
          <!--<el-input-number-->
            <!--style="width:220px;"-->
            <!--v-model="setUpForm.points"-->
            <!--:min="0" :max="1000"-->
            <!--label="请输入积分值">-->
          <!--</el-input-number>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="学习机积分值" prop="machinePoints" style="margin-top:20px;">-->
          <!--<el-input-number-->
            <!--style="width:220px;"-->
            <!--v-model="setUpForm.machinePoints"-->
            <!--:min="0" :max="1000"-->
            <!--label="请输入学习机积分值">-->
          <!--</el-input-number>-->
        <!--</el-form-item>-->
        <el-form-item label="有效时间类型" prop="ceType"  style="margin-top:20px;">
          <el-radio v-model="setUpForm.ceType" :label="0" style="margin-right:20px;">永久</el-radio>
          <el-radio v-model="setUpForm.ceType" :label="1">有限</el-radio>
        </el-form-item>
        <el-form-item label="过期日期" prop="ceTime" v-if="setUpForm.ceType == 1" style="margin-top:20px;">
          <el-date-picker
            v-model="setUpForm.ceTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择过期日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="课程上架状态" prop="status" style="margin-top:20px;">
          <el-switch
            v-model="setUpForm.status"
            active-color="#00b7ee"
            inactive-color="#dedede"
            :active-value="1"
            :inactive-value="0">
          </el-switch>
        </el-form-item>
        <el-form-item label="显示课程拖拽进度" prop="videoDraggable" style="margin-top:20px;">
          <el-switch
            v-model="setUpForm.videoDraggable"
            active-color="#00b7ee"
            inactive-color="#dedede"
            :active-value="1"
            :inactive-value="0">
          </el-switch>
        </el-form-item>
      </el-form>
    </div>
    <div class="bottom-button-box">
      <el-button @click="offPage">取 消</el-button>
      <el-button type="primary" style="width:200px;" @click="stepsClick">{{stepsType==0?'保存并进入下一步':(stepsType==1?'下一步':stepsType==2?'完成':'')}}</el-button>
    </div>
    <!--选择分类-->
    <el-dialog title="选择分类" :visible.sync="openClassTree" width="700px" append-to-body>
      <div style="height:500px;" class="scrollbar-box">
        <el-tree
          v-if="openClassTree"
          :data="classTree"
          show-checkbox
          default-expand-all
          node-key="id"
          :check-strictly="true"
          ref="ditTree"
          highlight-current
          @node-click="editCheck"
          @check="editCheck"
          :props="defaultProps">
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openClassTreeClickOff">取 消</el-button>
        <el-button type="primary" @click="openClassSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { listQu } from "@/api/exam/qu";
  import { list_option } from "@/api/exam/el_classify";
  import { listDepartments } from "@/api/system/dept";
  import { listEl_resources } from "@/api/exam/el_resources";
  import { getEl_course,addEl_course, updateEl_course,add_el_chapter,edit_el_chapter,del_el_chapter,queryChapterQu } from "@/api/exam/el_course";
  import { listEl_category} from "@/api/exam/el_category";
  import { getToken } from "@/utils/auth";
  import { videoPlayer } from 'vue-video-player'
  import 'video.js/dist/video-js.css'
  export default {
    name: "edit",
    props:{
      infoId:{},
    },
    components:{
      videoPlayer
    },
    data() {
      return {
        videoCover:window.location.href.split('://')[0]+'://' + this.judgmentNetworkReturnAddress() + localStorage.getItem('videoCover'),
        selectTree: '',
        selectTreeValue: [],
        /******************基本信息-开始******************/
        //上传封面设置
        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        //步骤条状态
        stepsType:0,
        //课程信息
        infoForm:{
          title:"",
          // content:"",
          cateName:"",
          // certUrl:"",
          checkList:[],
          deptId:"",
        },
        courseTypeList:[
          {id:'0',name:'基础课程'},
          {id:'1',name:'视频课程'},
          {id:'2',name:'VR课程'},
          {id:'3',name:'趣味学习'},
        ],
        resourceName:'',//资源名称
        //课程信息校验
        infoRules: {
          title: [
            { required: true, message: "请输入课程名称", trigger: "blur" },
            { required: true, message: "请输入课程名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
          cateName: [
            { required: true, message: "请选择课程分类", trigger: "blur" },
          ],
          checkList: [
            { required: true, message: "请选择适用类型", trigger: "blur" },
          ],
          deptId: [
            { required: true, message: "请选择适用学院", trigger: "blur" },
          ],
          // certUrl: [
          //   { required: true, message: "请上传封面", trigger: "blur" },
          // ],
          // content: [
          //   { required: true, message: "请输入资料介绍", trigger: "blur" },
          // ],
        },
        //分类页面
        openClassTree:false,
        //分类树数据
        classTree:[],
        defaultProps: {
          children: "children",
          label: "title"
        },
        //分类选择临时数据
        openClassTreeType:{},
        //学院
        deptOptions:[],
        //适用类型
        scopeTypeList:[
          {id:"1",value:'安全准入考试'},
          {id:"2",value:'负面清单考试'},
          {id:"3",value:'黑名单考试'}
        ],
        /******************基本信息-结束******************/
        /******************章节信息-开始******************/
        // 章节数组
        chapterList:[],
        chapterIndex:0,
        chapterData:{},
        //课程信息校验
        chapterRules: {
          title: [
            { required: true, message: "请输入标题", trigger: "blur" },
          ],
          assessName: [
            { required: true, message: "请输入考核名称", trigger: "blur" },
          ],
        },
        //课件列表
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize:20,
        },
        //树列表
        treeData:[],

        //课件列表
        el_resourcesList:[],
        total:0,
        //加载动画
        loading:false,
        //pdf页数
        pdfNumPages:null,
        pageNum: 1,
        pageTotalNum: 1, //# 总页数
        loadedRatio: 0, //# 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
        //视频设置

        playerOptions: {
          playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
          autoplay: false, // 如果为true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 是否视频一结束就重新开始。
          preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: 'zh-CN',
          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [],
          poster: '', // 封面地址
          notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true, // 当前时间和持续时间的分隔符
            durationDisplay: true, // 显示持续时间
            remainingTimeDisplay: false, // 是否显示剩余时间功能
            fullscreenToggle: true // 是否显示全屏按钮
          }
        },
        //课后题添加
        exerciseAddType:false,
        //题目类型
        quTypes: [
          {
            type: 1,
            value: "单选题",
          },
          {
            type: 2,
            value: "多选题",
          },
          {
            type: 3,
            value: "判断题",
          },
        ],
        //题目分类
        optionList:[],
        //题目搜索项
        exerciseQueryParams:{
          pageNum: 1,
          pageSize:20,
          content:null,
          quType:null,
          cIds:null,
        },
        //题目数量
        el_courseTotal:0,
        //题目列表
        el_courseList:[],
        //选中题目数据
        exerciseList:[],
        //总题数
        totalNum:0,
        //单选数
        oneNum:0,
        //多选数
        manyNum:0,
        //判断数
        judgeNum:0,
        /******************章节信息-结束******************/
        /******************设置信息-开始******************/
        setUpForm:{},
        durationNum:{},
        setUpRules:{
          duration: [
            { required: true, message: "请输入课程学习时长", trigger: "blur" },
          ],
          // points: [
          //   { required: true, message: "请输入积分值", trigger: "blur" },
          // ],
          // machinePoints: [
          //   { required: true, message: "请输入学习机积分值", trigger: "blur" },
          // ],
          ceType: [
            { required: true, message: "请选择有效时间类型", trigger: "blur" },
          ],
          ceTime: [
            { required: true, message: "请选择过期日期", trigger: "blur" },
          ],
        }
        /******************设置信息-结束******************/
      }
    },
    created() {
      console.log(this.infoId);
      if(this.infoId.id){
        this.getInfoData();
      }
    },
    mounted(){
      this.getTreeData();
      this.getResourceTreeData();
      this.getResources();
      this.getDeptList();
      this.getList_option();
      this.getExerciseList();
    },
    methods:{
      /******************基本信息-开始******************/
      /* 查询学院列表 */
      getDeptList(){
        listDepartments().then(response => {
          // this.deptOptions = response.data;
          this.$set(this, 'deptOptions', response.data)
        });
      },
      //步骤条下一步按钮
      stepsClick(type,e){
        if (type == 0||type == 1||type == 2){
          if(this.infoId.id && this.stepsType != type){
            if(type == 1){
              this.queryParams.cateId = "";
              this.queryParams.pageNum = 1;
              this.queryParams.pageSize = 20;
              this.getResources();
            }
            this.getInfoData();
            this.stepsType = type;
          }
        }else if(this.stepsType == 0){
          if(this.stepsType == 0){
            this.addElCourseClick();
          }
        }else if(this.stepsType == 1){
          // this.edit_el_chapterClick();
          this.stepsType++
        }else if(this.stepsType == 2){
          this.edutSetUpClick();
        }
        //关闭课后题目选择页面
        this.exerciseAddClickOff();
      },
      //选择分类页面开启
      openClassTreeClick(){
        let self = this;
        this.openClassTree = true;
        if(this.infoForm.cateId){
          setTimeout(function(){
            self.$refs.ditTree.setCheckedKeys([self.infoForm.cateId]);
          },100);
        }
      },
      openClassTreeClickOff(){
        this.openClassTree = false;
        this.openClassTreeType = {};
      },
      //上传
      handleAvatarSuccess(res, file) {
        this.infoForm.certUrl = res.data.url;
        this.$forceUpdate()
      },
      beforeAvatarUpload(file) {
        let type = false;
        console.log('file',file);
        if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
          type = true;
        }else{
          this.$message.error('只能上传png/jpeg/gif格式图片');
          type = false;
        }
        return type;
      },
      /** 查询课程分类树 */
      getTreeData() {
        listEl_category({},2).then( response => {
          this.classTree = JSON.parse(JSON.stringify(response.data));

        });
      },
      /** 查询资源分类树 */
      getResourceTreeData(){
        listEl_category({},1).then( response => {
          //this.classTree = JSON.parse(JSON.stringify(response.data));
          let list = [];
          let obj = {
            children:[],
            title:"所有分类",
            id:"",
          };
          list.push(obj);
          for(let i=0;i<response.data.length;i++){
            list.push(response.data[i]);
          }
          this.treeData =  list;
        });
      },
      //分类树点击事件
      editCheck(event) {
        this.$refs.ditTree.setCheckedKeys([event.id]);
        this.openClassTreeType.cateName = event.title;
        this.openClassTreeType.cateId= event.id;
      },
      //选择分类确定
      openClassSubmit(){
        let obj = JSON.parse(JSON.stringify(this.openClassTreeType));
        this.infoForm.cateId = obj.cateId;
        this.infoForm.cateName = obj.cateName;
        this.openClassTree = !this.openClassTree;
      },
      //退出上一页
      offPage(){
        this.$parent.goPageEdit(4);
      },
      //获取课程数据
      getInfoData(){
        let self = this;
        getEl_course(this.infoId.id).then( response => {
          //基础信息
          this.$set(this.infoForm,'title',response.data.title);
          this.$set(this.infoForm,'cateName',response.data.cateTitle);
          this.$set(this.infoForm,'cateId',response.data.cateId);
          // this.$set(this.infoForm,'certUrl',response.data.img);
          // this.$set(this.infoForm,'content',unescape(response.data.description));
          if(response.data.scopeType){
            let scopeList = response.data.scopeType.split(',')
            this.$set(this.infoForm,'checkList',scopeList);
          }
          this.$set(this.infoForm,'deptId',parseInt(response.data.deptIds));
          //章节信息
          for(let i=0;i<response.data.chapterList.length;i++){
            response.data.chapterList[i].showType = true;
          }
          this.$set(this,'chapterList',response.data.chapterList);
          if(response.data.chapterList[0]){
            this.chapterIndex = response.data.chapterList[0].id;
            this.chapterData = JSON.parse(JSON.stringify(response.data.chapterList[0]))
          }else{
            this.chapterIndex = "";
            this.chapterData = {};
          }
          //设置信息
          this.$set(this.setUpForm,'duration',response.data.duration);
          // this.$set(this.setUpForm,'points',response.data.points);
          // this.$set(this.setUpForm,'machinePoints',response.data.machinePoints);
          this.$set(this.setUpForm,'ceType',response.data.ceType);
          this.$set(this.setUpForm,'ceTime',response.data.ceTime);
          this.$set(this.setUpForm,'status',response.data.status);
          this.$set(this.setUpForm,'videoDraggable',response.data.videoDraggable);
        });
      },
      //获取课程信息不从新定义index
      getInfoDataTow(){
        getEl_course(this.infoId.id).then( response => {
          console.log("课程数据",response)
          this.$set(this.infoForm,'title',response.data.title);
          this.$set(this.infoForm,'cateName',response.data.cateTitle);
          this.$set(this.infoForm,'cateId',response.data.cateId);
          // this.$set(this.infoForm,'certUrl',response.data.img);
          // this.$set(this.infoForm,'content',unescape(response.data.description));
          if(response.data.scopeType){
            let scopeList = response.data.scopeType.split(',')
            this.$set(this.infoForm,'checkList',scopeList);
          }
          this.$set(this.infoForm,'dictType',response.data.dictType);
          for(let i=0;i<response.data.chapterList.length;i++){
            response.data.chapterList[i].showType = true;
          }
          this.$set(this,'chapterList',response.data.chapterList);

        });
      },
      //信息保存
      addElCourseClick(){
        let self = this;
        this.$refs["infoForm"].validate(valid => {
          if (valid) {
            if(this.infoId.id){
              let obj = {
                id:this.infoId.id,
                title:this.infoForm.title,
                cateId:this.infoForm.cateId,
                // img:this.infoForm.certUrl,
                // description:escape(this.infoForm.content),
                deptIds:this.infoForm.deptId,
              };
              let scopeText =  this.infoForm.checkList+'';
              obj.scopeType = scopeText;
              // let scopeType = [];
              // for(let i=0;i<self.infoForm.checkList.length;i++){
              //   if(self.infoForm.checkList[i] == ''){
              //
              //   }
              // }
              updateEl_course(obj).then( response => {
                this.msgSuccess("修改成功");
                this.stepsType++;
              });
            }else{
              let obj = {
                title:this.infoForm.title,
                cateId:this.infoForm.cateId,
                // img:this.infoForm.certUrl,
                // description:escape(this.infoForm.content),
                deptIds:this.infoForm.deptId,
              };
              let scopeText =  this.infoForm.checkList+'';
              obj.scopeType = scopeText;
              addEl_course(obj).then( response => {
                this.infoId.id = response.data.id;
                this.getInfoData();
                this.msgSuccess("新增成功");
                this.stepsType++;
              });
            }
          }
        });
      },
      /******************基本信息-结束******************/
      /******************章节信息-开始******************/
      //搜索查询课件
      queryResources() {
        this.queryParams.title=this.resourceName;
        listEl_resources(this.queryParams).then( response => {
          this.el_resourcesList =  response.rows;
          this.total =  response.total;
        });
      },
      //获取课件
      getResources() {
        listEl_resources(this.queryParams).then( response => {
          this.el_resourcesList =  response.rows;
          this.total =  response.total;
        });
      },
      //获取题目分类
      getList_option(){
        list_option({}).then(response => {
          this.optionList = response.data;
        });
      },
      //选中章节
      checkChapterClick(item){
        this.chapterIndex = item.id;
        this.$set(this,'chapterData',JSON.parse(JSON.stringify(item)))
        let hour = parseInt(this.chapterData.duration/3600);
        let hourNum = this.chapterData.duration - this.accMul(hour,3600);
        let minute = parseInt(hourNum/60)
        let second = hourNum - this.accMul(minute,60);
        let timeValue = hour+':'+minute+':'+second;
        this.$set(this.chapterData,'timeValue',timeValue);
        if(this.chapterData.postfix == "mp4"){
          this.getVideo();
        }else if(this.chapterData.postfix == "pdf" || this.chapterData.postfix == "doc" || this.chapterData.postfix == "docx"||this.chapterData.postfix == "ppt" || this.chapterData.postfix == "pptx"){
          this.getWord();
        }else if(this.chapterData.type == 5){
          this.getRichText();
        }
        if(this.chapterData.isAssess == 1){
          this.getQueryChapterQu(this.chapterData.id);
        }
        this.countTheNumberOfQuestions();
        this.exerciseAddClickOff();
        this.$forceUpdate();
      },
      //富文本处理
      getRichText(){
        this.chapterData.chapterData = unescape(this.chapterData.chapterData)
      },
      //视频处理
      getVideo(){
        let list = [];
        let obj = {
          type:'video/'+this.chapterData.postfix,
          src:this.chapterData.chapterData,
        };
        list.push(obj);
        this.playerOptions.sources = list;
      },
      //word处理
      async getWord(){
        this.chapterData.iframeSrc = this.urlJudge(this.chapterData.chapterData);
      },
      demo(player){
        console.log("123",player)
      },
      //子类展开/关闭
      chapterTreeClick(item,type){
        item.showType = type;
      },
      //添加新章节
      add_el_chapterClick(){
        let obj = {
          type:0,
          courseId:this.infoId.id,
          parentId:0,
          title:"新章节"
        };
        add_el_chapter(obj).then( response => {
          response.data.showType = true;
          if(this.chapterList[0]){
            this.chapterList.push(response.data);
          }else{
            this.chapterList.push(response.data);
            this.chapterIndex = response.data.id
            this.chapterData = JSON.parse(JSON.stringify(response.data))
          }
          this.msgSuccess("新增成功");
        });
      },
      //时间确定
      timeChange(data){
        // this.$set(this.chapterData,'timeValue',data);
        let timeList =  data.split(":");
        let hour = timeList[0];
        let minute = timeList[1];
        let second = timeList[2];
        minute = this.accAdd(minute,this.accMul(hour,60));
        second = this.accAdd(second,this.accMul(minute,60));
        this.$set(this.chapterData,'duration',second);
        this.$forceUpdate();
      },
      //修改章节
      edit_el_chapterClick(){
        let self = this;
        console.log("this.chapterData.duration",this.chapterData.duration)
        this.$refs["chapterForm"].validate(valid => {
          if (valid) {
            if(this.chapterData.chapterData){
              if(self.chapterData.isAssess == 1&& !self.chapterData.exerciseList){
                this.msgError("请添加题目或关闭课后考核")
                return
              }
              if(self.chapterData.isAssess == 1&& !self.chapterData.exerciseList[0]){
                this.msgError("请添加题目或关闭课后考核")
                return
              }
              let list = [];
              if(self.chapterData.isAssess == 1&& self.chapterData.exerciseList){
                for(let i=0;i<self.chapterData.exerciseList.length;i++){
                  let minObj = {
                    quId:self.chapterData.exerciseList[i].quId
                  }
                  list.push(minObj);
                }
              }
              let obj ={
                courseId:this.infoId.id,
                id:this.chapterData.id,
                title:this.chapterData.title,
                // description:this.chapterData.description,
                duration:this.chapterData.duration,
                isAssess:this.chapterData.isAssess,
              };
              if(list[0]){
                obj.assessName = this.chapterData.assessName
                obj.chapterQuList = list;
              }
              edit_el_chapter(obj).then( response => {
                this.msgSuccess("修改成功");
                this.getInfoDataTow();
                this.stepsType++
              });
            }else{
              let obj ={
                courseId:this.infoId.id,
                id:this.chapterData.id,
                title:this.chapterData.title,
                // description:this.chapterData.description,
              }
              edit_el_chapter(obj).then( response => {
                this.msgSuccess("修改成功");
                this.getInfoDataTow();
                this.stepsType++
              });
            }
          }
        });
      },
      //删除章节
      del_el_chapter(item){
        let self = this;
        del_el_chapter(item.id).then( response => {
          for(let i=0;i<self.chapterList.length;i++){
            if(item.id == self.chapterList[i].id){
              self.chapterList.splice(i,1);
            }
          }
          if(item.id == this.chapterIndex){
            if(self.chapterList[0]){
              this.chapterIndex = self.chapterList[0].id
              this.chapterData = JSON.parse(JSON.stringify(self.chapterList[0]))
            }else{
              this.chapterIndex = "";
              this.chapterData = {};
            }
          }
          this.$forceUpdate();
          this.msgSuccess("删除成功");
          this.getInfoDataTow();
        });
      },
      //添加节
      addMinChildren(item){
        console.log("item",item);
        if(!this.chapterData.id){
          this.msgError("请先选择或添加章节");
          return
        }
        if(this.chapterData.chapterData){
          this.msgError("无法给课程添加课程");
          return
        }
        let obj = {
          type:1,
          courseId:this.infoId.id,
          parentId:this.chapterData.id,
          resourcesId:item.id,
          chapterData:item.path,
          title:item.title,
          duration:item.duration
        };
        if(item.type == 5){
          obj.chapterData = item.content
        }
        add_el_chapter(obj).then( response => {
          this.msgSuccess("添加成功");
          this.getInfoDataTow();
        });
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data) {
        this.selectTree = data.title;
        this.queryParams.cateId = data.id;
        console.log('data',data);
        this.getResources();
      },
      //打开课后练习页面
      exerciseAddClickOn(){
        this.exerciseAddType = true;
        if(!this.chapterData.exerciseList){
          this.$set(this.chapterData,'exerciseList',[]);
          this.exerciseList = [];
        }else{
          this.$set(this,'exerciseList',this.chapterData.exerciseList);
        }
      },
      //关闭课后练习页面
      exerciseAddClickOff(){
        this.exerciseAddType = false;
      },
      //保存课后练习页面数据并计算题目数量
      exerciseAddClickSave(){
        this.$set(this.chapterData,'exerciseList',this.exerciseList);
        this.countTheNumberOfQuestions();
        this.exerciseAddType = false;
      },
      //删除已添加题目
      delExerciseListClick(row){
        let self = this;
        for(let i=0;self.exerciseList.length;i++){
          if(row.quId == self.exerciseList[i].quId){
            self.exerciseList.splice(i,1)
          }
        }
      },
      //获取题目列表
      getExerciseList() {
        this.loading = true;
        listQu(this.exerciseQueryParams).then((response) => {
          this.el_courseList = response.rows;
          this.el_courseTotal = response.total;
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      exerciseHandleQuery() {
        this.exerciseQueryParams.pageNum = 1;
        this.getExerciseList();
      },
      /** 重置按钮操作 */
      exerciseResetQuery() {
        this.resetForm("exerciseQueryParams");
        this.handleQuery();
      },
      /** 添加题目*/
      exerciseAdd(row){
        let self = this;
        for(let i=0;i<self.exerciseList.length;i++){
          if(row.id == self.exerciseList[i].quId){
            this.msgError("该题目已添加")
            return
          }
        }
        row.quId = row.id;
        this.exerciseList.push(row);
      },
      /** 计算题目数量 */
      countTheNumberOfQuestions(){
        let self = this;
        if(this.stepsType == 1){
          console.log('1');
          if(this.chapterData.chapterData){
            console.log('2');
            if(this.chapterData.exerciseList){
              console.log('3');
              let total = 0;
              let one = 0;
              let many = 0;
              let judge = 0;
              for(let i=0;i<self.chapterData.exerciseList.length;i++){
                console.log('4');
                total++
                if(self.chapterData.exerciseList[i].quType == 1){
                  one++
                }else if(self.chapterData.exerciseList[i].quType == 2){
                  many++
                }else if(self.chapterData.exerciseList[i].quType == 3){
                  judge++
                }
              }
              this.totalNum = total;
              this.oneNum = one;
              this.manyNum = many;
              this.judgeNum = judge;
            }else{
              this.totalNum = 0;
              this.oneNum = 0;
              this.manyNum = 0;
              this.judgeNum = 0;
            }
          }else{
            this.totalNum = 0;
            this.oneNum = 0;
            this.manyNum = 0;
            this.judgeNum = 0;
          }
        }
      },
      //获取章节题目数据
      getQueryChapterQu(id){
        console.log("id",id)
        queryChapterQu(id).then( res => {
          // console.log("res",res)
          this.$set(this.chapterData,'exerciseList',res.data)
          this.countTheNumberOfQuestions();
        });
      },
      /******************章节信息-结束******************/
      /******************设置信息-开始******************/
      edutSetUpClick(){
        this.$refs["setUpForm"].validate(valid => {
          if (valid) {
            let obj = {
              id:this.infoId.id,
              // duration:this.setUpForm.duration,
              // points:this.setUpForm.points,
              ceTime:this.setUpForm.ceTime,
              ceType:this.setUpForm.ceType,
              status:this.setUpForm.status,
              videoDraggable:this.setUpForm.videoDraggable,
            };
            updateEl_course(obj).then( response => {
              this.msgSuccess("修改成功");
              this.offPage();
            });
          }
        });
      },
      /******************设置信息-结束******************/
      //乘法
      accMul(arg1,arg2){
        var m=0,s1=arg1.toString(),s2=arg2.toString();
        try{m+=s1.split(".")[1].length}catch(e){}
        try{m+=s2.split(".")[1].length}catch(e){}
        return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
      },
      //加法
      accAdd(arg1,arg2){
        var r1,r2,m;
        try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
        try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
        m=Math.pow(10,Math.max(r1,r2))
        return ((arg1*m+arg2*m)/m).toFixed(0);
      },
    },
  }
</script>

<style scoped lang="scss">
  .edit-page {
    flex:1;
    display: flex!important;
    flex-direction: column;
    overflow: hidden;
    /*box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);*/
    /*padding:20px!important;*/
    /*margin:9px 20px 20px;*/
    .top-steps-box{
      margin:20px 20px 0;
    }
    .center-content-max-box{
      flex:1;
    }
    .bottom-button-box{
      width:280px;
      margin:0 auto 20px;
    }
    .info-max-box{
      margin:20px 20px 0;
    }
    .chapter-max-box{
      *{
        margin:0;
        padding:0;
      }
      display: flex;
      overflow: hidden;
      .left-new-chapter-box{
        /*backAnimation-color: blueviolet;*/
        box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.1);
        border-radius:6px;
        width:270px;
        overflow: hidden;
        margin:20px;
        display: flex;
        flex-direction: column;
        .add-chapter-p{
          margin:15px auto;
        }
        .chapter-list-for-max-box{
          flex:1;
          margin-bottom:20px;
          overflow-y: scroll;
          padding:0!important;
          .chapter-list-for-big-box{
            margin: 10px 6px 0 10px;
            .chapter-list-for-box{
              display: flex;
              background: #F2F2F2;
              border:1px solid #F2F2F2;
              p{
                line-height:30px;
                font-size:15px;
              }
              p:nth-child(1){
                width:30px;
                text-align: center;
                font-size:18px;
                cursor:pointer;
              }
              p:nth-child(2){
                flex:1;
                display:block;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
              }
              p:nth-child(3){
                width:30px;
                text-align: center;
                font-size:18px;
                cursor:pointer;
              }
            }
            .chapter-list-min-for-box{
              display: flex;
              margin:10px 0 0 10px;
              border:1px solid #F2F2F2;
              p{
                line-height:30px;
                font-size:15px;
              }
              p:nth-child(1){
                flex:1;
                margin-left:10px;
                display:block;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
              }
              p:nth-child(2){
                width:30px;
                text-align: center;
                font-size:18px;
                cursor:pointer;
              }
            }
          }
        }
      }
      .center-content-box{
        display: flex;
        flex-direction: column;
        /*backAnimation-color: red;*/
        box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.1);
        border-radius:6px;
        flex:1;
        margin:20px 0;
        width: 861px;
        .center-content-box-one{
          flex:1;
          display: flex;
          flex-direction: column;
        }
        .center-content-box-two{
          flex:1;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          .center-content-box-two-top{
            padding-top:10px;
          }
          .center-content-box-two-bottom{
            flex:1;
            display: flex;
            overflow: hidden;
            /*max-width:956px;*/
            .center-content-box-two-bottom-left{
              width:320px;
              border:1px solid #dedede;
              border-radius:4px;
              margin:0 20px;
              display: flex;
              flex-direction: column;
              overflow-y: hidden;
              .del-i{
                color:#999;
                cursor:pointer;
                font-size:16px;
              }
              .del-i:hover{
                color:#FF6666;
              }
              .center-content-box-two-bottom-left-title{
                background: #f8f8f9;
                border-bottom:1px solid #dfe6ec;
                height:40px;
                line-height:40px;
                padding-left:10px;
                font-size:14px;
              }
              .center-content-box-two-bottom-left-null{
                line-height:100px;
                text-align: center;
                font-size:14px;
                color:#999;
              }
              .center-content-box-two-bottom-left-for-box{
                flex:1;
                display: flex;
                flex-direction: column;
                .center-content-box-two-bottom-left-for-p{
                  border-top:1px solid #dfe6ec;
                  flex:1;
                  line-height:40px;
                  font-size:14px;
                  color:#999;
                  font-weight:500;
                  padding:0 10px;
                  display:block;
                  white-space:nowrap;
                }
              }
            }
            .center-content-box-two-bottom-right{
              flex:1;
              border:1px solid #dedede;
              border-radius:4px;
              display: flex;
              flex-direction: column;
              overflow-y: hidden;
              margin-right:20px;
              position: relative;
              .center-content-box-two-bottom-right-table{
                display: flex;
                flex-direction: column;
                position: absolute;
                width:100%;
                height:100%;
              }
            }
          }
          .center-content-box-two-bottom-button{
            height:60px;
            display: flex;
            p:nth-child(1){
              flex:1;
            }
            p:nth-child(2){
              width:80px;
              margin:10px 0;
            }
            p:nth-child(3){
              width:80px;
              margin:10px 20px;
            }
          }
        }
        .center-info-components-max-box{
          margin:20px;
          overflow-y: scroll;
          flex:1;
          display: flex;
          flex-direction: column;
          iframe{
            flex:1;
          }
        }
        .exercise-add-max-box{
          margin:20px 20px 0;
          display: flex;
          .exercise-add-text-box{
            display: flex;
            flex:1;
            div{
              flex:1;
              padding:10px 20px;
              background: #f5f5f5;
            }
          }
          .exercise-add-button{
            width:200px;
            line-height:40px;
            text-align: center;
            border-radius:6px;
            margin-right:20px;
          }
        }
      }
      .right-courseware-box{
        /*backAnimation-color: blue;*/
        display: flex;
        flex-direction: column;
        box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.1);
        border-radius:6px;
        width:365px;
        margin:20px;
        padding: 0 20px;
        box-sizing: border-box;
        .el-resources-tree{
         /* flex:1;*/
          border-bottom:1px solid #dedede;
          overflow-y: scroll;
          height: 130px;
        }
        .el-resources-search{
          flex:1;
        }
        .el-resources-list{
          height: 72%;
          overflow-y: auto;

        }
      }
    }
    .set-up-max-box{
      *{
        margin:0;
        padding:0;
      }
    }
    .title-p{
      margin:0;
      line-height:40px;
      font-size:16px;
      color:#0045AF;
      font-weight:500;
      padding-left:20px;
      border-bottom:2px solid #E0E0E0;
    }
    .null-add-p{
      font-size:20px;
      color:#999;
      text-align: center;
      line-height:300px;
      font-weight:500;
    }
    .checkChapter{
      border:1px solid #0045AF !important;
    }
    .video-player{
      video{
        object-fit:fill!important;
      }
    }

  }

</style>