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: 100%" v-if="this.steps == 1">
            <div class="whiteBg">
              <div class="basic_box">
                <div class="big_box">
                  <div class="left_first">
                    <div>
                      <div>
                        <div class="bInfo_title">
                          <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-select
                          v-model="courseTypeId[item.id]"
                          placeholder="请选择"
                          @change="getTypeName"
                        >
                          <el-option
                            v-for="item1 in CourseTypeJson[item.id]"
                            :key="item1.id"
                            :label="item1.name"
                            :value="item1.id"
                          >
                          </el-option>
                        </el-select> -->
                            <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 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' : 'cru_select'"
                    @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
                class="chapter_box"
                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 style="margin: 30px 0 10px; font-size: 18px">
                    阶段描述
                  </div>
                  <div>
                    <textarea
                      rows="6"
                      class="binfo_input"
                      cols=""
                      style="width: 80% !important; height: 90px"
                      v-model="unitJson[unitIndex].dyText"
                    ></textarea>
                  </div>
                  <el-switch
                    v-model="unitJson[unitIndex].isTalk"
                    active-text="是否开启评价"
                    style="margin: 25px 0px 0px 0"
                  >
                  </el-switch>
                </div>
                <div
                  style="
                    display: flex;
                    margin: 23px 0;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: center;
                  "
                >
                  <div
                    style="
                      font-size: 1.5em;
                      font-weight: bold;
                      margin-top: 15px;
                    "
                  >
                    添加提问
                  </div>
                  <div class="line"></div>
                </div>
                <div>
                  <input
                    type="text"
                    placeholder="请输入问题"
                    class="binfo_input"
                    v-model="unitJson[unitIndex].question"
                  />
                </div>
                <div
                  style="
                    display: flex;
                    margin: 23px 0;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: center;
                  "
                >
                  <div
                    style="
                      font-size: 1.5em;
                      font-weight: bold;
                      margin-top: 15px;
                    "
                  >
                    添加工具
                  </div>
                  <div class="line"></div>
                </div>
                <div class="toolChoose">
                  <div class="tool">
                    <div class="whiteBIcon" @click="addTools(1)">
                      <img src="../../assets/icon/whiteBordIcon.png" alt="" />
                    </div>
                    <div class="check">
                      <img
                        src="../../assets/icon/checkNo.png"
                        alt=""
                        v-if="item.toolChoose.indexOf(1) == -1"
                      />
                      <img
                        src="../../assets/icon/checkedIs.png"
                        alt=""
                        v-else
                      />
                    </div>
                  </div>
                  <div class="tool">
                    <div class="whiteBIcon" @click="addTools(2)">
                      <img src="../../assets/icon/noteIcon.png" alt="" />
                    </div>
                    <div class="check">
                      <img
                        src="../../assets/icon/checkNo.png"
                        alt=""
                        v-if="item.toolChoose.indexOf(2) == -1"
                      />
                      <img
                        src="../../assets/icon/checkedIs.png"
                        alt=""
                        v-else
                      />
                    </div>
                  </div>
                  <div class="tool">
                    <div class="whiteBIcon" @click="addTools(3)">
                      <img src="../../assets/icon/mindIcon.png" alt="" />
                    </div>
                    <div class="check">
                      <img
                        src="../../assets/icon/checkNo.png"
                        alt=""
                        v-if="item.toolChoose.indexOf(3) == -1"
                      />
                      <img
                        src="../../assets/icon/checkedIs.png"
                        alt=""
                        v-else
                      />
                    </div>
                  </div>
                  <div class="tool">
                    <div class="whiteBIcon" @click="addTools(4)">
                      <img src="../../assets/icon/askIcon.png" alt="" />
                    </div>
                    <div class="check">
                      <img
                        src="../../assets/icon/checkNo.png"
                        alt=""
                        v-if="item.toolChoose.indexOf(4) == -1"
                      />
                      <img
                        src="../../assets/icon/checkedIs.png"
                        alt=""
                        v-else
                      />
                    </div>
                  </div>
                  <!-- <div class="tool">
                    <div class="whiteBIcon" @click="addTools(5)">
                      <img src="../../assets/icon/scoreIcon.png" alt="" />
                    </div>
                    <div class="check">
                      <img
                        src="../../assets/icon/checkNo.png"
                        alt=""
                        v-if="item.toolChoose.indexOf(5) == -1"
                      />
                      <img
                        src="../../assets/icon/checkedIs.png"
                        alt=""
                        v-else
                      />
                    </div>
                  </div> -->
                  <div class="tool">
                    <div class="whiteBIcon" @click="addTools(6)">
                      <img src="../../assets/icon/wordIcon.png" alt="" />
                    </div>
                    <div class="check">
                      <img
                        src="../../assets/icon/checkNo.png"
                        alt=""
                        v-if="item.toolChoose.indexOf(6) == -1"
                      />
                      <img
                        src="../../assets/icon/checkedIs.png"
                        alt=""
                        v-else
                      />
                    </div>
                  </div>
                </div>
                <div
                  class="basic_box"
                  style="margin: 45px 0 0 15px; min-height: 0"
                >
                  <div
                    style="
                      display: flex;
                      margin: 15px 0;
                      flex-direction: row;
                      justify-content: flex-start;
                      align-items: center;
                    "
                  >
                    <div
                      style="
                        font-size: 1.5em;
                        font-weight: bold;
                        margin-top: 15px;
                      "
                    >
                      附件添加
                    </div>
                    <div class="line"></div>
                  </div>
                  <!-- <h3 class="info_title" style="margin: 0"></h3> -->

                  <div>
                    <div
                      class="add_chapters_box"
                      v-if="item.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 item.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"
                              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"
                            />

                            <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"
                        @change="beforeUpload2($event, unitIndex, 2)"
                      />
                    </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"
                        @change="beforeUpload2($event, unitIndex, 3)"
                      />
                    </button>
                  </div>
                </div>
                <div
                  class="basic_box"
                  style="margin: 45px 0 0 15px; min-height: 0"
                >
                  <div
                    style="
                      display: flex;
                      margin: 15px 0;
                      flex-direction: row;
                      justify-content: flex-start;
                      align-items: center;
                    "
                  >
                    <div
                      style="
                        font-size: 1.5em;
                        font-weight: bold;
                        margin-top: 15px;
                      "
                    >
                      作业设置
                    </div>
                    <div class="line"></div>
                  </div>
                  <div class="homework_box">
                    <div style="display: flex; justify-content: flex-start">
                      <div class="addHW" @click="addHw($event)">
                        <img src="../../assets/icon/addHW.png" alt="" />
                        <input
                          type="file"
                          style="display: none"
                          @change="beforeUpload2($event, unitIndex, 5)"
                        />
                      </div>
                      <div
                        class="zyBox"
                        v-for="(item2, index2) in item.homeworkList"
                        :key="index2"
                      >
                        <div
                          class="deleteZy"
                          @click="deleteHomeworkBox(unitIndex, index, index2)"
                        >
                          <img src="../../assets/icon/delete.png" alt="" />
                        </div>
                        <div class="zyImg">
                          <img src="../../assets/zy.png" alt="" />
                        </div>
                        <div
                          style="
                            width: 110px;
                            font-size: 15px;
                            overflow: hidden;
                            white-space: nowrap;
                          "
                        >
                          {{ item2.name }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="time">
                    <div class="small_title">
                      开始时间<span style="color: red">*</span>
                    </div>
                    <el-date-picker
                      v-model="unitJson[unitIndex].startTime"
                      type="date"
                      placeholder="选择日期"
                      style="margin-left: 5px"
                    >
                    </el-date-picker>
                    <div class="small_title" style="margin-left: 40px">
                      结束时间<span style="color: red">*</span>
                    </div>
                    <el-date-picker
                      v-model="unitJson[unitIndex].endTime"
                      type="date"
                      placeholder="选择日期"
                      style="margin-left: 5px"
                    >
                    </el-date-picker>
                  </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">邀请老师协同编辑</div>
                <div class="attend_others" @click="dialogVisible = true">
                  预览课程
                </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="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="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,
      courseName: "",
      isTeacherSee: false,
      courseText: "",
      formLabelWidth: "100px",
      uploadLoading1: false,
      noneBtnImg: false,
      updateBoolean2: false,
      unitIndex: 0,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: 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: [],
      unitJson: [
        {
          dyName: "", //单元标题
          dyText: "",
          startTime: "", //开始时间
          endTime: "", //结束时间
          isTalk: false, //是否开启评价
          chapterInfo: [
            {
              isread: false,
              chapterid: this.guid(),
              title: "",
              courseName: "",
              question: "",
              chapterData: [],
              toolChoose: [],
              askCount: 1,
              askTitle: "",
              askJson: [{ askstitle: "", askItem: 1, checkList: [] }],
              checkJson: [{ checkCount: [], checkPerent: [] }],
              itemCount: 1,
              fileList1: [],
              homeworkList: [],
              video: [],
              testData: [],
              pData: [],
              templateArray: [],
            },
          ],
        },
      ],
      studentJuri: [],
      checkboxList: [],
      number: "",
      tTitle: "",
      tdetail: "",
      templateC: {},
      cTemplate: "",
      CourseType: [],
      CourseTypeJson: {},
      courseTypeId: [],
      courseTypeSon: [],
      clearArray: [],
      loading:false,
    };
  },
  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) {
      if (type == 1) {
        var _tmp = this.cover;
      } else if (type == 2 || type == 3) {
        var _tmp = this.unitJson[this.unitIndex].chapterInfo[0].chapterData;
      } else if (type == 4) {
        var _tmp = this.unitJson[this.unitIndex].chapterInfo[0].fileList1;
      } else {
        var _tmp = this.unitJson[this.unitIndex].chapterInfo[0].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) {
        if (
          this.courseName != "" &&
          this.courseText != "" &&
          this.cover.length != 0 &&
          this.courseTypeId.length != 0 &&
          this.checkboxList.length != 0
        ) {
          this.steps = 2;
        } else {
          this.$message.error("请将信息填写完整");
        }
      }
      if (s == 3) {
        if (this.templateC.id != undefined) {
          this.cTemplate = this.templateC.content;
          this.dialogVisible2 = false;
          this.steps = 3;
        } else {
          this.$message.error("请选择文档");
          return;
        }
      }
    },
    nextSteps() {
      if (this.steps == 1) {
        if (
          this.courseName != "" &&
          this.courseText != "" &&
          this.cover.length != 0 &&
          this.courseTypeId.length != 0 &&
          this.checkboxList.length != 0
        ) {
          this.steps++;
        } else {
          this.$message.error("请将信息填写完整");
        }
      } else if (this.steps == 2) {
        if (this.templateC.id == "" || this.templateC.id == undefined) {
          this.$message.error("请选择文档");
          return;
        }
        this.cTemplate = this.templateC.content;
        this.dialogVisible2 = false;
        this.steps++;
      } else if (this.steps == 3) {
        if (this.cid == "" || this.cid == undefined) {
          this.addWork();
          this.steps++;
        } 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;
          });
      }
    },

    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();
    },
    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);
              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) {
      const loading = this.openLoading();
      var file = event.target.files[0];
      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 {
              if (type == 2 || type == 3) {
                _this.unitJson[unitIndex].chapterInfo[0].chapterData.push({
                  name: file.name,
                  url: data.Location,
                  uid: file.uid,
                  type: type,
                });
                _this.imgChange1(null, null, type);
              } else if (type == 4) {
                _this.unitJson[_this.unitIndex].chapterInfo[0].fileList1.push({
                  name: file.name,
                  url: data.Location,
                  uid: file.uid,
                });
                _this.imgChange1(null, null, type);
              } else if (type == 5) {
                _this.unitJson[
                  _this.unitIndex
                ].chapterInfo[0].homeworkList.push({
                  name: file.name,
                  url: data.Location,
                  uid: file.uid,
                });
                _this.imgChange1(null, null, type);
              }
              console.log(data.Location);
            }
          });
      }
    },
    addunit() {
      this.unitJson.push({
        dyName: "", //单元标题
        dyText: "",
        startTime: "", //开始时间
        endTime: "", //结束时间
        isTalk: false, //是否开启评价
        chapterInfo: [
          {
            isread: false,
            chapterid: this.guid(),
            title: "",
            courseName: "",
            question: "",
            chapterData: [],
            toolChoose: [],
            askCount: 1,
            askTitle: "",
            askJson: [{ askstitle: "", askItem: 1, checkList: [] }],
            checkJson: [{ checkCount: [], checkPerent: [] }],
            itemCount: 1,
            fileList1: [],
            homeworkList: [],
            video: [],
            testData: [],
            pData: [],
            templateArray: [],
          },
        ],
      });
    },
    add(e, i) {
      var el = e.currentTarget;
      el.getElementsByTagName("input")[0].click();
    },

    deleteHomeworkBox(unitIndex, index, i) {
      this.unitJson[unitIndex].chapterInfo[index].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].chapterData.splice(ic, 1);
    },
    updataVideoT(e, i, j, ic) {
      e.stopPropagation();
      this.unitJson[i].chapterInfo[j].chapterData[ic].name = e.target.value;
    },
    upCd(e, i, j, ic) {
      e.stopPropagation();
      if (ic == 0) {
        return;
      }
      var a = this.unitJson[i].chapterInfo[j].chapterData[ic - 1];
      this.unitJson[i].chapterInfo[j].chapterData[ic - 1] =
        this.unitJson[i].chapterInfo[j].chapterData[ic];
      this.unitJson[i].chapterInfo[j].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].chapterData[ic + 1];
      this.unitJson[i].chapterInfo[j].chapterData[ic + 1] =
        this.unitJson[i].chapterInfo[j].chapterData[ic];
      this.unitJson[i].chapterInfo[j].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.islogin = true;
        })
        .catch((err) => {
          this.$message.error("新增失败");
          console.error(err);
        });
    },
    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;
    },
    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;
      this.dialogVisible2 = true;
    },
    wordNext() {
      //   this.cTemplate = this.templateC.content;
      //   this.steps++;
      this.dialogVisible2 = false;
    },
    addPP() {
      this.dialogVisible3 = true;
    },
    goTo(path) {
      this.$router.push(path);
    },
    addTools(i) {
      if (this.unitJson[this.unitIndex].chapterInfo[0].toolChoose.length == 0) {
        this.unitJson[this.unitIndex].chapterInfo[0].toolChoose.push(i);
        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" }, "*");
        }
      } else {
        if (
          this.unitJson[this.unitIndex].chapterInfo[0].toolChoose.indexOf(i) !=
          -1
        ) {
          this.unitJson[this.unitIndex].chapterInfo[0].toolChoose.splice(
            this.unitJson[this.unitIndex].chapterInfo[0].toolChoose.indexOf(i),
            1
          );
        } else {
          this.unitJson[this.unitIndex].chapterInfo[0].toolChoose.push(i);
          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" }, "*");
          }
        }
      }
      this.$forceUpdate();
    },
    // cleanAsk(p) {
    //   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.dialogVisible4 = false;
    // },
    addAskList() {
      this.unitJson[this.unitIndex].chapterInfo[0].checkJson.push({
        checkCount: [],
        checkPerent: [],
      });
      this.unitJson[this.unitIndex].chapterInfo[0].askJson.push({
        askstitle: "",
        askItem: 1,
        checkList: [],
      });
      this.unitJson[this.unitIndex].chapterInfo[0].askCount++;
    },
    deleteAskList() {
      this.unitJson[this.unitIndex].chapterInfo[0].askJson.splice(-1);
      this.unitJson[this.unitIndex].chapterInfo[0].askCount--;
    },
    addcheckList(json) {
      json.checkList.length++;
      json.askItem++;
    },
    deletecheckList(json) {
      json.checkList.length--;
      json.askItem--;
    },
    addAsk() {
      if (this.unitJson[this.unitIndex].chapterInfo[0].askTitle === "") {
        this.$message.error("问卷调查标题不能为空！");
        return;
      }
      var aj = this.unitJson[this.unitIndex].chapterInfo[0].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.unitJson[this.unitIndex].chapterInfo[0].askJson = this.unitJson[
        this.unitIndex
      ].chapterInfo[0].askJson.filter((el) => {
        var elc = el.checkList.filter((element) => {
          return element != "";
        });
        return el.askstitle != "" && elc.length != 0;
      });
      this.dialogVisible4 = 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].toolChoose = this.unitJson[j]
                  .chapterInfo[i].toolChoose
                  ? this.unitJson[j].chapterInfo[i].toolChoose
                  : [];
              }
            }
            // this.unitJson[0].dyText = "";
            this.courseName = res.data[0][0].title;
            this.courseText = res.data[0][0].brief;
            this.checkboxList = JSON.parse(res.data[0][0].course_student);
            this.cover = JSON.parse(res.data[0][0].cover);
            this.noneBtnImg = this.cover.length >= 1;
            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%;
  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;
}

.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 {
  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) {
  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(242, 242, 242);
  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: center;
  flex-wrap: wrap;
  margin: 15px 0 0 0;
}

.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: 70%;
  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;
}
.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-left: 20px;
  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: 70px;
  height: 70px;
  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: 20%;
  margin: 0 20px;
  align-items: center;
}
.whiteBIcon {
  width: 150px;
  cursor: pointer;
}
.whiteBIcon > img,
.check > img {
  width: 100%;
  height: 100%;
}
.check {
  width: 25px;
  height: 25px;
  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;
}
.all_choose > .el-checkbox-group > .el-checkbox >>> .el-checkbox__label {
  min-width: 80px;
}
.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;
}
</style>