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

<template>
  <div class="pb_content">
    <div class="pb_content_body" style="position: relative">
      <div class="right">
        <div
          style="
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            width: 100%;
            background: #fff;
            border-radius: 10px;
          "
        >
          <div
            style="
              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;
            "
          >
            <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">
          <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-if="steps == 2" class="second" @click="navSteps(2)">
              <div>
                <img src="../../assets/icon/second.png" alt />
              </div>
              <div>选择文档模板</div>
            </div>
            <div v-else class="secondNo" @click="navSteps(2)">
              <div>
                <img src="../../assets/icon/secondNo.png" alt />
              </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
            style=" width: calc(100% - 17% - 25px);
              background: #fff;
              border-radius: 10px;
              min-height: 550px;
              min-width: 800px;"
            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">
                      <span style="color: red">*</span>课程封面
                    </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="margin: 0 80px">
                      <div class="bInfo_title">
                        <!-- <span style="color: red">*</span>选择项目成员 -->
                        选择项目成员
                      </div>
                      <div
                        class="addPeople"
                        @click="addPP"
                        v-if="this.checkboxList.length == 0"
                      >添加成员</div>
                      <div class="addPeople" @click="addPP" v-else>已添加，点击查看</div>
                    </div>
                    <div style="flex: 0.5 1 0%; margin-top: 30px">
                      <div class="bInfo_title">协同编辑</div>
                      <div
                        class="addPeople"
                        @click="dialogVisible4 = true"
                        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 class="bInfo_title">
                  <span style="color: red">*</span>简要描述
                </div>
                <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
            style="
              width: calc(100% - 17% - 25px);
              background: #fff;
              border-radius: 10px;
              min-height: 550px;
              min-width: 800px;
            "
            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 class="checkword">
                    <img
                      src="../../assets/icon/checked.png"
                      alt
                      v-if="clearArray.indexOf(aa.id) == 0"
                    />
                    <img src="../../assets/icon/check.png" alt v-else />
                  </div>
                </div>
                <div
                  class="wordTeacher"
                  @click="checkTemplate1(myWord)"
                  v-if="cid != '' && cid != undefined"
                >
                  <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 class="checkword">
                    <img
                      src="../../assets/icon/checked.png"
                      alt
                      v-if="
                        cid != '' && cid != undefined && clearArray.length == 0
                      "
                    />
                    <img src="../../assets/icon/check.png" alt v-else />
                  </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 == 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
                        style="
                          font-weight: unset;
                          font-size: 1.3rem;
                          width: 110px;
                          color: #b7b7b7;
                        "
                      >任务 {{ itemTaskIndex + 1 }}</div>
                      <div
                        class="chapter_contentbox"
                        style="
                          flex-direction: row;
                          justify-content: flex-start;
                          align-items: center;
                        "
                      >
                        <div
                          style="
                            font-weight: unset;
                            font-size: 1.3rem;
                            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>
                      <div style="margin: 30px 0 10px; font-size: 16px">任务描述</div>
                      <div>
                        <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
                        style="
                          font-size: 1.5em;
                          font-weight: bold;
                          margin-top: 15px;
                          width: 110px;
                          min-width: 110px;
                        "
                      >任务学习</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"
                                class="chapter_upload_l_i5"
                                style="margin-right: 4px"
                              ></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
                                  )
                                "
                              >
                                <div></div>
                              </div>
                            </div>
                            <div class="chapter_upload_n">
                              <input
                                v-if="item1.type == 2 || item1.type == 3"
                                :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-else
                                style="
                                  border: none;
                                  outline: none;
                                  width: 55%;
                                  minwidth: 215px;
                                "
                                readonly="true"
                                @click="selectAttText(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, 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>
                    </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
                        style="
                          font-size: 1.5em;
                          font-weight: bold;
                          margin-top: 15px;
                        "
                      >任务过程</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
                          style="
                            display: flex;
                            flex-direction: row;
                            align-items: baseline;
                            flex-wrap: nowrap;
                            justify-content: flex-start;
                            position: relative;
                          "
                        >
                          <div style="margin-right: 20px">工具 {{ 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>
                          <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 != 8"
                                />
                                <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 != 7"
                                />
                                <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 != 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 != 2"
                                />
                                <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 != 6"
                                />
                                <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 != 3"
                                />
                                <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 != 5"
                                />
                                <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 != 4"
                                />
                                <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="itemTool.toolDetail"
                          />
                        </div>
                      </div>
                      <div class="addToolFun" @click="addToolFun(itemTaskIndex)">
                        <div class="addToolImg">
                          <img src="../../assets/icon/add.png" alt />
                        </div>
                        <div>添加工具</div>
                      </div>
                    </div>
                  </div>
                  <el-switch
                    v-model="
                      unitJson[unitIndex].chapterInfo[0].taskJson[taskCount]
                        .isShowTools
                    "
                    active-text="是否开启评价"
                    style="margin: 30px 0px 10px 0; padding-bottom: 30px"
                  ></el-switch>
                  <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 />
                  </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="dialogVisible4 = true">邀请老师协同编辑</div>
                <div class="attend_others" @click="goCourse">预览课程</div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="line"></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="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"
    >
      <!-- v-for="(item, index) in unitJson[unitIndex].chapterInfo[0].taskJson[taskCount].toolChoose"
      :key="index"-->
      <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="800px"
      :before-close="handleClose"
      class="dialog_diy notice"
    >
      <div>此功能暂未开放！</div>
      <el-button type="primary" @click="dialogVisible4 = false">确定</el-button>
    </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: "",
      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,
      publicTool: 0,
      searchPeople: "",
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      cid: this.$route.query.cid != "" ? this.$route.query.cid : "",
      cover: [], //课程封面
      myWord: [],
      askJson: {
        askCount: 1,
        askTitle: "",
        askJson: [{ askstitle: "", askItem: 1, checkList: [] }],
      },
      unitJson: [
        {
          dyName: "", //单元标题
          // dyText: "",
          // startTime: "", //开始时间
          // endTime: "", //结束时间
          // isTalk: false, //是否开启评价
          chapterInfo: [
            {
              isread: false,
              chapterid: this.guid(),
              title: "",
              courseName: "",
              taskJson: [
                {
                  task: "",
                  taskDetail: "",
                  chapterData: [],
                  toolText: "",
                  toolChoose: [
                    {
                      tool: null,
                      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,
              // question: "",
              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,
    };
  },
  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) {
        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) {
        // window.location.href =
        //   "./course.vue?userid=" + this.userid + "&oid=" + this.oid;
        this.goTo("/course?userid=" + this.userid + "&oid=" + this.oid);
      } else {
        this.steps--;
      }
    },
    navSteps(s) {
      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;
      }
    },
    nextSteps() {
      if (this.steps == 1) {
        if (
          this.courseName != "" &&
          this.courseText != "" &&
          this.cover.length != 0
        ) {
          this.steps++;
        } else {
          this.$message.error("请将信息填写完整");
          return;
        }
      } else if (this.steps == 2) {
        if (this.templateC.id != "" || this.templateC.id != undefined) {
          // this.$message.error("请选择文档");
          // return;
          this.cTemplate = this.templateC.content;
        }
        // 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.courseText == "" ||
            this.cover.length == 0
          ) {
            this.$message.error("请将信息填写完整");
            return;
          } else {
            this.addWork();
            this.steps++;
          }
        } else {
          if (
            this.courseName == "" ||
            this.courseText == "" ||
            this.cover.length == 0
          ) {
            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);
            // var a = 0;
            // if (_this.unitIndex > 0) {
            //   a = _this.unitIndex - 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;
          });
      }
    },

    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();
    },
    addAttText(i) {
      this.AttText = {};
      this.AttText.index = i;
      this.AttTextType = 0;
      this.dialogVisible6 = 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: "", //单元标题
        // dyText: "",
        // startTime: "", //开始时间
        // endTime: "", //结束时间
        // isTalk: false, //是否开启评价
        chapterInfo: [
          {
            isread: false,
            chapterid: this.guid(),
            title: "",
            courseName: "",
            taskJson: [
              {
                task: "",
                taskDetail: "",
                chapterData: [],
                toolText: "",
                toolChoose: [
                  {
                    tool: null,
                    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,
            // question: "",
            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: null,
        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: null,
            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 = {
        cn: this.searchPeople,
        oid: this.oid,
        uid: this.userid,
      };
      this.ajax
        .get(this.$store.state.api + "selectProjectStudent", params)
        .then((res) => {
          this.studentJuri = res.data[0];
        })
        .catch((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) {
      // window.U.UF.EV.stopBubble();
      e.stopPropagation();
      this.unitJson[i].chapterInfo[j].taskJson[
        this.taskCount
      ].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() {
      let params = [
        {
          uid: this.userid,
          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),
          template: this.cTemplate,
          courseType: JSON.stringify(this.courseTypeId),
        },
      ];
      this.ajax
        // .post(this.$store.state.api + "addWork", params)
        .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() {
      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),
          template: 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;
        })
        .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 + "getTemplateT", "")
        .then((res) => {
          this.templateArray = res.data[0];
        })
        .catch((err) => {});
    },
    clearChoose() {
      this.clearArray.splice(this.templateC.id, 1);
      this.dialogVisible2 = false;
    },
    clearAttText() {
      this.AttText = {};
      this.dialogVisible6 = false;
    },
    checkTemplate(res) {
      this.clearArray.push(res.id);
      this.templateC = res;
      this.cTemplate = res.content;
      this.dialogVisible2 = true;
    },
    checkTemplate1(w) {
      this.clearArray.splice(0, this.clearArray.length);
      this.templateC.title = "我的文档";
      this.cTemplate = w != "undefined" ? w : "";
      this.dialogVisible2 = true;
    },
    wordNext() {
      //   this.cTemplate = this.templateC.content;
      //   this.steps++;
      this.dialogVisible2 = false;
    },
    isAddOrUpdateAttText() {
      if (this.AttTextType == 0) {
        this.addAttTextMessage();
      } else {
        this.updateAttText();
      }
    },
    addAttTextMessage() {
      this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
        this.AttText.index
      ].chapterData.push({
        name: this.AttText.title,
        url: this.AttText.text,
        type: 6,
      });
      this.imgChange1(null, null, 6, this.AttText.index);
      this.dialogVisible6 = false;
    },
    selectAttText(i) {
      this.dialogVisible6 = true;
      this.AttText.title = this.unitJson[
        this.unitIndex
      ].chapterInfo[0].taskJson[this.AttText.index].chapterData[i].name;
      this.AttText.text = this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
        this.AttText.index
      ].chapterData[i].url;
      this.AttTextIndex = i;
      this.AttTextType = 1;
    },
    updateAttText() {
      this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
        this.AttText.index
      ].chapterData[this.AttTextIndex].name = this.AttText.title;

      this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
        this.AttText.index
      ].chapterData[this.AttTextIndex].url = this.AttText.text;
      this.dialogVisible6 = false;
    },
    addPP() {
      this.dialogVisible3 = true;
    },
    goTo(path) {
      this.$router.push(path);
    },
    openTools(itemTaskIndex, i, toolIndex) {
      // if (i == 1) {
      //   window.parent.postMessage({ tools: "1" }, "*");
      // } else if (i == 2) {
      //   window.parent.postMessage({ tools: "2" }, "*");
      // } else if (i == 3) {
      //   window.parent.postMessage({ tools: "3" }, "*");
      // } else if (i == 4) {
      //   window.parent.postMessage({ tools: "4" }, "*");
      // }
      // // else if(i == 5){
      // //   window.parent.postMessage({ tools: "5" }, "*");
      // // }
      // else {
      //   window.parent.postMessage({ tools: "6" }, "*");
      // }
      if (i == 4) {
        this.taskCount = itemTaskIndex;
        this.toolIndex = toolIndex;
        this.askJson = this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
          itemTaskIndex
        ].toolChoose[toolIndex];
        this.dialogVisible5 = true;
      }
    },
    addTools(i, itemTaskIndex, toolIndex) {
      if (
        this.unitJson[this.unitIndex].chapterInfo[0].taskJson[itemTaskIndex]
          .toolChoose[toolIndex].tool == null
      ) {
        this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
          itemTaskIndex
        ].toolChoose[toolIndex].tool = i;
      } else {
        if (
          this.unitJson[this.unitIndex].chapterInfo[0].taskJson[itemTaskIndex]
            .toolChoose[toolIndex].tool != null &&
          this.unitJson[this.unitIndex].chapterInfo[0].taskJson[itemTaskIndex]
            .toolChoose[toolIndex].tool != i
        ) {
          this.$message({
            message: "每个工具只能添加一个",
            type: "error",
          });
        } else {
          this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
            itemTaskIndex
          ].toolChoose[toolIndex].tool = null;
        }
      }
      this.$forceUpdate();
    },
    // cleanAsk(p) {
    //   if (this.unitJson[this.unitIndex].chapterInfo[0].askCount == 1) {
    //     this.unitJson[this.unitIndex].chapterInfo[0].toolChoose.splice(
    //       this.unitJson[this.unitIndex].chapterInfo[0].toolChoose.indexOf(p),
    //       1
    //     );
    //     this.unitJson[this.unitIndex].chapterInfo[0].askTitle = "";
    //     this.unitJson[this.unitIndex].chapterInfo[0].askJson = [];
    //     this.unitJson[this.unitIndex].chapterInfo[0].askJson.push({
    //       askstitle: "",
    //       askItem: 1,
    //       checkList: [],
    //     });
    //     this.dialogVisible5 = false;
    //   } else {
    //     this.dialogVisible5 = false;
    //   }
    // },
    addAskList() {
      // this.askJson.checkJson.push({
      //   checkCount: [],
      //   checkPerent: [],
      // });
      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() {
      // this.unitJson[this.unitIndex].chapterInfo[0].taskJson[this.taskCount]
      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;
          }
          // if (a > 1) {
          //   aj.splice(i, 1);
          // }
        } 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;
            }
            // if (element == "") {
            //   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;
      });
      this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
        this.taskCount
      ].toolChoose[this.toolIndex] = this.askJson;
      this.dialogVisible5 = false;
    },
    selectCourseDetail() {
      if (this.cid == "" || this.cid == undefined) {
        console.log("这是新增课程");
      } else {
        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);
            // this.unitJson[0].chapterInfo = 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.unitJson[0].dyText = "";
            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;
            // this.CourseType[0] = res.data[1];
            // this.selectType();
            for (var i = 0; i < res.data[1].length; i++) {
              // this.courseTypeId[this.CourseType[0][i].typePid] =
              //   this.CourseType[0][i].typeid;
              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);
        });
    },
  },
  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 {
  /* background: #fff; */
  /* height: 100%; */
  height: auto !important;
  margin: 20px 20px 20px 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: 16px;
  text-align: left;
  margin-top: 20px;
  margin-bottom: 10px;
}

.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;
  padding-bottom: 20px;
}

.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;
}
.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%;
}
.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_l {
  /* width: 50px;
								  height: 50px;
								  border-right: 1px solid #eee;
								  float: left; */
}
.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: 20px;
  cursor: pointer;
}
.chapter_upload_l_i1 {
  background-image: url("../../assets/icon/video.png");
  width: 28px;
  height: 28px;
  /* margin: 10px auto 0 auto; */
  background-size: 100% 100%;
}
.chapter_upload_l_i5 {
  background-image: url("../../assets/icon/word.png");
  width: 24px;
  height: 24px;
  /* margin: 10px auto 0 auto; */
  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;
  max-height: 700px;
}

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

.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-upload {
								  margin-right: 30px;
								} */

.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: 70px;
  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%;
}
.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;
  /* flex-direction: column; */
  /* width: 100%; */
}
.width100 {
  width: 100%;
}
.a_add_input .a_add_persent {
  /* display: flex; */
  /* flex-direction: column; */
  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_persent_title {
  /* margin-bottom: 10px; */
}
.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;
}
.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;
}
.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;
  /* transition: all .5s; */
}
.smallTaskBorder {
  height: 135px;
  min-height: 135px !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 {
  width: 100px;
  margin: 0 auto;
}
.addTaskBorder > div > img {
  width: 100%;
  height: 100%;
}
.funBlock {
  display: flex;
  padding: 15px 0;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  right: 15px;
  bottom: 35px;
}
.funBlockTop {
  /* top: 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;
}
</style>