pbl-teacher-table/src/components/pages/addCourse.vue

<template>
  <div class="pb_content">
    <div class="pb_content_body" style="position: relative; margin: 0">
      <div class="right">
        <div class="courseTop">
          <div class="stepsNav">
            <h3 class="info_title" v-if="steps == 1">课程内容填写</h3>
            <h3 class="info_title" v-if="steps == 2">请选择课程框架</h3>
            <h3 class="info_title" v-if="steps == 3">课程内容填写</h3>
            <h3 class="info_title" v-if="steps == 4">上传课程</h3>
            <el-breadcrumb
              separator-class="el-icon-arrow-right"
              style="margin-top: 15px"
            >
              <el-breadcrumb-item
                :to="{ path: '/course?userid=' + userid + '&oid=' + oid }"
                >课程管理</el-breadcrumb-item
              >
              <el-breadcrumb-item>添加课程</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div
            v-if="steps == 1 || steps == 2 || steps == 3"
            style="
              font-size: 25px;
              color: #dedede;
              font-weight: bold;
              margin-left: auto;
              margin-right: 2%;
            "
          >
            {{
              steps == 1
                ? "第一步"
                : steps == 2
                ? "第二步"
                : steps == 3
                ? "第三步"
                : ""
            }}
          </div>
        </div>
        <div style="display: flex; margin-top: 20px; position: relative">
          <div class="stepBg" :class="steps == 3 ? 'isHeight' : ''">
            <div v-if="steps == 1" class="first" @click="navSteps(1)">
              <div>
                <img src="../../assets/icon/first.png" alt />
              </div>
              <div>填写基本信息</div>
            </div>
            <div v-else class="firstNo" @click="navSteps(1)">
              <div>
                <img src="../../assets/icon/firstNo.png" alt />
              </div>
              <div>填写基本信息</div>
            </div>
            <div v-show="cid == ''" class="secondNo">
              <div
                v-if="steps == 2"
                class="newSteps second"
                @click="navSteps(2)"
              >
                <div style="margin: 5px 10px 0 0; width: 2rem">
                  <img src="../../assets/icon/second.png" alt />
                </div>
                <div>选择课程框架</div>
              </div>
              <div v-else class="newSteps secondNo" @click="navSteps(2)">
                <div>
                  <img src="../../assets/icon/secondNo.png" alt />
                </div>
                <div>选择课程框架</div>
              </div>
            </div>

            <div v-if="steps == 3" class="third" @click="navSteps(3)">
              <div>
                <img src="../../assets/icon/third.png" alt />
              </div>
              <div>上传课程内容</div>
            </div>
            <div v-else class="thirdNo" @click="navSteps(3)">
              <div>
                <img src="../../assets/icon/thirdNo.png" alt />
              </div>
              <div>上传课程内容</div>
            </div>
            <div v-if="steps == 4" class="four">
              <div>
                <img src="../../assets/icon/four.png" alt />
              </div>
              <div>上传完成</div>
            </div>
            <div v-else class="fourNo">
              <div>
                <img src="../../assets/icon/fourNo.png" alt />
              </div>
              <div>上传完成</div>
            </div>
          </div>
          <div class="rightBox" v-if="this.steps == 1">
            <div class="whiteBg">
              <div class="right_title">课程基本信息</div>
              <div class="basic_box">
                <div class="big_box">
                  <div class="left_first">
                    <div>
                      <div>
                        <div class="bInfo_title" style="margin-bottom: 15px">
                          <span style="color: red">*</span> 课程名称
                        </div>
                        <div style="display: flex">
                          <img
                            src="../../assets/icon/projectName.png"
                            alt
                            style="margin-right: 8px"
                          />
                          <input
                            type="text"
                            placeholder="请输入课程名称"
                            class="binfo_input"
                            v-model="courseName"
                          />
                        </div>
                      </div>
                      <div class="both">
                        <div class="choose">
                          <div
                            class="all_choose"
                            v-for="(item, index) in CourseType[0]"
                            :key="index"
                          >
                            <span>{{ item.name }}</span>
                            <el-checkbox-group v-model="courseTypeId">
                              <el-checkbox
                                v-for="item1 in CourseTypeJson[item.id]"
                                :key="item1.id"
                                :label="item1.id"
                                >{{ item1.name }}</el-checkbox
                              >
                            </el-checkbox-group>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="whiteBg" style="border-radius: 0">
              <div class="right_first">
                <div class="right_title">上传封面与成员</div>

                <div
                  style="
                    padding: 0 0 50px 0;
                    display: flex;
                    align-items: baseline;
                    justify-content: flex-start;
                  "
                >
                  <div style="margin: 45px 0px 0px 80px">
                    <div class="bInfo_title" style="margin-top: 0 !important">
                      课程封面
                    </div>

                    <el-upload
                      :class="{ disUoloadSty: noneBtnImg }"
                      class="upCss"
                      action="#"
                      list-type="picture"
                      v-loading="uploadLoading1"
                      :http-request="beforeUpload1"
                      ref="upload1"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handle_remove1"
                      :show-file-list="true"
                      :file-list="cover"
                      accept="image/*"
                      :limit="1"
                      :on-exceed="onExceed"
                    >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                  </div>
                  <div
                    style="
                      display: flex;
                      flex-flow: row nowrap;
                      flex-direction: row;
                      align-items: baseline; ;
                    "
                  >
                    <div style="flex: 0.5 1 0%; margin: 30px 80px 0">
                      <div class="bInfo_title">协同编辑</div>
                      <div
                        class="addPeople"
                        @click="isNoFinsh"
                        style="background: #6b92c9"
                      >
                        添加协同成员
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="whiteBg" style="border-radius: 0; margin-top: 15px">
              <div class="right_title">课程简要描述</div>
              <div style="width: 55%; padding: 10px 0 10px 80px">
                <div>
                  <textarea
                    rows="8"
                    class="binfo_input"
                    cols
                    v-model="courseText"
                  ></textarea>
                </div>
              </div>
              <el-switch
                v-model="isTeacherSee"
                active-text="允许给其他老师查看"
                style="margin: 30px 0px 10px 110px; padding-bottom: 30px"
              ></el-switch>
            </div>
          </div>
          <div class="rightBox" v-if="this.steps == 2">
            <div class="basic_box" style="margin: 20px 30px 0 !important">
              <div
                style="
                  color: #b8b8b8;
                  background: #fff;
                  width: 26%;
                  height: 40px;
                  border-radius: 15px;
                  padding-left: 20px;
                  line-height: 40px;
                  font-size: 17px;
                  box-shadow: 0px 1px 2px 2px #e0e0e0;
                "
              >
                请选择合适的课程模板
              </div>
              <div class="wordbox">
                <div
                  class="wordTeacher"
                  v-for="(aa, indexF) in templateArray"
                  :key="indexF"
                  @click="checkTemplate(aa)"
                >
                  <div class="wordPic">
                    <img src="../../assets/icon/wordMub.png" alt />
                  </div>

                  <div
                    style="
                      margin-top: 10px;
                      line-height: 19px;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      padding: 0 20px;
                    "
                  >
                    {{ aa.title }}
                  </div>
                </div>
                <div class="wordTeacher" @click="checkTemplate2()">
                  <div class="wordPic">
                    <img src="../../assets/icon/wordMub.png" alt />
                  </div>

                  <div
                    style="
                      margin-top: 10px;
                      line-height: 19px;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      padding: 0 20px;
                    "
                  >
                    新建课程
                  </div>
                </div>
                <div class="wordTeacher" @click="checkTemplate1()">
                  <div class="wordPic">
                    <img src="../../assets/icon/wordMub.png" alt />
                  </div>

                  <div
                    style="
                      margin-top: 10px;
                      line-height: 19px;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      padding: 0 20px;
                    "
                  >
                    我的课程
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="rightBox" v-if="this.steps == 3">
            <div class="basic_box" style="margin: 0px 0 0 30px">
              <div
                style="display: flex; flex-direction: row; align-items: center"
              >
                <div class="cru_selectBox">
                  <div
                    v-for="(item, index) in unitJson"
                    :key="index"
                    class="cru_select"
                    :class="unitIndex == index ? 'cru_selected' : ''"
                    @click="unitSet(index)"
                  >
                    第{{ index + 1 }}阶段
                  </div>
                  <img
                    src="../../assets/line.png"
                    class="cru_line"
                    :style="{
                      left: offsetLetfPx + 'px',
                    }"
                  />
                </div>
                <div class="addStageImg" @click="addunit()">
                  <img src="../../assets/icon/add.png" alt />
                </div>
              </div>

              <div
                style="margin: 0 0 40px 0"
                v-for="(item, index) in unitJson[unitIndex].chapterInfo"
                :key="index"
              >
                <div>
                  <div class="chapter_contentbox">
                    <div>第{{ unitIndex + 1 }}阶段</div>
                    <div>
                      <input
                        type="text"
                        placeholder="阶段标题"
                        class="binfo_input"
                        v-model="unitJson[unitIndex].dyName"
                      />
                    </div>
                    <div
                      v-if="unitJson.length > 1"
                      @click="deleteUnit(unitIndex)"
                    ></div>
                  </div>
                </div>
                <div style="margin: 50px 0 10px 0; font-size: 24px">
                  添加任务
                </div>
                <div
                  class="taskBorder"
                  v-for="(itemTask, itemTaskIndex) in item.taskJson"
                  :key="itemTaskIndex"
                >
                  <div>
                    <div>
                      <div
                        class="chapter_contentbox"
                        style="
                          flex-direction: row;
                          justify-content: flex-start;
                          align-items: center;
                        "
                      >
                        <div
                          style="
                            font-weight: unset;
                            font-size: 1.5em;
                            font-weight: 700;
                            width: 110px;
                          "
                        >
                          任务名称
                        </div>
                        <div>
                          <input
                            type="text"
                            placeholder="输入任务名称"
                            class="binfo_input"
                            style="height: 50px; border-radius: 4px"
                            v-model="
                              unitJson[unitIndex].chapterInfo[0].taskJson[
                                itemTaskIndex
                              ].task
                            "
                          />
                        </div>
                        <div
                          class="remove"
                          v-if="item.taskJson.length > 1"
                          @click="deleteTask(itemTaskIndex)"
                          style="position: absolute; right: 55px"
                        ></div>
                      </div>
                      <div
                        style="
                          display: flex;
                          margin: 0 0 20px 0;
                          flex-direction: row;
                          justify-content: flex-start;
                          align-items: center;
                          width: 70.5% !important;
                          padding-top: 30px;
                        "
                      >
                        <div class="lineTitle">任务描述</div>
                        <div class="line"></div>
                      </div>
                      <div>
                        <editor-bar
                          style="width: 70.5% !important;margin: 0;"
                          placeholder="请输入任务描述"
                          v-model="
                            unitJson[unitIndex].chapterInfo[0].taskJson[
                              itemTaskIndex
                            ].taskDetail
                          "
                          @change="change"
                        ></editor-bar>
                        <!-- <textarea
                          rows="6"
                          class="binfo_input"
                          placeholder="请输入任务描述"
                          cols
                          style="width: 70.5% !important; height: 120px"
                          v-model="
                            unitJson[unitIndex].chapterInfo[0].taskJson[
                              itemTaskIndex
                            ].taskDetail
                          "
                        ></textarea> -->
                      </div>
                    </div>
                  </div>
                  <div
                    class="basic_box"
                    style="
                      margin: 0;
                      min-height: 0;
                      width: 66% !important;
                      paddint-top: 10px !important;
                    "
                  >
                    <div
                      style="
                        display: flex;
                        margin: 0 0 20px 0;
                        flex-direction: row;
                        justify-content: flex-start;
                        align-items: center;
                      "
                    >
                      <div class="lineTitle">学习内容</div>
                      <div class="line"></div>
                    </div>
                    <div>
                      <div
                        class="add_chapters_box"
                        v-if="
                          itemTask.chapterData &&
                          itemTask.chapterData.length == 0
                        "
                        style="height: 185px"
                      ></div>
                      <div
                        v-else
                        class="add_chapters_box"
                        style="display: flex; flex-direction: column"
                      >
                        <div
                          class="chapter_upload"
                          v-for="(item1, index1) in itemTask.chapterData"
                          :key="item1.id"
                          @click="
                            getChapterData(
                              $event,
                              unitIndex,
                              index,
                              index1,
                              item1.type
                            )
                          "
                        >
                          <div
                            class="chapter_upload_t"
                            style="width: 100%"
                          ></div>
                          <div
                            class="chapter_upload_o"
                            style="
                              position: relative;
                              display: flex;
                              align-items: center;
                            "
                          >
                            <div
                              class="chapter_upload_l"
                              style="padding: 1px 0 0 10px"
                            >
                              <div
                                v-if="item1.type == 2"
                                class="chapter_upload_l_i1"
                              ></div>
                              <div
                                v-if="
                                  item1.type == 3 ||
                                  item1.type == 6 ||
                                  item1.type == 7
                                "
                                class="chapter_upload_l_i5"
                                style="margin-left: 1px"
                              ></div>
                              <div
                                v-if="item1.type == 8"
                                class="chapter_upload_l_i8"
                                style="margin-left: 1px"
                              ></div>
                            </div>
                            <div
                              class="chapter_upload_ic"
                              style="
                                cursor: pointer;
                                position: absolute;
                                width: 45px;
                                right: 0;
                                top: 0;
                              "
                            >
                              <div class="chapter_upload_ic_l"></div>
                              <div
                                class="chapter_upload_ic_r"
                                style="position: absolute"
                                @click.stop="
                                  deleteChapterData(
                                    $event,
                                    unitIndex,
                                    index,
                                    index1,
                                    itemTaskIndex
                                  )
                                "
                              >
                                <div></div>
                              </div>
                            </div>
                            <div class="chapter_upload_n">
                              <input
                                v-if="
                                  item1.type == 2 ||
                                  item1.type == 3 ||
                                  item1.type == 7
                                "
                                :placeholder="item1.name"
                                @change="
                                  updataVideoT(
                                    $event,
                                    unitIndex,
                                    chapterIndex,
                                    index1
                                  )
                                "
                                style="
                                  border: none;
                                  outline: none;
                                  width: 55%;
                                  minwidth: 215px;
                                  z-index: 99;
                                  font-size: 14px;
                                "
                              />
                              <input
                                :placeholder="item1.name"
                                v-if="item1.type == 6"
                                style="
                                  border: none;
                                  outline: none;
                                  width: 55%;
                                  minwidth: 215px;
                                "
                                readonly="true"
                                @click="selectAttText(itemTaskIndex, index1)"
                              />
                              <input
                                :placeholder="item1.name"
                                v-if="item1.type == 8"
                                style="
                                  border: none;
                                  outline: none;
                                  width: 55%;
                                  minwidth: 215px;
                                "
                                readonly="true"
                                @click="selectLine(itemTaskIndex, index1)"
                              />
                              <div
                                class="chapter_upload_ud"
                                style="z-index: 99"
                              >
                                <div
                                  class="chapter_upload_up"
                                  @click="
                                    upCd($event, unitIndex, index, index1)
                                  "
                                ></div>
                                <div
                                  class="chapter_upload_down"
                                  @click="
                                    downCd($event, unitIndex, index, index1)
                                  "
                                ></div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="add_info_box">
                      <button class="info_btn" @click="addImg($event)">
                        添加教学视频
                        <input
                          type="file"
                          accept="video/mp4, video/quicktime, video/x-msvideo"
                          style="display: none"
                          v-if="inputShow"
                          @change="
                            beforeUpload2($event, unitIndex, 2, itemTaskIndex)
                          "
                        />
                      </button>
                      <button class="info_btn" @click="addImg($event)">
                        添加教学附件
                        <input
                          type="file"
                          accept="application/pdf, .ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                          style="display: none"
                          v-if="inputShow"
                          @change="
                            beforeUpload2($event, unitIndex, 3, itemTaskIndex)
                          "
                        />
                      </button>
                      <button
                        class="info_btn"
                        @click="addAttText(itemTaskIndex)"
                      >
                        添加图文
                      </button>
                      <button class="info_btn" @click="openLine(itemTaskIndex)">
                        添加链接
                      </button>
                    </div>
                  </div>
                  <div
                    style="
                      flex-direction: row;
                      justify-content: flex-start;
                      align-items: center;
                      padding: 0 0 0 30px;
                      paddint-top: 10px !important;
                    "
                  >
                    <div
                      style="
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        margin-bottom: 20px;
                      "
                    >
                      <div class="lineTitle">练习内容</div>
                      <div class="line" style="width: 90%"></div>
                    </div>
                  </div>
                  <div class="toolChoose" style="padding: 0 0 0 30px">
                    <div class="tools">
                      <div
                        class="leftTools"
                        style="
                          width: 95%;
                          padding: 0 0 15px 0;
                          border-bottom: 1px solid #efefef;
                          margin-bottom: 15px;
                        "
                        v-for="(itemTool, toolIndex) in itemTask.toolChoose"
                        :key="toolIndex"
                      >
                        <div>
                          <textarea
                            rows="3"
                            type="text"
                            placeholder="添加工具描述"
                            class="binfo_input"
                            style="margin: 20px 0; width: 71.5% !important"
                            v-model="itemTool.toolDetail"
                          ></textarea>
                        </div>
                        <div
                          style="
                            display: flex;
                            flex-direction: row;
                            align-items: baseline;
                            flex-wrap: nowrap;
                            justify-content: flex-start;
                            position: relative;
                          "
                        >
                          <div style="margin-right: 20px; font-weight: bold">
                            工具 {{ toolIndex + 1 }} ：
                          </div>
                          <div class="chooseWho">
                            <div
                              :class="
                                itemTool.toolType == 0 ? 'isChooseActive' : ''
                              "
                              @click="itemTool.toolType = 0"
                            >
                              展示类
                            </div>
                            <div
                              :class="
                                itemTool.toolType == 1 ? 'isChooseActive' : ''
                              "
                              @click="itemTool.toolType = 1"
                            >
                              思维类
                            </div>
                            <div
                              :class="
                                itemTool.toolType == 2 ? 'isChooseActive' : ''
                              "
                              @click="itemTool.toolType = 2"
                            >
                              评价类
                            </div>
                            <div
                              :class="
                                itemTool.toolType == 3 ? 'isChooseActive' : ''
                              "
                              @click="itemTool.toolType = 3"
                            >
                              创作类
                            </div>
                          </div>
                          <div
                            class="remove"
                            @click="deleteTool(itemTaskIndex, toolIndex)"
                            v-if="itemTask.toolChoose.length > 1"
                            style="position: absolute; right: 55px"
                          ></div>
                        </div>

                        <div style="min-height: 163px">
                          <div class="toolSort" v-if="itemTool.toolType == 0">
                            <!-- <div class="tool">
                              <div
                                class="whiteBIcon"
                                @click="addTools(8, itemTaskIndex, toolIndex)"
                              >
                                <img src="../../assets/icon/secondToolList/library.png" alt />
                                <div style="margin: 5px 0">素材库</div>
                              </div>
                              <div class="check" @click="addTools(8, itemTaskIndex, toolIndex)">
                                <img
                                  src="../../assets/icon/checkNo.png"
                                  alt
                                  v-if="itemTool.tool.indexOf(8) == -1"
                                />
                                <img src="../../assets/icon/checkedIs.png" alt v-else />
                              </div>
                            </div>-->
                            <div class="tool">
                              <div
                                class="whiteBIcon"
                                @click="addTools(17, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/secondToolList/library.png"
                                  alt
                                />
                                <div style="margin: 5px 0">学习资料</div>
                              </div>
                              <div
                                class="check"
                                @click="addTools(17, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/checkNo.png"
                                  alt
                                  v-if="itemTool.tool.indexOf(17) == -1"
                                />
                                <img
                                  src="../../assets/icon/checkedIs.png"
                                  alt
                                  v-else
                                />
                              </div>
                            </div>
                            <div class="tool">
                              <div
                                class="whiteBIcon"
                                @click="addTools(10, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/thirdToolList/time.png"
                                  alt
                                />
                                <div style="margin: 5px 0">倒计时</div>
                              </div>
                              <div
                                class="check"
                                @click="addTools(10, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/checkNo.png"
                                  alt
                                  v-if="itemTool.tool.indexOf(10) == -1"
                                />
                                <img
                                  src="../../assets/icon/checkedIs.png"
                                  alt
                                  v-else
                                />
                              </div>
                            </div>
                          </div>
                          <div class="toolSort" v-if="itemTool.toolType == 1">
                            <div class="tool">
                              <div
                                class="whiteBIcon"
                                @click="addTools(7, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/secondToolList/mindNetwork.png"
                                  alt
                                />
                                <div style="margin: 5px 0">思维网格</div>
                              </div>
                              <div
                                class="check"
                                @click="addTools(7, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/checkNo.png"
                                  alt
                                  v-if="itemTool.tool.indexOf(7) == -1"
                                />
                                <img
                                  src="../../assets/icon/checkedIs.png"
                                  alt
                                  v-else
                                />
                              </div>
                            </div>
                            <div class="tool">
                              <div
                                class="whiteBIcon"
                                @click="addTools(1, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/secondToolList/whiteBoard.png"
                                  alt
                                />
                                <div style="margin: 5px 0">电子白板</div>
                              </div>
                              <div
                                class="check"
                                @click="addTools(1, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/checkNo.png"
                                  alt
                                  v-if="itemTool.tool.indexOf(1) == -1"
                                />
                                <img
                                  src="../../assets/icon/checkedIs.png"
                                  alt
                                  v-else
                                />
                              </div>
                            </div>
                            <div class="tool">
                              <div
                                class="whiteBIcon"
                                @click="addTools(2, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/secondToolList/note.png"
                                  alt
                                />
                                <div style="margin: 5px 0">便签</div>
                              </div>
                              <div
                                class="check"
                                @click="addTools(2, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/checkNo.png"
                                  alt
                                  v-if="itemTool.tool.indexOf(2) == -1"
                                />
                                <img
                                  src="../../assets/icon/checkedIs.png"
                                  alt
                                  v-else
                                />
                              </div>
                            </div>
                            <div class="tool">
                              <div
                                class="whiteBIcon"
                                @click="addTools(6, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/secondToolList/doc.png"
                                  alt
                                />
                                <div style="margin: 5px 0">协同文档</div>
                              </div>
                              <div
                                class="check"
                                @click="addTools(6, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/checkNo.png"
                                  alt
                                  v-if="itemTool.tool.indexOf(6) == -1"
                                />
                                <img
                                  src="../../assets/icon/checkedIs.png"
                                  alt
                                  v-else
                                />
                              </div>
                            </div>
                            <div class="tool">
                              <div
                                class="whiteBIcon"
                                @click="addTools(3, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/secondToolList/mindMapping.png"
                                  alt
                                />
                                <div style="margin: 5px 0">思维导图</div>
                              </div>
                              <div
                                class="check"
                                @click="addTools(3, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/checkNo.png"
                                  alt
                                  v-if="itemTool.tool.indexOf(3) == -1"
                                />
                                <img
                                  src="../../assets/icon/checkedIs.png"
                                  alt
                                  v-else
                                />
                              </div>
                            </div>
                          </div>
                          <div class="toolSort" v-if="itemTool.toolType == 2">
                            <!-- <div class="tool">
                              <div
                                class="whiteBIcon"
                                @click="addTools(5, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/thirdToolList/score.png"
                                  alt
                                />
                                <div style="margin: 5px 0">量规评分</div>
                              </div>
                              <div
                                class="check"
                                @click="addTools(5, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/checkNo.png"
                                  alt
                                  v-if="itemTool.tool.indexOf(5) == -1"
                                />
                                <img
                                  src="../../assets/icon/checkedIs.png"
                                  alt
                                  v-else
                                />
                              </div>
                            </div>-->
                            <div class="tool">
                              <div
                                class="whiteBIcon"
                                @click="openTools(itemTaskIndex, 4, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/thirdToolList/ask.png"
                                  alt
                                />
                                <div style="margin: 5px 0">问卷调查</div>
                              </div>
                              <div
                                class="check"
                                @click="addTools(4, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/checkNo.png"
                                  alt
                                  v-if="itemTool.tool.indexOf(4) == -1"
                                />
                                <img
                                  src="../../assets/icon/checkedIs.png"
                                  alt
                                  v-else
                                />
                              </div>
                            </div>
                            <div class="tool">
                              <div
                                class="whiteBIcon"
                                @click="openTools(itemTaskIndex, 15, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/thirdToolList/answer.png"
                                  alt
                                />
                                <div style="margin: 5px 0">问答工具</div>
                              </div>
                              <div
                                class="check"
                                @click="addTools(15, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/checkNo.png"
                                  alt
                                  v-if="itemTool.tool.indexOf(15) == -1"
                                />
                                <img
                                  src="../../assets/icon/checkedIs.png"
                                  alt
                                  v-else
                                />
                              </div>
                            </div>
                            <div class="tool">
                              <div
                                class="whiteBIcon"
                                @click="addTools(16, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/thirdToolList/work.png"
                                  alt
                                />
                                <div style="margin: 5px 0">作业提交</div>
                              </div>
                              <div
                                class="check"
                                @click="addTools(16, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/checkNo.png"
                                  alt
                                  v-if="itemTool.tool.indexOf(16) == -1"
                                />
                                <img
                                  src="../../assets/icon/checkedIs.png"
                                  alt
                                  v-else
                                />
                              </div>
                            </div>
                          </div>
                          <div class="toolSort" v-if="itemTool.toolType == 3">
                            <div class="tool">
                              <div
                                class="whiteBIcon"
                                @click="addTools(18, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/thirdToolList/trainPlatform.png"
                                  alt
                                />
                                <div style="margin: 5px 0">训练平台</div>
                              </div>
                              <div
                                class="check"
                                @click="addTools(18, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/checkNo.png"
                                  alt
                                  v-if="itemTool.tool.indexOf(18) == -1"
                                />
                                <img
                                  src="../../assets/icon/checkedIs.png"
                                  alt
                                  v-else
                                />
                              </div>
                            </div>
                            <div class="tool">
                              <div
                                class="whiteBIcon"
                                @click="addTools(21, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/fourthToolList/program.png"
                                  alt
                                />
                                <div style="margin: 5px 0">编程平台</div>
                              </div>
                              <div
                                class="check"
                                @click="addTools(21, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/checkNo.png"
                                  alt
                                  v-if="itemTool.tool.indexOf(21) == -1"
                                />
                                <img
                                  src="../../assets/icon/checkedIs.png"
                                  alt
                                  v-else
                                />
                              </div>
                            </div>
                            <div class="tool">
                              <div
                                class="whiteBIcon"
                                @click="addTools(22, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/fourthToolList/AIprogram2.png"
                                  alt
                                />
                                <div style="margin: 5px 0">AI体验</div>
                              </div>
                              <div
                                class="check"
                                @click="addTools(22, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/checkNo.png"
                                  alt
                                  v-if="itemTool.tool.indexOf(22) == -1"
                                />
                                <img
                                  src="../../assets/icon/checkedIs.png"
                                  alt
                                  v-else
                                />
                              </div>
                            </div>
                            <div class="tool">
                              <div
                                class="whiteBIcon"
                                @click="addTools(23, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/fourthToolList/Pythonprogram.png"
                                  alt
                                />
                                <div style="margin: 5px 0">Python</div>
                              </div>
                              <div
                                class="check"
                                @click="addTools(23, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/checkNo.png"
                                  alt
                                  v-if="itemTool.tool.indexOf(23) == -1"
                                />
                                <img
                                  src="../../assets/icon/checkedIs.png"
                                  alt
                                  v-else
                                />
                              </div>
                            </div>
                            <div class="tool">
                              <div
                                class="whiteBIcon"
                                @click="addTools(24, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/fourthToolList/program.png"
                                  alt
                                />
                                <div style="margin: 5px 0">AI平台</div>
                              </div>
                              <div
                                class="check"
                                @click="addTools(24, itemTaskIndex, toolIndex)"
                              >
                                <img
                                  src="../../assets/icon/checkNo.png"
                                  alt
                                  v-if="itemTool.tool.indexOf(24) == -1"
                                />
                                <img
                                  src="../../assets/icon/checkedIs.png"
                                  alt
                                  v-else
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div
                        class="addToolFun"
                        @click="addToolFun(itemTaskIndex)"
                      >
                        <div class="addToolImg">
                          <img src="../../assets/icon/add.png" alt />
                        </div>
                        <div>添加工具</div>
                      </div>
                    </div>
                  </div>
                  <div class="elist_css">
                    <div class="elist_title">
                      <div
                        style="
                          display: flex;
                          flex-direction: row;
                          align-items: center;
                          margin-bottom: 20px;
                        "
                      >
                        <div class="lineTitle">评价设置</div>
                        <div class="line" style="width: 90%"></div>
                      </div>
                    </div>
                    <div
                      v-if="itemTask.eList && itemTask.eList.length"
                      class="elist_input"
                    >
                      <div
                        v-for="(eItem, eIndex) in itemTask.eList"
                        :key="eIndex"
                        class="elist_input_box"
                      >
                        <span>评价名称：</span>
                        <input
                          type="input"
                          v-model="itemTask.eList[eIndex].value"
                          placeholder="填写评价名称"
                        />
                        <span>评星等级：</span>
                        <el-rate
                          v-model="itemTask.eList[eIndex].score"
                          @change="setEListStar()"
                          disabled
                        ></el-rate>
                        <div
                          class="remove"
                          @click="deletEList(unitIndex, itemTaskIndex, eIndex)"
                        ></div>
                        <div class="elist_inptu_text">
                          <span>评价描述：</span>
                          <input
                            type="input"
                            v-model="itemTask.eList[eIndex].detail"
                            placeholder="填写评价描述"
                          />
                        </div>
                      </div>
                    </div>
                    <div
                      class="addToolFun"
                      @click="addEList(unitIndex, itemTaskIndex)"
                    >
                      <div class="addToolImg">
                        <img src="../../assets/icon/add.png" alt />
                      </div>
                      <div>添加</div>
                    </div>
                  </div>
                  <div class="funBlock" style="padding: 0">
                    <div class="fold">
                      <div @click="fold(itemTaskIndex, $event, 1)">折叠</div>
                      <div class="arrow">
                        <img src="../../assets/icon/fold.png" alt />
                      </div>
                    </div>
                    <div class="fold">
                      <div @click="fold(itemTaskIndex, $event, 0)">展开</div>
                      <div class="arrow">
                        <img src="../../assets/icon/expand.png" alt />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="addTaskBorder" @click="addTaskBorder">
                  <div>
                    <img src="../../assets/icon/addHw.png" alt />
                    <span>添加任务</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            style="
              width: calc(100% - 17% - 25px);
              background: #fff;
              border-radius: 10px;
              min-height: 550px;
              min-width: 800px;
            "
            v-if="this.steps == 4"
          >
            <div class="basic_box_success">
              <div class="right_img">
                <img src="../../assets/icon/right.png" alt />
              </div>
              <div style="font-weight: bold">成功</div>
              <div>您的课程编号</div>
              <div class="number">{{ number }}</div>
              <div class="success_button">
                <div class="look_course" @click="isNoFinsh">
                  邀请老师协同编辑
                </div>
                <div class="attend_others" @click="goCourse">预览课程</div>
              </div>
            </div>
          </div>
        </div>
        <div class="info_btnBox">
          <button
            class="info_btn"
            v-if="steps == 1"
            @click="goTo('/course?userid=' + userid + '&oid=' + oid)"
          >
            返回课程
          </button>
          <button
            class="info_btn"
            v-if="steps > 1 && steps != 5"
            @click="lastSteps"
          >
            {{ steps == 4 ? "返回首页" : "上一步" }}
          </button>
          <button class="info_btn" v-if="steps < 5" @click="nextSteps">
            {{ steps == 3 ? "确认上传" : "下一步" }}
          </button>
        </div>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="25%"
      :before-close="handleClose"
      class="dialog_diy2 customWidth"
    >
      <div>请复制该链接邀请协同编辑</div>
      <div>http://www.boomyon.com/index-zhang.com</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary">复制链接分享</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="updateBoolean2 ? '查看文档' : '添加文档'"
      :visible.sync="dialogVisible1"
      :append-to-body="true"
      width="25%"
      :before-close="handleClose"
      class="dialog_diy2 customWidth"
    >
      <el-form>
        <el-form-item label="文档标题">
          <el-input
            v-model="tTitle"
            auto-complete="off"
            placeholder="请输入文档标题名..."
          ></el-input>
        </el-form-item>
        <div>文档简介</div>
        <editor-bar v-model="tdetail" @change="change"></editor-bar>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="addWord" v-if="!updateBoolean2"
          >添加</el-button
        >
        <el-button type="primary" @click="upWord" v-else>修 改</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="添加文档"
      :visible.sync="dialogVisible2"
      :append-to-body="true"
      width="500px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <el-form>
        <el-form-item label="文档标题">
          <el-input
            v-model="templateC.title"
            auto-complete="off"
            placeholder="请输入文档标题名..."
          ></el-input>
        </el-form-item>
        <div>文档内容</div>
        <editor-bar v-model="cTemplate" @change="change"></editor-bar>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="clearChoose">取 消</el-button>
        <el-button type="primary" @click="wordNext()">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="添加富文本"
      :visible.sync="dialogVisible6"
      :append-to-body="true"
      width="500px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <el-form>
        <el-form-item label="文本标题">
          <el-input
            v-model="AttText.title"
            auto-complete="off"
            placeholder="请输入文本标题..."
          ></el-input>
        </el-form-item>
        <div>富文本内容</div>
        <editor-bar v-model="AttText.text" @change="change"></editor-bar>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="clearAttText">取 消</el-button>
        <el-button type="primary" @click="isAddOrUpdateAttText">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="添加链接"
      :visible.sync="dialogVisible7"
      :append-to-body="true"
      width="500px"
      :before-close="handleClose"
      class="dialog_diy lineCss"
    >
      <el-form>
        <el-form-item label="链接" :label-width="formLabelWidth">
          <span>
            <el-input
              placeholder="请输入链接"
              clearable
              v-model="line"
              class="add_input"
            ></el-input>
          </span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="clearLine">取 消</el-button>
        <el-button type="primary" @click="isAddOrUpdateLine">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="添加课程成员"
      :visible.sync="dialogVisible3"
      :append-to-body="true"
      width="25%"
      height="80%"
      :before-close="handleClose"
      class="addNewPP customWidth"
    >
      <div class="people">
        <div class="people_top">
          <div class="people_nav">选择成员</div>
          <div class="people_top_right">
            <div class="people_search">
              <el-input
                placeholder="搜索成员"
                v-model="searchPeople"
              ></el-input>
              <div class="search_img" @click="searchStudent">
                <img src="../../assets/icon/search.png" alt />
              </div>
            </div>
          </div>
        </div>
        <el-checkbox-group v-model="checkboxList" class="people_name">
          <el-checkbox
            v-for="item in studentJuri"
            :key="item.userid"
            :label="item.userid"
            >{{ item.name ? item.name : "暂无学生可选" }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="isAddPP">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="创建问卷调查"
      :visible.sync="dialogVisible5"
      :append-to-body="true"
      width="800px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div>
        <div
          class="a_add_title"
          style="
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
          "
        >
          <div style="margin-right: 20px; font-size: 20px">问卷标题:</div>
          <el-input
            v-model="askJson.askTitle"
            placeholder="请输入问卷标题"
            style="width: 400px"
          ></el-input>
        </div>
        <div class="a_addBox">
          <div style="font-size: 16px; color: #c7c7c7">请输入问卷内容</div>
          <div
            class="a_add_box"
            v-for="(item1, index1) in askJson.askCount"
            :key="index1"
          >
            <div class="a_add_head">
              <div>
                {{ index1 + 1 + "、" }}
                <el-input
                  class="a_add_head_input"
                  v-model="askJson.askJson[index1].askstitle"
                  placeholder="请输入问卷题目..."
                ></el-input>
              </div>
              <div class="a_add_head_div">
                <el-button type="primary" size="small" @click="addAskList()"
                  >添加</el-button
                >
                <el-button
                  type="primary"
                  size="small"
                  @click="deleteAskList()"
                  v-if="index1 != 0"
                  >删除</el-button
                >
              </div>
            </div>
            <div class="a_add_body">
              <div class="a_add_input">
                <el-input
                  v-for="(item2, checkIndex) in askJson.askJson[index1].askItem"
                  :key="checkIndex"
                  v-model="askJson.askJson[index1].checkList[checkIndex]"
                  placeholder="请输入选项..."
                  style="width: 150px; margin: 10px 10px 0 0"
                ></el-input>
              </div>
              <div class="a_add_body_div">
                <el-button
                  style="margin: 10px 0px 0 0"
                  type="primary"
                  size="small"
                  @click="addcheckList(askJson.askJson[index1])"
                  v-if="askJson.askJson[index1].askItem < 4"
                  >添加</el-button
                >
                <el-button
                  type="primary"
                  size="small"
                  style="margin: 10px 0 0 0"
                  @click="deletecheckList(askJson.askJson[index1])"
                  v-if="askJson.askJson[index1].askItem != 1"
                  >删除</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible5 = false">取 消</el-button>
        <el-button type="primary" @click="addAsk">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="添加工具"
      :visible.sync="dialogVisible4"
      :append-to-body="true"
      width="600px"
      :before-close="handleClose"
      class="dialog_diy addToolsDia"
    >
      <div class="toolChoose" style="padding: 0 0 0 30px">
        <div class="tools">
          <div
            class="leftTools"
            style="
              width: 95%;
              padding: 0 0 15px 0;
              border-bottom: 1px solid #efefef;
              margin-bottom: 15px;
            "
            v-for="(itemTools, itemToolsIndex) in chapTools"
            :key="itemToolsIndex"
          >
            <div
              style="
                display: flex;
                flex-direction: row;
                align-items: baseline;
                flex-wrap: nowrap;
                justify-content: flex-start;
                position: relative;
              "
            >
              <div class="chooseWho">
                <div
                  :class="chapToolsType == 0 ? 'isChooseActive' : ''"
                  @click="chapToolsType = 0"
                >
                  展示类
                </div>
                <div
                  :class="chapToolsType == 1 ? 'isChooseActive' : ''"
                  @click="chapToolsType = 1"
                >
                  思维类
                </div>
                <div
                  :class="chapToolsType == 2 ? 'isChooseActive' : ''"
                  @click="chapToolsType = 2"
                >
                  评价类
                </div>
              </div>
            </div>

            <div style="min-height: 163px">
              <div class="toolSort" v-if="chapToolsType == 0">
                <div class="tool">
                  <div class="whiteBIcon" @click="chapAddTools(8)">
                    <img
                      src="../../assets/icon/secondToolList/library.png"
                      alt
                    />
                    <div style="margin: 5px 0">素材库</div>
                  </div>
                  <div class="check" @click="chapAddTools(8)">
                    <img
                      src="../../assets/icon/checkNo.png"
                      alt
                      v-if="itemTools.tools.indexOf(8) == -1"
                    />
                    <img src="../../assets/icon/checkedIs.png" alt v-else />
                  </div>
                </div>
              </div>
              <div class="toolSort" v-if="chapToolsType == 1">
                <div class="tool">
                  <div class="whiteBIcon" @click="chapAddTools(7)">
                    <img
                      src="../../assets/icon/secondToolList/mindNetwork.png"
                      alt
                    />
                    <div style="margin: 5px 0">思维网格</div>
                  </div>
                  <div class="check" @click="chapAddTools(7)">
                    <img
                      src="../../assets/icon/checkNo.png"
                      alt
                      v-if="itemTools.tools.indexOf(7) == -1"
                    />
                    <img src="../../assets/icon/checkedIs.png" alt v-else />
                  </div>
                </div>
                <div class="tool">
                  <div class="whiteBIcon" @click="chapAddTools(1)">
                    <img
                      src="../../assets/icon/secondToolList/whiteBoard.png"
                      alt
                    />
                    <div style="margin: 5px 0">电子白板</div>
                  </div>
                  <div class="check" @click="chapAddTools(1)">
                    <img
                      src="../../assets/icon/checkNo.png"
                      alt
                      v-if="itemTools.tools.indexOf(1) == -1"
                    />
                    <img src="../../assets/icon/checkedIs.png" alt v-else />
                  </div>
                </div>
                <div class="tool">
                  <div class="whiteBIcon" @click="chapAddTools(2)">
                    <img src="../../assets/icon/secondToolList/note.png" alt />
                    <div style="margin: 5px 0">便签</div>
                  </div>
                  <div class="check" @click="chapAddTools(2)">
                    <img
                      src="../../assets/icon/checkNo.png"
                      alt
                      v-if="itemTools.tools.indexOf(2) == -1"
                    />
                    <img src="../../assets/icon/checkedIs.png" alt v-else />
                  </div>
                </div>
                <div class="tool">
                  <div class="whiteBIcon" @click="chapAddTools(6)">
                    <img src="../../assets/icon/secondToolList/doc.png" alt />
                    <div style="margin: 5px 0">协同文档</div>
                  </div>
                  <div class="check" @click="chapAddTools(6)">
                    <img
                      src="../../assets/icon/checkNo.png"
                      alt
                      v-if="itemTools.tools.indexOf(6) == -1"
                    />
                    <img src="../../assets/icon/checkedIs.png" alt v-else />
                  </div>
                </div>
                <div class="tool">
                  <div class="whiteBIcon" @click="chapAddTools(3)">
                    <img
                      src="../../assets/icon/secondToolList/mindMapping.png"
                      alt
                    />
                    <div style="margin: 5px 0">思维导图</div>
                  </div>
                  <div class="check" @click="chapAddTools(3)">
                    <img
                      src="../../assets/icon/checkNo.png"
                      alt
                      v-if="itemTools.tools.indexOf(3) == -1"
                    />
                    <img src="../../assets/icon/checkedIs.png" alt v-else />
                  </div>
                </div>
              </div>
              <div class="toolSort" v-if="chapToolsType == 2">
                <div class="tool">
                  <div class="whiteBIcon" @click="chapAddTools(5)">
                    <img src="../../assets/icon/thirdToolList/score.png" alt />
                    <div style="margin: 5px 0">量规评分</div>
                  </div>
                  <div class="check" @click="chapAddTools(5)">
                    <img
                      src="../../assets/icon/checkNo.png"
                      alt
                      v-if="itemTools.tools.indexOf(5) == -1"
                    />
                    <img src="../../assets/icon/checkedIs.png" alt v-else />
                  </div>
                </div>
                <div class="tool">
                  <div
                    class="whiteBIcon"
                    @click="openTools(chapCount, 4, null)"
                  >
                    <img src="../../assets/icon/thirdToolList/ask.png" alt />
                    <div style="margin: 5px 0">问卷调查</div>
                  </div>
                  <div class="check" @click="chapAddTools(4)">
                    <img
                      src="../../assets/icon/checkNo.png"
                      alt
                      v-if="itemTools.tools.indexOf(4) == -1"
                    />
                    <img src="../../assets/icon/checkedIs.png" alt v-else />
                  </div>
                </div>
              </div>
            </div>
            <div>
              <input
                type="text"
                placeholder="添加工具描述"
                class="binfo_input"
                style="margin: 20px 0; width: 71.5% !important"
                v-model="itemTools.toolDetail"
              />
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible4 = false">取 消</el-button>
        <el-button type="primary" @click="addChaptersDataTools">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="添加问答"
      :visible.sync="dialogVisible8"
      :append-to-body="true"
      width="500px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div>
        <div
          class="a_add_title"
          style="
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
          "
        >
          <div style="margin-bottom: 20px; font-size: 20px">问题:</div>
          <el-input
            v-model="answerQ"
            placeholder="请输入您要问的问题"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible8 = false">取 消</el-button>
        <el-button type="primary" @click="addAnswer">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import "../../common/aws-sdk-2.235.1.min.js";
import $ from "jquery";
import EditorBar from "../../components/tools/wangEnduit";
export default {
  components: { EditorBar },
  data() {
    return {
      checkAll: false,
      checkedCities: [],
      isIndeterminate: true,
      steps: 1,
      nbOrder: 0,
      courseId: "",
      chapToolsType: 0,
      chapTools: [
        {
          tools: [],
          toolDetail: "",
        },
      ],
      line: "",
      lineCount: 0,
      lineType: 0,
      chapCount: 0,
      courseName: "",
      isTeacherSee: false,
      courseText: "",
      formLabelWidth: "100px",
      uploadLoading1: false,
      noneBtnImg: false,
      updateBoolean2: false,
      unitIndex: 0,
      taskCount: 0,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      dialogVisible5: false,
      dialogVisible6: false,
      dialogVisible7: false,
      dialogVisible8: false,
      publicTool: 0,
      searchPeople: "",
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      cid: this.$route.query.cid != undefined ? this.$route.query.cid : "",
      cover: [], //课程封面
      myWord: [],
      askJson: {
        askCount: 1,
        askTitle: "",
        askJson: [{ askstitle: "", askItem: 1, checkList: [] }],
      },
      unitJson: [
        {
          dyName: "", //单元标题
          chapterInfo: [
            {
              isread: false,
              chapterid: this.guid(),
              title: "",
              courseName: "",
              taskJson: [
                {
                  task: "",
                  taskDetail: "",
                  chapterData: [],
                  toolText: "",
                  toolChoose: [
                    {
                      tool: [],
                      toolDetail: "",
                      toolType: 0,
                      askCount: 1,
                      askTitle: "",
                      askJson: [{ askstitle: "", askItem: 1, checkList: [] }],
                    },
                  ],
                  isShowTools: false,
                  askCount: 1,
                  isFold: 0,
                  askTitle: "",
                  askJson: [{ askstitle: "", askItem: 1, checkList: [] }],
                  checkJson: [{ checkCount: [], checkPerent: [] }],
                  homeworkList: [],
                },
              ],
              itemCount: 1,
              fileList1: [],
              video: [],
              testData: [],
              pData: [],
              templateArray: [],
            },
          ],
        },
      ],
      studentJuri: [],
      checkboxList: [],
      number: "",
      tTitle: "",
      tdetail: "",
      templateC: {},
      AttText: {},
      AttTextType: 0,
      AttTextIndex: 0,
      cTemplate: "",
      CourseType: [],
      CourseTypeJson: {},
      courseTypeId: [],
      courseTypeSon: [],
      clearArray: [],
      loading: false,
      toolType: 0,
      inputShow: true,
      toolIndex: 0,
      cidType: 0,
      answerQ: "",
    };
  },
  computed: {
    offsetLetfPx: function () {
      //addnum可以直接在模板语法里面用，相当于data内的值
      return (
        $(".cru_select")[this.unitIndex] &&
        $(".cru_select")[this.unitIndex].offsetLeft
      );
    },
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    addHw(e) {
      var el = e.currentTarget;
      el.getElementsByTagName("input")[0].click();
    },
    change(val) {
      console.log(val);
    },
    handleClose(done) {
      done();
    },

    imgChange1(file, fileList, type, itemTaskIndex) {
      if (type == 1) {
        var _tmp = this.cover;
      } else if (
        type == 2 ||
        type == 3 ||
        type == 6 ||
        type == 7 ||
        type == 8
      ) {
        var _tmp =
          this.unitJson[this.unitIndex].chapterInfo[0].taskJson[itemTaskIndex]
            .chapterData;
      } else if (type == 4) {
        var _tmp = this.unitJson[this.unitIndex].chapterInfo[0].fileList1;
      } else {
        var _tmp =
          this.unitJson[this.unitIndex].chapterInfo[0].taskJson[itemTaskIndex]
            .homeworkList;
      }
      this.noneBtnImg = _tmp.length >= 1;
    },
    goTo(path) {
      this.$router.push(path);
    },
    guid() {
      var _num,
        i,
        _guid = "";
      for (i = 0; i < 32; i++) {
        _guid += Math.floor(Math.random() * 16).toString(16); //随机0  - 16 的数字 转变为16进制的字符串
        _num = Math.floor((i - 7) / 4); //计算 (i-7)除4
        if (_num > -1 && _num < 4 && i == 7 + 4 * _num) {
          //会使guid中间加 "-"   形式为xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
          _guid += "-";
        }
      }
      return _guid;
    },
    lastSteps() {
      if (this.steps == 4) {
        this.goTo("/course?userid=" + this.userid + "&oid=" + this.oid);
      } else {
        if (this.cidType == 0) {
          this.steps--;
        } else {
          if (this.steps == 3) {
            this.steps = 1;
          }
        }
      }
    },
    navSteps(s) {
      if (this.cidType == 0) {
        if (s == 1) {
          this.steps = 1;
        }
        if (s == 2) {
          this.steps = 2;
        }
        if (s == 3) {
          this.cTemplate = this.templateC.content;
          this.dialogVisible2 = false;
          this.steps = 3;
        }
      } else {
        if (s == 1) {
          this.steps = 1;
        }
        if (s == 3) {
          this.cTemplate = this.templateC.content;
          this.dialogVisible2 = false;
          this.steps = 3;
        }
      }
    },
    nextSteps() {
      if (this.cidType == 1) {
        if (this.steps == 1) {
          if (this.courseName != "") {
            this.steps = 3;
          } else {
            this.$message.error("请将信息填写完整");
            return;
          }
        } else if (this.steps == 3) {
          if (this.cid == "" || this.cid == undefined) {
            if (this.courseName == "") {
              this.$message.error("请将信息填写完整");
              return;
            } else {
              this.addWork();
              this.steps++;
            }
          } else {
            if (this.courseName == "") {
              this.$message.error("请将信息填写完整");
              return;
            } else {
              this.updateWork();
              this.steps++;
            }
          }
        }
      } else {
        if (this.steps == 1) {
          if (this.courseName != "") {
            this.steps++;
          } else {
            this.$message.error("请将信息填写完整");
            return;
          }
        } else if (this.steps == 2) {
          if (this.templateC.id != "" || this.templateC.id != undefined) {
            this.cTemplate = this.templateC.content;
          }
          this.dialogVisible2 = false;
          this.steps++;
        } else if (this.steps == 3) {
          if (this.cid == "" || this.cid == undefined) {
            if (this.courseName == "") {
              this.$message.error("请将信息填写完整");
              return;
            } else {
              this.addWork();
              this.steps++;
            }
          } else {
            if (this.courseName == "") {
              this.$message.error("请将信息填写完整");
              return;
            } else {
              this.updateWork();
              this.steps++;
            }
          }
        }
      }
    },
    unitSet(i) {
      this.unitIndex = i;
    },
    time() {
      if (!this.now) {
        this.now = new Date().getTime();
        return true;
      } else {
        let time = new Date().getTime();
        if (time - this.now > 3000) {
          this.now = time;
          return true;
        } else {
          return false;
        }
      }
    },
    deleteUnit(i) {
      var _this = this;
      if (_this.time()) {
        _this
          .$confirm("确定删除此单元吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            _this.unitJson.splice(i, 1);
            this.unitIndex = this.unitIndex - 1;
            _this.$message.success("删除成功");
          })
          .catch(() => {
            return;
          });
      }
    },
    deleteTool(itemTaskIndex, i) {
      var _this = this;
      if (_this.time()) {
        _this
          .$confirm("确定删除此工具吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            _this.unitJson[_this.unitIndex].chapterInfo[0].taskJson[
              itemTaskIndex
            ].toolChoose.splice(i, 1);
            _this.$message.success("删除成功");
          })
          .catch(() => {
            return;
          });
      }
    },
    deleteTask(i) {
      var _this = this;
      if (_this.time()) {
        _this
          .$confirm("确定删除此任务吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            _this.unitJson[_this.unitIndex].chapterInfo[0].taskJson.splice(
              i,
              1
            );
            _this.$message.success("删除成功");
          })
          .catch(() => {
            return;
          });
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
    },
    clean(i, c) {
      this.unitJson[this.unitIndex].chapterInfo[i].fileList1.splice(c, 1);
    },
    handle_remove1(file, fileList, type) {
      var _tmp = this.cover;
      for (var i = 0, len = _tmp.length; i < len; i++) {
        if (_tmp[i].uid == file.uid) {
          _tmp.splice(i, 1);
          break;
        }
        this.cover = _tmp;
      }
      this.noneBtnImg = _tmp.length >= 1;
    },
    addImg(e) {
      var el = e.currentTarget;
      el.getElementsByTagName("input")[0].click();
    },
    addChaptersTools(i) {
      this.chapTools = [
        {
          tools: [],
          toolDetail: "",
        },
      ];
      this.chapCount = i;
      this.dialogVisible4 = true;
    },
    isNoFinsh() {
      this.$message.warning("功能正在开发中");
    },
    addAttText(i) {
      this.AttText = {
        title: "",
        text: "",
      };
      this.taskCount = i;
      this.AttTextType = 0;
      this.$forceUpdate();
      this.dialogVisible6 = true;
    },
    openLine(i) {
      this.line = "";
      this.lineCount = i;
      this.lineType = 0;
      this.$forceUpdate();
      this.dialogVisible7 = true;
    },
    beforeUpload1(event, type) {
      const loading = this.openLoading();
      var file = event.file;
      var credentials = {
        accessKeyId: "AKIATLPEDU37QV5CHLMH",
        secretAccessKey: "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",
      }; //秘钥形式的登录上传
      window.AWS.config.update(credentials);
      window.AWS.config.region = "cn-northwest-1"; //设置区域

      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
      var _this = this;

      if (file) {
        var params = {
          Key:
            file.name.split(".")[0] +
            new Date().getTime() +
            "." +
            file.name.split(".")[1],
          ContentType: file.type,
          Body: file,
          "Access-Control-Allow-Credentials": "*",
          ACL: "public-read",
        }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
        var options = {
          partSize: 2048 * 1024 * 1024,
          queueSize: 2,
          leavePartsOnError: true,
        };
        bucket
          .upload(params, options)
          .on("httpUploadProgress", function (evt) {
            //这里可以写进度条
            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
          })
          .send(function (err, data) {
            loading.close();
            if (err) {
              var a = _this.$refs.upload1.uploadFiles;
              a.splice(a.length - 1, a.length);
              _this.$message.error("上传失败");
            } else {
              _this.cover.push({
                name: file.name,
                url: data.Location,
                uid: file.uid,
              });
              _this.imgChange1(null, null, 1, null);
              console.log(data.Location);
            }
          });
      }
    },
    beforeUpload(data) {
      this.$refs.upload1.uploadFiles;
      this.uploadLoading1 = true;
      var file = data.file;
      var credentials = {
        accessKeyId: "AKIATLPEDU37QV5CHLMH",
        secretAccessKey: "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",
      }; //秘钥形式的登录上传
      window.AWS.config.update(credentials);
      window.AWS.config.region = "cn-northwest-1"; //设置区域

      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
      var _this = this;

      if (file) {
        var params = {
          Key:
            file.name.split(".")[0] +
            new Date().getTime() +
            "." +
            file.name.split(".")[1],
          ContentType: file.type,
          Body: file,
          "Access-Control-Allow-Credentials": "*",
          ACL: "public-read",
        }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
        var options = {
          partSize: 2048 * 1024 * 1024,
          queueSize: 2,
          leavePartsOnError: true,
        };
        bucket
          .upload(params, options)
          .on("httpUploadProgress", function (evt) {
            //这里可以写进度条
            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
          })
          .send(function (err, data) {
            _this.uploadLoading1 = false;
            if (err) {
              var a = _this.$refs.upload1.uploadFiles;
              a.splice(a.length - 1, a.length);
              _this.$message.error("上传失败");
            } else {
              //上传成功处理
              _this.unitJson[_this.unitIndex].chapterInfo[0].fileList1.push({
                name: file.name,
                url: data.Location,
                uid: file.uid,
              });
              _this.imgChange();
              console.log(data.Location);
            }
          });
      }
    },
    onExceed() {
      this.$message.error("课程封面仅支持上传一张，请删除后再进行上传");
    },
    beforeUpload2(event, unitIndex, type, itemTaskIndex) {
      const loading = this.openLoading();
      var file = event.target.files[0];
      this.inputShow = false;
      var credentials = {
        accessKeyId: "AKIATLPEDU37QV5CHLMH",
        secretAccessKey: "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",
      }; //秘钥形式的登录上传
      window.AWS.config.update(credentials);
      window.AWS.config.region = "cn-northwest-1"; //设置区域

      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
      var _this = this;

      if (file) {
        var params = {
          Key:
            file.name.split(".")[0] +
            new Date().getTime() +
            "." +
            file.name.split(".")[1],
          ContentType: file.type,
          Body: file,
          "Access-Control-Allow-Credentials": "*",
          ACL: "public-read",
        }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
        var options = {
          partSize: 2048 * 1024 * 1024,
          queueSize: 2,
          leavePartsOnError: true,
        };
        bucket
          .upload(params, options)
          .on("httpUploadProgress", function (evt) {
            //这里可以写进度条
            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
          })
          .send(function (err, data) {
            loading.close();
            _this.inputShow = true;
            if (err) {
              var a = _this.$refs.upload1.uploadFiles;
              a.splice(a.length - 1, a.length);
              _this.$message.error("上传失败");
            } else {
              if (type == 2 || type == 3) {
                _this.unitJson[unitIndex].chapterInfo[0].taskJson[
                  itemTaskIndex
                ].chapterData.push({
                  name: file.name,
                  url: data.Location,
                  uid: file.uid,
                  type: type,
                });
                _this.imgChange1(null, null, type, itemTaskIndex);
              } else if (type == 4) {
                _this.unitJson[_this.unitIndex].chapterInfo[0].taskJson[
                  itemTaskIndex
                ].fileList1.push({
                  name: file.name,
                  url: data.Location,
                  uid: file.uid,
                });
                _this.imgChange1(null, null, type, itemTaskIndex);
              } else if (type == 5) {
                _this.unitJson[_this.unitIndex].chapterInfo[0].taskJson[
                  itemTaskIndex
                ].homeworkList.push({
                  name: file.name,
                  url: data.Location,
                  uid: file.uid,
                });
                _this.imgChange1(null, null, type, itemTaskIndex);
              }
              console.log(data.Location);
            }
          });
      }
    },
    addunit() {
      this.unitJson.push({
        dyName: "", //单元标题
        chapterInfo: [
          {
            isread: false,
            chapterid: this.guid(),
            title: "",
            courseName: "",
            taskJson: [
              {
                task: "",
                taskDetail: "",
                chapterData: [],
                toolText: "",
                toolChoose: [
                  {
                    tool: [],
                    toolDetail: "",
                    toolType: 0,
                    askCount: 1,
                    askTitle: "",
                    askJson: [{ askstitle: "", askItem: 1, checkList: [] }],
                  },
                ],
                isShowTools: false,
                askCount: 1,
                isFold: 0,
                askTitle: "",
                askJson: [{ askstitle: "", askItem: 1, checkList: [] }],
                checkJson: [{ checkCount: [], checkPerent: [] }],
                homeworkList: [],
              },
            ],
            itemCount: 1,
            fileList1: [],
            video: [],
            testData: [],
            pData: [],
            templateArray: [],
          },
        ],
      });
      setTimeout(() => {
        this.unitIndex = this.unitJson.length - 1;
        this.unitSet(this.unitIndex);
      }, 0);
    },
    addToolFun(itemTaskIndex) {
      this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
        itemTaskIndex
      ].toolChoose.push({
        tool: [],
        toolDetail: "",
        toolType: 0,
        askCount: 1,
        askTitle: "",
        askJson: [{ askstitle: "", askItem: 1, checkList: [] }],
      });
    },
    addTaskBorder() {
      this.unitJson[this.unitIndex].chapterInfo[0].taskJson.push({
        task: "",
        taskDetail: "",
        chapterData: [],
        toolText: "",
        toolChoose: [
          {
            tool: [],
            toolDetail: "",
            toolType: 0,
            askCount: 1,
            askTitle: "",
            askJson: [{ askstitle: "", askItem: 1, checkList: [] }],
          },
        ],
        isShowTools: false,
        askCount: 1,
        isFold: 0,
        askTitle: "",
        askJson: [{ askstitle: "", askItem: 1, checkList: [] }],
        checkJson: [{ checkCount: [], checkPerent: [] }],
        homeworkList: [],
      });
    },
    add(e, i) {
      var el = e.currentTarget;
      el.getElementsByTagName("input")[0].click();
    },
    fold(i, e, type) {
      var a = e.path[3];
      var b = e.path[2];
      if (type == 1) {
        this.unitJson[this.unitIndex].chapterInfo[0].taskJson[i].isFold = 1;
        a.className += " smallTaskBorder";
        b.className += " funBlockTop";
      } else {
        this.unitJson[this.unitIndex].chapterInfo[0].taskJson[i].isFold = 0;
        a.className = "taskBorder";
        b.className = "funBlock";
      }
      console.log(e);
    },
    deleteHomeworkBox(unitIndex, index, i) {
      this.unitJson[unitIndex].chapterInfo[index].taskJson[
        this.taskCount
      ].homeworkList.splice(i, 1);
    },
    getStudent() {
      let params = {
        oid: this.oid,
        cu: "",
        cn: this.searchPeople,
      };
      this.ajax
        .get(this.$store.state.api + "selectStudentAdd", params)
        .then((res) => {
          this.studentJuri = res.data[0];
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    searchStudent() {
      this.getStudent();
    },

    getChapterData(e, i, j, ic, type) {
      e.stopPropagation();
      this.updataC = true;
      this.icc = ic;
      if ((type == 2 || type == 3) && e.target.tagName !== "INPUT") {
        console.log("还不能下载图片喔");
      }
    },
    deleteChapterData(e, i, j, ic, taskI) {
      e.stopPropagation();
      this.unitJson[i].chapterInfo[j].taskJson[taskI].chapterData.splice(ic, 1);
    },
    updataVideoT(e, i, j, ic) {
      e.stopPropagation();
      this.unitJson[i].chapterInfo[j].taskJson[this.taskCount].chapterData[
        ic
      ].name = e.target.value;
    },
    upCd(e, i, j, ic) {
      e.stopPropagation();
      if (ic == 0) {
        return;
      }
      var a =
        this.unitJson[i].chapterInfo[j].taskJson[this.taskCount].chapterData[
          ic - 1
        ];
      this.unitJson[i].chapterInfo[j].taskJson[this.taskCount].chapterData[
        ic - 1
      ] =
        this.unitJson[i].chapterInfo[j].taskJson[this.taskCount].chapterData[
          ic
        ];
      this.unitJson[i].chapterInfo[j].taskJson[this.taskCount].chapterData[ic] =
        a;
    },
    downCd(e, i, j, ic) {
      e.stopPropagation();
      if (ic == this.unitJson[i].chapterInfo[j].chapterData.length - 1) {
        return;
      }
      var a =
        this.unitJson[i].chapterInfo[j].taskJson[this.taskCount].chapterData[
          ic + 1
        ];
      this.unitJson[i].chapterInfo[j].taskJson[this.taskCount].chapterData[
        ic + 1
      ] =
        this.unitJson[i].chapterInfo[j].taskJson[this.taskCount].chapterData[
          ic
        ];
      this.unitJson[i].chapterInfo[j].taskJson[this.taskCount].chapterData[ic] =
        a;
    },
    addWork() {
      for (var i = 0; i < this.unitJson.length; i++) {
        for (
          var j = 0;
          j < this.unitJson[i].chapterInfo[0].taskJson.length;
          j++
        ) {
          if (this.unitJson[i].chapterInfo[0].taskJson[j].eList) {
            this.unitJson[i].chapterInfo[0].taskJson[j].eList = this.unitJson[
              i
            ].chapterInfo[0].taskJson[j].eList.filter((ele) => {
              return ele.value != "";
            });
          }
        }
      }
      let params = [
        {
          uid: this.userid,
          title: this.courseName,
          brief: this.courseText.replace(/%/g, "%25"),
          cover:
            this.cover.length > 0
              ? JSON.stringify(this.cover)
              : JSON.stringify([
                  {
                    name: "noBanner.jpg",
                    url: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/noBanner1656409780264.jpg",
                    uid: 1656409780264,
                    status: "success",
                  },
                ]),
          astudent:
            this.checkboxList.length > 0
              ? JSON.stringify(this.checkboxList)
              : [],
          see: this.isTeacherSee == true ? 0 : 1,
          chapters: JSON.stringify(this.unitJson),
          template: this.cTemplate != "undefined" ? this.cTemplate : "",
          courseType: JSON.stringify(this.courseTypeId),
        },
      ];
      this.ajax
        .post(this.$store.state.api + "addWorkNew", params)
        .then((res) => {
          this.$message({
            message: "新增成功",
            type: "success",
          });
          this.number = res.data.ordernumber;
          this.courseId = res.data.courseId;
          this.islogin = true;
        })
        .catch((err) => {
          this.$message.error("新增失败");
          console.error(err);
        });
    },
    goCourse() {
      window.parent.postMessage({ cid: this.courseId, type: "1" }, "*");
    },
    updateWork() {
      for (var i = 0; i < this.unitJson.length; i++) {
        for (
          var j = 0;
          j < this.unitJson[i].chapterInfo[0].taskJson.length;
          j++
        ) {
          if (this.unitJson[i].chapterInfo[0].taskJson[j].eList) {
            this.unitJson[i].chapterInfo[0].taskJson[j].eList = this.unitJson[
              i
            ].chapterInfo[0].taskJson[j].eList.filter((ele) => {
              return ele.value != "";
            });
          }
        }
      }
      let params = [
        {
          cid: this.cid,
          title: this.courseName,
          brief: this.courseText.replace(/%/g, "%25"),
          cover: this.cover.length > 0 ? JSON.stringify(this.cover) : "",
          astudent:
            this.checkboxList.length > 0
              ? JSON.stringify(this.checkboxList)
              : [],
          see: this.isTeacherSee == true ? 0 : 1,
          chapters: JSON.stringify(this.unitJson).replaceAll(/%/g,'%25'),
          template: this.myWord != "undefined" ? this.myWord : [],
          uid: this.userid,
          courseType: JSON.stringify(this.courseTypeId),
        },
      ];
      this.ajax
        .post(this.$store.state.api + "updateWorkNew", params)
        .then((res) => {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.number = this.nbOrder;
          this.courseId = this.cid;
        })
        .catch((err) => {
          this.$message.error("修改失败");
          console.error(err);
        });
    },
    guid() {
      var _num,
        i,
        _guid = "";
      for (i = 0; i < 32; i++) {
        _guid += Math.floor(Math.random() * 16).toString(16); //随机0  - 16 的数字 转变为16进制的字符串
        _num = Math.floor((i - 7) / 4); //计算 (i-7)除4
        if (_num > -1 && _num < 4 && i == 7 + 4 * _num) {
          //会使guid中间加 "-"   形式为xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
          _guid += "-";
        }
      }
      return _guid;
    },
    insertWord() {
      this.dialogVisible1 = true;
      this.updateBoolean2 = false;
      this.tTitle = "";
      this.tdetail = "";
    },
    addWord() {
      this.unitJson[this.unitIndex].chapterInfo[0].fileList1.push({
        name: this.tTitle,
        content: this.tdetail,
        uid: this.guid(),
      });
      this.dialogVisible1 = false;
    },
    upWord() {},
    selectWord(uid, i, c) {
      this.dialogVisible1 = true;
      this.updateBoolean2 = true;
      if (
        uid == this.unitJson[this.unitIndex].chapterInfo[i].fileList1[c].uid
      ) {
        this.tTitle =
          this.unitJson[this.unitIndex].chapterInfo[i].fileList1[c].name;
        this.tdetail =
          this.unitJson[this.unitIndex].chapterInfo[i].fileList1[c].content;
      }
    },
    isAddPP() {
      if (this.checkboxList.length > 0) {
        this.$message({
          message: "添加成功",
          type: "success",
        });
        this.dialogVisible3 = false;
      } else {
        this.$message({
          message: "请添加课程成员",
          type: "error",
        });
      }
    },
    getTemplate() {
      this.ajax
        .get(this.$store.state.api + "getCourseTemplateT", "")
        .then((res) => {
          this.templateArray = res.data[0];
        })
        .catch((err) => {});
    },
    clearChoose() {
      this.clearArray.splice(this.templateC.id, 1);
      this.dialogVisible2 = false;
    },
    clearAttText() {
      this.AttText = {
        title: "",
        text: "",
      };
      this.dialogVisible6 = false;
    },
    clearLine() {
      this.line = "";
      this.dialogVisible7 = false;
    },
    checkTemplate(res) {
      let _this = this;
      _this
        .$confirm("确定选择此模板吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          _this.unitJson = JSON.parse(res.chapters);
          _this.steps++;
        })
        .catch(() => {
          return;
        });
    },
    checkTemplate1(w) {
      this.steps++;
    },
    checkTemplate2() {
      let _this = this;
      _this
        .$confirm("确定选择空模板吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          _this.unitJson = [
            {
              dyName: "", //单元标题
              chapterInfo: [
                {
                  isread: false,
                  chapterid: this.guid(),
                  title: "",
                  courseName: "",
                  taskJson: [
                    {
                      task: "",
                      taskDetail: "",
                      chapterData: [],
                      toolText: "",
                      toolChoose: [
                        {
                          tool: [],
                          toolDetail: "",
                          toolType: 0,
                          askCount: 1,
                          askTitle: "",
                          askJson: [
                            { askstitle: "", askItem: 1, checkList: [] },
                          ],
                        },
                      ],
                      isShowTools: false,
                      askCount: 1,
                      isFold: 0,
                      askTitle: "",
                      askJson: [{ askstitle: "", askItem: 1, checkList: [] }],
                      checkJson: [{ checkCount: [], checkPerent: [] }],
                      homeworkList: [],
                    },
                  ],
                  itemCount: 1,
                  fileList1: [],
                  video: [],
                  testData: [],
                  pData: [],
                  templateArray: [],
                },
              ],
            },
          ];
          this.steps++;
        })
        .catch(() => {
          return;
        });
    },
    wordNext() {
      this.dialogVisible2 = false;
    },
    isAddOrUpdateAttText() {
      if (this.AttTextType == 0) {
        this.addAttTextMessage();
      } else {
        this.updateAttText();
      }
    },
    isAddOrUpdateLine() {
      if (this.lineType == 0) {
        this.addLine();
      } else {
        this.updateLine();
      }
    },
    addAttTextMessage() {
      this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
        this.taskCount
      ].chapterData.push({
        name: this.AttText.title,
        url: this.AttText.text,
        type: 6,
      });
      this.imgChange1(null, null, 6, this.taskCount);
      this.dialogVisible6 = false;
    },
    selectAttText(itemTaskIndex, i) {
      this.AttText.title =
        this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
          itemTaskIndex
        ].chapterData[i].name;
      this.AttText.text =
        this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
          itemTaskIndex
        ].chapterData[i].url;
      this.taskCount = itemTaskIndex;
      this.AttTextIndex = i;
      this.AttTextType = 1;
      this.dialogVisible6 = true;
    },
    updateAttText() {
      this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
        this.taskCount
      ].chapterData[this.AttTextIndex].name = this.AttText.title;

      this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
        this.taskCount
      ].chapterData[this.AttTextIndex].url = this.AttText.text;
      this.dialogVisible6 = false;
    },
    addLine() {
      this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
        this.lineCount
      ].chapterData.push({
        name: "链接",
        url: this.line,
        type: 8,
      });
      this.imgChange1(null, null, 8, this.lineCount);
      this.dialogVisible7 = false;
    },
    selectLine(itemTaskIndex, i) {
      this.line =
        this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
          itemTaskIndex
        ].chapterData[i].url;
      this.taskCount = itemTaskIndex;
      this.lineCount = i;
      this.lineType = 1;
      this.dialogVisible7 = true;
    },
    updateLine() {
      this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
        this.taskCount
      ].chapterData[this.lineCount].url = this.line;
      this.dialogVisible7 = false;
    },
    addPP() {
      this.dialogVisible3 = true;
    },
    goTo(path) {
      this.$router.push(path);
    },
    openTools(itemTaskIndex, i, toolIndex) {
      this.toolIndex = toolIndex;
      this.taskCount = itemTaskIndex;
      if (i == 4) {
        if (toolIndex == null) {
          var a =
            this.unitJson[this.unitIndex].chapterInfo[0].taskJson[itemTaskIndex]
              .chapterData;
          for (var i = 0; i < a.length; i++) {
            if (a[i].url == 4 && a[i].askJson.askTitle != "") {
              this.askJson =
                this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
                  itemTaskIndex
                ].chapterData[i].askJson;
            }
          }
        } else {
          this.askJson = JSON.parse(
            JSON.stringify(
              this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
                itemTaskIndex
              ].toolChoose[toolIndex]
            )
          );
        }
        this.dialogVisible5 = true;
      } else if (i == 15) {
        this.answerQ = this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
          itemTaskIndex
        ].toolChoose[toolIndex].answerQ
          ? JSON.parse(
              JSON.stringify(
                this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
                  itemTaskIndex
                ].toolChoose[toolIndex].answerQ
              )
            )
          : "";
        this.dialogVisible8 = true;
      }
    },
    chapAddTools(i) {
      if (this.chapTools[0].tools.length == 0) {
        this.chapTools[0].tools.push(i);
      } else {
        if (this.chapTools[0].tools.indexOf(i) != -1) {
          this.chapTools[0].tools.splice(this.chapTools[0].tools.indexOf(i), 1);
        } else {
          this.chapTools[0].tools.push(i);
        }
      }
      this.$forceUpdate();
    },
    addChaptersDataTools() {
      if (this.chapTools[0].tools.indexOf(4) != -1) {
        this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
          this.chapCount
        ].chapterData.push({
          name: this.chapTools[0].toolDetail,
          url: this.chapTools[0].tools,
          type: 7,
          askJson: this.askJson,
        });
      } else {
        this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
          this.chapCount
        ].chapterData.push({
          name: this.chapTools[0].toolDetail,
          url: this.chapTools[0].tools,
          type: 7,
        });
      }
      this.imgChange1(null, null, 7, this.chapCount);
      this.dialogVisible4 = false;
    },
    addTools(i, itemTaskIndex, toolIndex) {
      // if (
      //   this.unitJson[this.unitIndex].chapterInfo[0].taskJson[itemTaskIndex]
      //     .toolChoose[toolIndex].tool.length == 0
      // ) {
      //   this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
      //     itemTaskIndex
      //   ].toolChoose[toolIndex].tool.push(i);
      // } else {
      //   if (
      //     this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
      //       itemTaskIndex
      //     ].toolChoose[toolIndex].tool.indexOf(i) != -1
      //   ) {
      //     this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
      //       itemTaskIndex
      //     ].toolChoose[toolIndex].tool.splice(
      //       this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
      //         itemTaskIndex
      //       ].toolChoose[toolIndex].tool.indexOf(i),
      //       1
      //     );
      //   } else {
      //     this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
      //       itemTaskIndex
      //     ].toolChoose[toolIndex].tool.push(i);
      //   }
      //   console.log(
      //     this.unitJson[this.unitIndex].chapterInfo[0].taskJson[itemTaskIndex]
      //       .toolChoose[toolIndex].tool
      //   );
      // }
      if (i == 4) {
        if (
          this.unitJson[this.unitIndex].chapterInfo[0].taskJson[itemTaskIndex]
            .toolChoose[toolIndex].askJson.askTitle == "" ||
          this.unitJson[this.unitIndex].chapterInfo[0].taskJson[itemTaskIndex]
            .toolChoose[toolIndex].askJson[0].askstitle == "" ||
          this.unitJson[this.unitIndex].chapterInfo[0].taskJson[itemTaskIndex]
            .toolChoose[toolIndex].askJson[0].checkList < 2
        ) {
          this.$message({
            message: "请填写完整问卷内容",
            type: "error",
          });
          return;
        }
      }
      if (i == 15) {
        if (
          !this.unitJson[this.unitIndex].chapterInfo[0].taskJson[itemTaskIndex]
            .toolChoose[toolIndex].answerQ ||
          this.unitJson[this.unitIndex].chapterInfo[0].taskJson[itemTaskIndex]
            .toolChoose[toolIndex].answerQ == ""
        ) {
          this.$message({
            message: "请填写问答内容",
            type: "error",
          });
          return;
        }
      }
      if (
        this.unitJson[this.unitIndex].chapterInfo[0].taskJson[itemTaskIndex]
          .toolChoose[toolIndex].tool.length > 0
      ) {
        if (
          this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
            itemTaskIndex
          ].toolChoose[toolIndex].tool.indexOf(i) != -1
        ) {
          this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
            itemTaskIndex
          ].toolChoose[toolIndex].tool.splice(
            this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
              itemTaskIndex
            ].toolChoose[toolIndex].tool.indexOf(i),
            1
          );
        } else {
          this.$message({
            message: "每个工具只能添加一个",
            type: "error",
          });
        }
      } else {
        this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
          itemTaskIndex
        ].toolChoose[toolIndex].tool.push(i);
      }

      this.$forceUpdate();
    },
    addAskList() {
      this.askJson.askJson.push({
        askstitle: "",
        askItem: 1,
        checkList: [],
      });
      this.askJson.askCount++;
    },
    deleteAskList() {
      this.askJson.askJson.splice(-1);
      this.askJson.askCount--;
    },
    addcheckList(json) {
      json.checkList.length++;
      json.askItem++;
    },
    deletecheckList(json) {
      json.checkList.length--;
      json.askItem--;
    },
    addAsk() {
      if (this.askJson.askTitle === "") {
        this.$message.error("问卷调查标题不能为空！");
        return;
      }
      var aj = this.askJson.askJson;
      var b = 1;
      for (var i = 0; i < aj.length; i++) {
        if (aj[i].askstitle === "") {
          var a = 1;
          for (let index = 0; index < aj[i].askItem; index++) {
            const element = aj[i].checkList[index]
              ? aj[i].checkList[index]
              : "";
            if (element != "") {
              b++;
              this.$message.error("填写了问卷调查选项，问卷调查题目不能为空！");
              return;
            } else {
              a++;
            }
          }
          if (b == 1) {
            this.$message.error("至少填写一个问题");
            return;
          }
        } else if (aj[i].askstitle != "") {
          for (let index = 0; index < aj[i].askItem; index++) {
            const element = aj[i].checkList[index]
              ? aj[i].checkList[index]
              : "";
            var index = 0;
            for (var z = 0; z < aj[i].checkList.length; z++) {
              var checkC = aj[i].checkList[z] ? aj[i].checkList[z] : "";
              if (checkC != "") {
                index++;
              } else {
                this.$message.error("问卷调查选项不能为空！");
                return;
              }
            }
            b++;
            if (index < 2) {
              this.$message.error(
                "填写了问卷调查的题目，问卷调查选项至少要有两项！"
              );
              return;
            }
          }
        }
      }
      this.askJson.askJson = this.askJson.askJson.filter((el) => {
        var elc = el.checkList.filter((element) => {
          return element != "";
        });
        return el.askstitle != "" && elc.length != 0;
      });
      if (!this.dialogVisible4) {
        this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
          this.taskCount
        ].toolChoose[this.toolIndex] = this.askJson;
      }

      this.dialogVisible5 = false;
    },
    addAnswer() {
      if (this.answerQ == "") {
        this.$message.error("请输入您想要问的问题");
        return;
      }
      this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
        this.taskCount
      ].toolChoose[this.toolIndex].answerQ = this.answerQ;
      this.dialogVisible8 = false;
    },
    selectCourseDetail() {
      if (this.cid == "" || this.cid == undefined) {
        console.log("这是新增课程");
      } else {
        this.cidType = 1;
        let params = {
          cid: this.cid,
        };
        this.ajax
          .get(this.$store.state.api + "select_course_detail", params)
          .then((res) => {
            this.loading = true;
            this.unitJson = JSON.parse(res.data[0][0].chapters);
            for (var j in this.unitJson) {
              for (var i in this.unitJson[j].chapterInfo) {
                this.unitJson[j].chapterInfo[i].taskJson[
                  this.taskCount
                ].toolChoose = this.unitJson[j].chapterInfo[i].taskJson[
                  this.taskCount
                ].toolChoose
                  ? this.unitJson[j].chapterInfo[i].taskJson[this.taskCount]
                      .toolChoose
                  : [];
              }
            }
            this.courseName = res.data[0][0].title;
            this.courseText = res.data[0][0].brief;
            this.cover = JSON.parse(res.data[0][0].cover);
            this.noneBtnImg = this.cover.length >= 1;
            this.checkboxList =
              res.data[0][0].course_student.length > 0
                ? JSON.parse(res.data[0][0].course_student)
                : [];
            this.isTeacherSee =
              res.data[0][0].is_teacher_look == 0 ? true : false;
            this.myWord = res.data[0][0].template;
            this.templateC.id = "123";
            this.nbOrder = res.data[0][0].ordernumber;
            for (var i = 0; i < res.data[1].length; i++) {
              this.courseTypeId.push(res.data[1][i].typeid);
            }
            console.log(this.courseTypeId);
            this.$forceUpdate();
          })
          .catch((err) => {
            console.error(err);
          });
      }
    },
    getTypeName() {
      console.log(this.courseTypeId);
      this.$forceUpdate();
    },
    selectType() {
      this.ajax
        .get(this.$store.state.api + "selectType")
        .then((res) => {
          this.CourseType = res.data;
          for (var i = 0; i < res.data[0].length; i++) {
            if (!this.cid) {
              this.courseTypeId[res.data[0][i].id] = "";
            }
            for (var j = 0; j < res.data[1].length; j++) {
              if (res.data[0][i].id == res.data[1][j].pid) {
                if (!this.CourseTypeJson[res.data[0][i].id]) {
                  this.CourseTypeJson[res.data[0][i].id] = [];
                }
                this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]);
              }
            }
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    /*添加评价 */
    addEList(index, tIndex) {
      this.unitJson[index].chapterInfo[0].taskJson[tIndex].eList
        ? this.unitJson[index].chapterInfo[0].taskJson[tIndex].eList.push({
            value: "",
            detail: "",
            score: 5,
          })
        : (this.unitJson[index].chapterInfo[0].taskJson[tIndex].eList = [
            { value: "", detail: "", score: 5 },
          ]);
      this.$forceUpdate();
    },
    deletEList(index, tIndex, eIndex) {
      this.unitJson[index].chapterInfo[0].taskJson[tIndex].eList.splice(
        eIndex,
        1
      );
      this.$forceUpdate();
    },
    setEListStar() {
      this.$forceUpdate();
    },
  },
  created() {
    this.getStudent();
    this.getTemplate();
    this.selectType();
    this.loading = false;
    setTimeout(() => {
      this.selectCourseDetail();
    }, 500);
  },
};
</script>

<style scoped>
.dialog_diy >>> .el-dialog__header {
  background: #3d67bc !important;
  padding: 15px 20px;
}
.dialog_diy >>> .el-dialog__title {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn {
  top: 19px;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}
.dialog_diy >>> .el-dialog__body,
.dialog_diy >>> .el-dialog__footer {
  background: #fafafa;
}
.left {
  border-right: 1px solid rgb(60, 94, 143);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 600px;
  width: 385px;
  height: 80%;
}

.tips {
  color: rgb(128, 128, 128);
  font-size: 12px;
  width: 270px;
  margin: 40px;
}

.pb_content {
  height: auto !important;
  margin: 0 20px 0 20px;
}

.pb_content_body {
  width: 100% !important;
  height: 100%;
}

.info_solid {
  width: 270px;
  height: 30px;
  border-left: 1px solid #bdbdbd;
  margin: 10px 0px 10px 30px;
}

.info_steps {
  width: 270px;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
}

.info_steps span:nth-child(1) {
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.38);
  display: block;
  color: #fff;
  border-radius: 40px;
  text-align: center;
  line-height: 30px;
}

.steps_active {
  background: #3d67bc !important;
}

.info_steps span:nth-child(2) {
  margin-left: 5px;
}

.right {
  height: 100%;
  width: 100%;
}

.basic_box {
  width: 90%;
  margin: 0 auto;
  position: relative;
}
.basic_box_success {
  width: 80%;
  min-height: 455px;
  margin: 50px auto;
  position: relative;
  text-align: center;
  border-bottom: 1px solid #bfbfbf;
}
.info_title {
  font-size: 1.5em;
  margin: 20px 30px 20px 30px;
}

.bInfo_title {
  font-size: 20px;
  text-align: left;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 700;
}

.small_title {
  font-size: 14px;
  line-height: 40px;
}

.binfo_input {
  font: inherit;
  color: currentColor;
  width: 100%;
  margin: 0;
  padding: 15px 14px;
  display: block;
  min-width: 0;
  outline: none;
  box-sizing: content-box;
  background: none;
  -webkit-tap-highlight-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 4px;
  box-sizing: border-box;
  resize: none;
}

.binfo_input:focus-visible {
  border: 1px solid rgba(61, 103, 188);
}

.chapter_beizhu {
  font-size: 12px;
  font-weight: bold;
  float: right;
  color: rgb(128, 128, 128);
  margin-top: 5px;
}

.chapter_uploadBox1 {
  text-align: left;
  background-color: rgb(242, 242, 242);
  width: 100%;
  height: 67px;
  padding: 0px 15px;
  border-radius: 8px;
  overflow: hidden;
  font-size: 16px;
  box-sizing: border-box;
  position: relative;
}

.chapter_add {
  width: 100%;
  height: 32px;
  margin-top: 15px;
  cursor: pointer;
}

.chapter_add_l {
  margin-left: 5px;
  width: 30px;
  height: 30px;
  float: left;
  border: 1px solid #aaa;
  color: #aaa;
  border-radius: 50%;
  font-size: 25px;
  text-align: center;
}

.chapter_add_r {
  font-size: 18px;
  height: 40px;
  line-height: 30px;
  text-indent: 10px;
  color: #aaa;
}

.chapter_add_r span {
  font-size: 12px;
  color: rgb(204, 204, 204);
}

.chapter_add_input {
  display: none;
}

.line {
  width: 85%;
  margin: 0 auto;
  border-top: 1px solid #e5e5e5;
  margin-top: 20px;
}

.info_btnBox {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  margin: 20px 0 25px 0;
}

.info_btn,
.teacherWord {
  color: #fff;
  background-color: #6a8ed5;
  padding: 8px 24px;
  font-size: 0.9375rem;
  box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%),
    0px 3px 1px -2px rgb(0 0 0 / 12%);
  min-width: 64px;
  font-weight: 500;
  border-radius: 4px;
  box-sizing: border-box;
  border: none;
  cursor: pointer;
}
.teacherWord {
  width: 105px !important;
  text-align: center !important;
  line-height: 36px !important;
  padding: 0 !important;
  font-size: 14px !important;
  margin: 10px 0 !important;
}
.wordTeacher {
  display: flex;
  flex-direction: column;
  width: 20%;
  text-align: center;
  font-size: 14px;
  margin: 30px 30px 0 10px;
  background: #fff;
  position: relative;
  border-radius: 5px;
  padding: 25px 0px;
}
.wordPic {
  margin: 0 auto;
  width: 60px;
  height: 60px;
  cursor: pointer;
}
.deleteWord {
  width: 22px;
  height: 22px;
  position: absolute;
  right: 20px;
  top: -10px;
  cursor: pointer;
}
.wordPic > img,
.deleteWord > img,
.addToolImg > img {
  width: 100%;
  height: 100%;
}
.info_btn:hover {
  background-color: #4f7cd5 !important;
}

.cru_selectBox {
  display: flex;
  margin: 24px 0 10px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: auto;
  position: relative;
  height: 47px;
}

.cru_selectBox::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 6px;
}

/*定义滚动条轨道 内阴影+圆角*/
.cru_selectBox::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #eee;
}

/*定义滑块 内阴影+圆角*/
.cru_selectBox::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.1);
}

.cru_line {
  position: absolute;
  bottom: 0px;
  transition: all 0.5s;
  left: 0px;
  width: 125px;
  margin-left: -25px;
}

.cru_select {
  font-size: 21px;
  margin-right: 37px;
  margin-left: 5px;
  cursor: pointer;
  color: #a6a6a6;
}

.cru_selected {
  color: #0b7fc2 !important;
}

.chapter_contentbox {
  display: flex;
  align-items: center;
  margin-top: 15px;
}

.chapter_contentbox div:nth-child(1) {
  width: 150px;
  margin: 0px;
  font-size: 2em;
  color: black;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

.chapter_contentbox div:nth-child(2) {
  width: 380px;
}

.chapter_contentbox div:nth-child(3),
.remove {
  background-image: url(../../assets/remove.png);
  cursor: pointer;
  opacity: 0.5;
  width: 40px;
  height: 50px;
  background-repeat: no-repeat;
  background-position: 5px 10px;
}

.binfo_input {
  font: inherit;
  color: currentColor;
  width: 100%;
  margin: 0;
  padding: 15px 14px;
  display: block;
  min-width: 0;
  outline: none;
  box-sizing: content-box;
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 4px;
  box-sizing: border-box;
  background: #fff;
}

.binfo_input:focus-visible {
  border: 1px solid rgba(61, 103, 188);
}

.time {
  display: flex;
  margin: 35px 0 80px 0;
}

.chapter_btnbox {
  width: 160px;
  border-radius: 5px;
  border: 2px dashed gray;
  display: flex;
  padding: 8px 50px;
  align-items: center;
  justify-content: center;
  margin: 30px auto 0;
  cursor: pointer;
}

.icon_add {
  position: relative;
  width: 24px;
  padding-top: 20px;
  border-radius: 100%;
  border-width: 2px;
  border-style: solid;
  border-color: gray;
}

.icon_add i:nth-child(1) {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 60%;
  transform: translate(-50%, -50%);
  border-width: 1px;
  border-style: solid;
  border-color: inherit;
}

.icon_add i:nth-child(2) {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  transform: translate(-50%, -50%);
  border-width: 1px;
  border-style: solid;
  border-color: inherit;
}

.chapter_btn_w {
  font-size: 0.9375rem;
  font-weight: bold;
  color: gray;
  margin-left: 20px;
}

.disUoloadSty >>> .el-icon-plus {
  display: none !important; /* 上传按钮隐藏 */
}

.imgLeft {
  margin: 15px 0;
}

.add_info_box {
  margin: 20px 0;
}

.add_info_box button {
  margin: 0 10px 10px 0;
}

.add_chapters_box {
  text-align: left;
  background-color: rgb(232 234 237);
  width: 100%;
  padding: 0px 15px;
  border-radius: 15px;
  font-size: 16px;
  box-sizing: border-box;
  position: relative;
  padding: 0 10px 5px 10px;
  height: 185px;
  overflow-y: auto;
  overflow-x: hidden;
}

.homework_box {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 15px 0 0 0;
  flex-direction: column;
  align-content: flex-start;
}

.course_homework {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  margin: 0 10px 0 0;
}
.course_homework >>> .el-input__inner {
  width: 140px;
  margin-left: 15px;
}

.chapter_upload_move {
  position: relative;
  background-color: #fff;
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0px;
  border: 1px solid #eee;
  border-radius: 5px;
  transition: width 2s;
  -moz-transition: width 2s;
  -webkit-transition: width 2s;
  -o-transition: width 2s;
}

.chapter_upload_l_i {
  background-image: url("../../assets/icon.png");
  background-position: 3px -165px;
  width: 30px;
  height: 30px;
  margin: 10px auto 0 auto;
}

.left_first {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 65%;
}

.right_first {
  width: 100%;
  height: 100%;
  margin-top: 15px;
}
.right_title {
  height: 30px;
  padding: 20px 0 10px 30px;
  border-bottom: 1px solid #f2f2f2;
  font-size: 1.5em;
  font-weight: bold;
}
.people {
  border: 1px solid rgb(229 229 229);
  height: 495px;
  border-radius: 5px;
  width: 100%;
  overflow: auto;
}
.people_top {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.people_nav,
.people_top_right {
  padding: 20px 0 0 20px;
}
.people_search {
  display: flex;
  position: relative;
}
.people_search >>> .el-input__inner {
  height: 25px;
  width: 95%;
}
.search_img {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 15px;
  top: 3px;
}
.search_img > img {
  width: 100%;
  height: 100%;
}
.people_name {
  display: flex;
  justify-content: flex-start;
  padding: 20px 0 0 25px;
  flex-direction: column;
  flex-wrap: wrap;
}
.people_name >>> .el-checkbox {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.people_name >>> .el-checkbox__label {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
}
.right_img {
  width: 150px;
  height: 150px;
  margin: 0 auto;
}
.right_img > img {
  width: 100%;
  height: 100%;
}
.number {
  margin-top: 20px;
  color: #4aa6ff;
  text-decoration: underline;
}
.success_button {
  display: flex;
  text-align: center;
  margin: 5% 0 auto;
  flex-direction: row;
  justify-content: center;
}
.look_course {
  margin-right: 40px;
  background: #3d67bc;
  width: 200px;
  height: 35px;
  line-height: 35px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
}
.attend_others {
  width: 250px;
  background: #4fb13c;
  height: 35px;
  line-height: 35px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
}
.dialog_diy2 >>> .el-dialog__body {
  text-align: center;
}
.write_togother {
  position: absolute;
  right: 45px;
  display: flex;
  top: 5%;
}
.write_people {
  font-size: 14px;
  line-height: 50px;
  padding-right: 10px;
}
.end_write {
  background: #3d67bc;
  color: #fff;
  width: 100px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
}
.chapter_upload {
  height: 50px;
  margin-top: 12px;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 50px;
}
.chapter_upload_t {
  background-color: #fff;
  position: absolute;
  height: 100%;
  top: 0px;
  left: 0px;
  border-radius: 40px;
  box-sizing: border-box;
  box-shadow: 0 0 3px 3px #dfdfdf;
}
.chapter_upload_o {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
.chapter_upload_ic {
  height: 30px;
  float: right;
}
.chapter_upload_ic_l {
  width: 50px;
  height: 50px;
  float: left;
}
.chapter_upload_ic_l div {
  width: 30px;
  height: 35px;
  background: url("../../assets/icon/icon.png");
}
.chapter_upload_ic_r {
  width: 50px;
  height: 50px;
  float: left;
  margin-left: 0px;
  display: flex;
  align-items: center;
}
.chapter_upload_ic_r div {
  width: 25px;
  height: 25px;
  background-image: url("../../assets/delete.png");
  background-size: 100% 100%;
}
.chapter_upload_n {
  display: flex;
  text-indent: 10px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 55%;
  margin-left: 10px;
  cursor: pointer;
  margin-top: 2px;
}
.chapter_upload_l_i1 {
  background-image: url("../../assets/icon/video.png");
  width: 28px;
  height: 28px;
  background-size: 100% 100%;
}
.chapter_upload_l_i5 {
  background-image: url("../../assets/icon/word.png");
  width: 24px;
  height: 24px;
  background-size: 100% 100%;
}
.chapter_upload_l_i8 {
  background-image: url("../../assets/icon/line.png");
  width: 24px;
  height: 24px;
  background-size: 100% 100%;
}
.chapter_upload_ud {
  display: flex;
  flex-direction: column;
  margin-left: 5px;
  justify-content: center;
}
.chapter_upload_up {
  background-image: url("../../assets/icon/up.png");
  width: 17px;
  height: 15px;
  background-size: 100% 100%;
  cursor: pointer;
}

.chapter_upload_down {
  background-image: url("../../assets/icon/down.png");
  width: 17px;
  height: 15px;
  margin: 2px auto 0 auto;
  background-size: 100% 100%;
  cursor: pointer;
}
.addWordStyle {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  overflow-x: auto;
  white-space: nowrap;
  flex-wrap: wrap;
}
/* table 样式 */
.cont >>> table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
.cont >>> table td,
.cont >>> table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
}
.cont >>> table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
}
/* blockquote 样式 */
.cont >>> blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}
/* code 样式 */
.cont >>> code {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}
.cont >>> pre code {
  display: block;
}
/* ul ol 样式 */
.cont >>> ul,
ol {
  margin: 10px 0 10px 20px;
}

.wordbox {
  display: flex;
  flex-wrap: wrap;
  cursor: pointer;
  width: 100%;
}

.checkword {
  width: 22px;
  height: 22px;
  margin: 10px auto 0;
  cursor: pointer;
}

.checkword img {
  width: 100%;
}

.stepBg {
  margin: 0 25px 0 0;
  width: 17%;
  min-width: 230px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  background: #fff;
  min-height: 700px;
  top: 18%;
}

.stepBg > div {
  height: 80px;
  width: 85%;
  cursor: pointer;
  margin: 10px 0;
  border-radius: 10px;
}

.first,
.second,
.third,
.four {
  background: #4a83d0;
  height: 90px;
  color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.first > div:nth-child(1),
.second > div:nth-child(1),
.third > div:nth-child(1),
.four > div:nth-child(1) {
  margin: 5px 10px 0 0;
  width: 2rem;
}

.firstNo,
.secondNo,
.thirdNo,
.fourNo {
  background: #e7e7e7;
  color: #adadad;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.firstNo > div:nth-child(1),
.secondNo > div:nth-child(1),
.thirdNo > div:nth-child(1),
.fourNo > div:nth-child(1) {
  margin: 5px 10px 0 0;
  width: 2rem;
}

.uploadWidth >>> .el-upload {
  width: 60px;
  height: 60px;
  position: relative;
}

.addPeople {
  background: #fa6060;
  width: 135px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  text-align: center;
  line-height: 40px;
  font-size: 15px;
  cursor: pointer;
  margin-top: 20px;
}

.kcImg {
  width: 60px;
  margin-left: 10px;
}

.zyImg {
  width: 55px;
  margin: 0 10px;
}

.deleteZy {
  width: 20px;
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.kcImg > img,
.zyImg > img,
.deleteZy > img {
  width: 100%;
  height: 100%;
}

.zyBox {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #67d37d;
  color: #fff;
  width: 210px;
  margin: 20px 20px 0 0;
  border-radius: 10px;
  height: 70px;
  position: relative;
}

.upCss {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.upCss >>> .el-icon-plus {
  position: none !important;
  width: 200px;
  height: 100px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed #ccc;
  min-width: 78px;
  min-height: 100px;
  z-index: 999;
}

.addStageImg {
  min-width: 25px;
  min-height: 25px;
  width: 25px;
  height: 25px;
  cursor: pointer;
}

.addHW {
  width: 28px;
  height: 28px;
  cursor: pointer;
}

.addStageImg > img,
.addHW > img {
  width: 100%;
  height: 100%;
}

.addNewPP >>> .el-dialog__body {
  padding: 5px 20px;
}

.isHeight {
  height: 680px;
}
.toolChoose {
  display: flex;
  /* width: 100%; */
  flex-direction: row;
  flex-wrap: wrap;
}
.tool {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: fit-content;
  margin: 10px 0 10px 0;
  align-items: center;
}
.tool + .tool {
  margin-right: 45px;
}
.whiteBIcon {
  width: 80px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}
.whiteBIcon > img,
.check > img,
.toolIcon > img,
.arrow > img {
  width: 100%;
  height: 100%;
}
.whiteBIcon > img {
  box-shadow: 0px 4px 8px 0px rgb(44 133 255 / 14%);
  border-radius: 15px;
}
.check {
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin: 10px 0;
}
.customWidth >>> .el-dialog {
  min-width: 500px !important;
}
.a_addBox {
  margin: 10px 0;
  background: #fff;
  padding: 15px;
  max-height: 400px;
  overflow: auto;
}
.a_add_box {
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}

.a_add_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
  font-size: 18px;
}
.a_add_head .a_add_head_input {
  width: 300px;
}
.a_add_head .a_add_head_div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.a_add_body {
  display: flex;
  align-items: center;
}
.a_add_input {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.width100 {
  width: 100%;
}
.a_add_input .a_add_persent {
  width: 100%;
}
.a_add_persent_div {
  width: 100%;
  display: flex;
  align-items: center;
}
.a_add_persent_div span {
  margin: 5px 0;
}
.a_add_persent_div span:nth-child(1) {
  width: 30%;
}
.a_add_persent_div span:nth-child(2) {
  width: 7%;
}
.a_add_persent_div span:nth-child(3) {
  width: 40%;
}

.a_add_body_div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.all_choose {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.all_choose > span {
  width: 80px;
  display: block;
  letter-spacing: 14px;
}
.all_choose >>> .el-checkbox-group {
  display: flex;
  flex-direction: row;
  width: 820px;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  margin-top: 3px;
}
.all_choose > .el-checkbox-group >>> .el-checkbox {
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.all_choose > .el-checkbox-group > .el-checkbox >>> .el-checkbox__label {
  min-width: 80px;
  overflow: hidden;
  width: 80px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.all_choose > .el-checkbox-group > .el-checkbox >>> .el-checkbox__label:hover {
  width: auto;
}

.choose > div:nth-child(3) > span {
  letter-spacing: 0 !important;
}

.choose {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: space-evenly;
  align-items: flex-start;
}
.both {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: 350px;
  align-items: center;
  justify-content: flex-start;
}
.notice >>> .el-dialog {
  width: 500px !important;
  text-align: center;
}
.notice >>> .el-button {
  margin-top: 20px;
}
.whiteBg {
  background: #fff;
  border-radius: 10px;
  min-width: 800px;
}
.chooseWho {
  display: flex;
  width: 250px;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding-bottom: 10px;
}
.chooseWho > div {
  cursor: pointer;
  padding-bottom: 10px;
  font-weight: bold;
}
.isChooseActive {
  color: #3e88f4;
  border-bottom: 2px solid #2f80f3;
}
.toolSort {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  min-width: 685px;
}
.toolSort > div {
  margin-right: 45px;
}
.tools {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.leftTools,
.rightTools {
  width: 50%;
}
.rightTools {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
}
.firstToolList {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}
.iconList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  margin: 20px 0 5px 0;
  width: 240px;
  min-width: 240px;
}
.iconTool {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  margin: 15px 10px;
}
.toolIcon {
  width: 50px;
}
.taskBorder {
  border: 1px solid #e1e1e1;
  border-radius: 10px;
  margin-top: 20px;
  min-height: 1160px;
  position: relative;
  background: #fbfbfb;
}
.smallTaskBorder {
  height: 170px;
  min-height: 170px !important;
  overflow: hidden;
}
.taskBorder > div {
  padding: 30px 0 10px 30px;
}
.addTaskBorder {
  border: 2px solid #e1e1e1;
  border-radius: 10px;
  margin-top: 25px;
  cursor: pointer;
}
.addTaskBorder > div {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.addTaskBorder > div > img {
  width: 100px;
}
.addTaskBorder > div > span {
  font-size: 23px;
  color: #dbdbdb;
}
.funBlock {
  display: flex;
  padding: 15px 0;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  right: 15px;
  bottom: 35px;
}

.fold {
  display: flex;
  margin: 0 10px;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}

.arrow {
  width: 15px;
  height: 15px;
  margin-left: 10px;
}
.addToolFun {
  display: flex;
  width: 150px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: 1px dashed;
  border-radius: 5px;
  height: 50px;
  margin: 35px auto 0;
  cursor: pointer;
}

.addToolImg {
  width: 30px;
  height: 30px;
  margin-right: 20px;
}

.addToolsDia >>> .el-dialog__body {
  padding: 20px;
}
.addToolsDia >>> .el-dialog__body > .toolChoose {
  padding: 0;
}
.addToolsDia >>> .el-dialog__body > .toolChoose > .leftTools {
  padding: 0;
  border-bottom: none;
  margin-bottom: 0;
}
.addToolsDia >>> .el-dialog__body > .toolChoose > .leftTools > .chooseWho {
  width: 100%;
}
.lineCss >>> .el-form-item__label {
  width: auto !important;
}
.lineCss >>> .el-form-item__content {
  margin-left: 50px !important;
}
.newSteps {
  display: flex;
  width: 100% !important;
  height: 80px;
  cursor: pointer;
  margin: 10px 0;
  border-radius: 10px;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
  margin: 0 !important;
}

/* 评价样式 */
.elist_css {
  margin-bottom: 60px;
}
.elist_title {
  margin-bottom: 10px;
}
.elist_input {
}
.elist_input_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.elist_input_box + .elist_input_box {
  margin-top: 30px;
}
.elist_input .elist_input_box input {
  font: inherit;
  color: currentColor;
  width: 200px;
  padding: 8px 14px;
  display: block;
  min-width: 0;
  outline: none;
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 4px;
  box-sizing: border-box;
  background: #fff;
  margin: 0 20px 0 0;
}
.elist_input .elist_input_box span {
  height: 36px;
  line-height: 36px;
  color: rgb(82, 82, 82);
}

.elist_input .elist_input_box .remove {
  height: 20px;
  width: 20px;
  background-size: 100% 100%;
  background-position: unset;
  margin-left: 5px;
}

.elist_input_box >>> .el-rate {
  display: flex;
  height: 36px;
  align-items: center;
}

.elist_input_box .elist_inptu_text {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.elist_input_box .elist_inptu_text input {
  width: 500px;
}

.elist_input_box >>> .el-rate__icon {
  font-size: 24px;
}

.elist_btn {
  margin-top: 10px;
}

.lineTitle {
  font-size: 1.5em;
  font-weight: bold;
  margin-top: 15px;
  width: 110px;
  min-width: 110px;
}
.courseTop {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  background: rgb(255, 255, 255);
  border-radius: 10px;
}
.stepsNav {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border-radius: 80px;
  box-shadow: 0px 1px 2px 3px #f2f2f2;
  margin: 30px 20px 20px 45px;
  min-width: 420px;
}
.rightBox {
  width: calc(83% - 25px);
  background: rgb(255, 255, 255);
  border-radius: 10px;
  min-height: 550px;
  min-width: 700px;
  height: 700px;
  overflow: auto;
}
</style>