EvenManage/src/components/pages/race/addRace/raceOverview.vue

<template>
  <!-- 项目概况 -->
  <div class="pb_content">
    <div class="race_content_body">
      <div class="raceBox">
        <div class="stepBg">
          <!-- <div class="steps">
            <div>
              <img src="../../../../assets/icon/race/progress.png" alt="" />
            </div>
            <div class="stepRightNav">
              <div>项目简介</div>
              <div>说明</div>
            </div>
          </div> -->
          <div class="steps">
            <div>
              <img src="../../../../assets/icon/race/progress.png" alt="" />
            </div>
            <div class="stepRightNav" @click="jump('first')">
              <div>驱动问题</div>
              <div class="isFinishCss" v-if="raceOver.driQuestion.brief != ''">
                <div class="isFinish">
                  <img src="../../../../assets/icon/race/finish.png" alt="" />
                </div>
                <div>已填写</div>
              </div>
            </div>
          </div>
          <div class="steps">
            <div>
              <img src="../../../../assets/icon/race/progress.png" alt="" />
            </div>
            <div class="stepRightNav" @click="jump('second')">
              <div>学习目标</div>
              <div class="isFinishCss" v-if="raceOver.tarDesign.brief != ''">
                <div class="isFinish">
                  <img src="../../../../assets/icon/race/finish.png" alt="" />
                </div>
                <div>已填写</div>
              </div>
            </div>
          </div>
          <div class="steps">
            <div>
              <img src="../../../../assets/icon/race/progress.png" alt="" />
            </div>
            <div class="stepRightNav" @click="jump('third')">
              <div>评价设计</div>
              <div class="isFinishCss" v-if="raceOver.actiDesign.brief != ''">
                <div class="isFinish">
                  <img src="../../../../assets/icon/race/finish.png" alt="" />
                </div>
                <div>已填写</div>
              </div>
            </div>
          </div>
          <!-- <div class="steps">
            <div>
              <img src="../../../../assets/icon/race/progress.png" alt="" />
            </div>
            <div class="stepRightNav">
              <div>平台案例实施（选填）</div>
              <div>协同人员</div>
            </div>
          </div>
          <div class="steps">
            <div>
              <img src="../../../../assets/icon/race/progress.png" alt="" />
            </div>
            <div class="stepRightNav">
              <div>案例评审</div>
              <div>评审状态、反馈</div>
            </div>
          </div> -->
        </div>
        <div class="right">
          <div class="whiteBg">
            <div class="firstTop">
              <div class="right_title" id="first">驱动问题</div>
              <!-- <div class="rightNav">
                可包括阶段性问题和学科问题：阶段性问题是指在核心问题解决的不同阶段，通过提出驱动性问题，明确阶段子任务。学科问题是指从不同学科的角度以及分解和提出要研究解决的主要问题。
              </div> -->
            </div>
            <div class="basic_box1">
              <div class="editorCss">
                <editor-bar
                  v-model="raceOver.driQuestion.brief"
                  @change="upRaceOver"
                  :placeholder="'问题贯穿项⽬式学习始终。在项⽬实践过程中，围绕项⽬核⼼问题的探究，拆分出若⼲⼦问题，进⽽明确项⽬的不同阶段及其⼦任务。另外，还要从学科的⻆度，结合学科核⼼概念以及学科独特的核⼼思想⽅法，分解和提出要研究解决的驱动问题。如果项⽬是跨学科探究，则需要考虑到不同学科视⻆及跨学科⼤概念。'"
                ></editor-bar>
                <div
                  class="fullCss"
                  @click="
                    fullTools(
                      raceOver.driQuestion.brief,
                      1,
                      '问题贯穿项⽬式学习始终。在项⽬实践过程中，围绕项⽬核⼼问题的探究，拆分出若⼲⼦问题，进⽽明确项⽬的不同阶段及其⼦任务。另外，还要从学科的⻆度，结合学科核⼼概念以及学科独特的核⼼思想⽅法，分解和提出要研究解决的驱动问题。如果项⽬是跨学科探究，则需要考虑到不同学科视⻆及跨学科⼤概念。'
                    )
                  "
                >
                  全屏编辑
                  <!-- <img
                    src="../../../../assets/full.png"
                    class="full"
                    @click="
                      fullTools(
                        raceOver.driQuestion.brief,
                        1,
                        '可包括阶段性问题和学科问题：阶段性问题是指在核心问题解决的不同阶段，通过提出驱动性问题，明确阶段子任务。学科问题是指从不同学科的角度以及分解和提出要研究解决的主要问题。'
                      )
                    "
                  /> -->
                </div>
              </div>
              <div>
                <div class="basic_box">
                  <!-- <div class="lineBox">
                    <div class="lineTitle">附件内容</div>
                    <div class="strLine"></div>
                  </div> -->
                  <div>
                    <div
                      class="add_chapters_box"
                      v-if="
                        raceOver.driQuestion.data &&
                        raceOver.driQuestion.data.length == 0
                      "
                    ></div>
                    <div
                      v-else
                      class="add_chapters_box"
                      style="display: flex; flex-direction: column"
                    >
                      <transition-group tag="div">
                        <div
                          class="chapter_upload"
                          v-for="(item, index) in raceOver.driQuestion.data"
                          :key="item.id"
                          draggable="true"
                          @dragstart="handleDragStart($event, item)"
                          @dragover.prevent="handleDragOver($event, item)"
                          @dragenter="handleDragEnter($event, item)"
                          @dragend="handleDragEnd($event, item, 0)"
                        >
                          <div class="chapter_upload_t"></div>
                          <div class="chapter_upload_o">
                            <div class="chapter_upload_l">
                              <div
                                v-if="item.type == 2"
                                class="chapter_upload_l_i1"
                              ></div>
                              <div
                                v-if="item.type == 1 || item.type == 3"
                                class="chapter_upload_l_i5"
                              ></div>
                            </div>
                            <div class="chapter_upload_ic">
                              <div class="chapter_upload_ic_l"></div>
                              <div
                                class="chapter_upload_ic_r"
                                @click.stop="
                                  deleteChapterData($event, index, 0)
                                "
                              >
                                <div></div>
                              </div>
                            </div>
                            <div class="chapter_upload_n">
                              <input
                                class="first"
                                v-if="item.type == 1 || item.type == 3"
                                :placeholder="item.name"
                              />
                              <input
                                class="first"
                                v-if="item.type == 2"
                                :placeholder="item.name"
                              />
                              <div class="chapter_upload_ud">
                                <div
                                  class="chapter_upload_up"
                                  @click="upCd($event, index, 0)"
                                ></div>
                                <div
                                  class="chapter_upload_down"
                                  @click="downCd($event, index, 0)"
                                ></div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </transition-group>
                    </div>
                  </div>
                  <div class="add_info_box">
                    <div class="upTips">
                      <button class="info_btn" @click="addImg($event)">
                        上传附件
                        <input
                          type="file"
                          accept="application/pdf, application/.ppt, .ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document,video/mp4, video/quicktime, video/x-msvideo,image/*"
                          style="display: none"
                          @change="beforeUpload($event, null, 0)"
                        />
                      </button>
                      <div>
                        上传文件PPT、Word限制为10M，Excel、PDF上传限制为5M,其他文件不限制大小。
                      </div>
                    </div>
                  </div>
                  <div v-if="raceOver.driQuestion.data.proVisible" class="mask">
                    <div class="progressBox">
                      <!-- <div id="closePro" class="closeCss">
                        <img
                          src="../../../../assets/icon/proClose.png"
                          alt=""
                        />
                      </div> -->
                      <div class="lbox">
                        <img
                          src="../../../../assets/loading.gif"
                        />上传中，请稍后
                      </div>
                      <div>
                        <div>
                          {{ raceOver.driQuestion.data.isFinishSize }}M /
                          {{
                            raceOver.driQuestion.data.isAllSize
                              ? raceOver.driQuestion.data.isAllSize
                              : 0
                          }}M
                        </div>
                      </div>
                      <el-progress
                        :text-inside="true"
                        :stroke-width="20"
                        :percentage="
                          raceOver.driQuestion.data.progress
                            ? raceOver.driQuestion.data.progress
                            : 0
                        "
                        style="width: 80%"
                      ></el-progress>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="whiteBg">
            <div class="firstTop">
              <div class="right_title" id="second">学习目标</div>
              <!-- <div class="rightNav">
                学习目标提倡用核心素养来分类概括再描述，具体表述时应行为化、具体化、操作化，可以用“通过什么，达到什么，培养什么”的句式来进行表述
              </div> -->
            </div>
            <div class="basic_box1">
              <div class="editorCss">
                <editor-bar
                  v-model="raceOver.tarDesign.brief"
                  @change="upRaceOver"
                  :placeholder="'学习目标提倡用核心素养来分类概括再描述，具体表述时应行为化、具体化、操作化，可以用“通过什么，达到什么，培养什么”的句式来进行表述。'"
                ></editor-bar>
                <div
                  class="fullCss"
                  @click="
                    fullTools(
                      raceOver.tarDesign.brief,
                      2,
                      '学习目标提倡用核心素养来分类概括再描述，具体表述时应行为化、具体化、操作化，可以用“通过什么，达到什么，培养什么”的句式来进行表述。'
                    )
                  "
                >
                  全屏编辑
                  <!-- <img
                    src="../../../../assets/full.png"
                    class="full"
                    @click="
                      fullTools(
                        raceOver.tarDesign.brief,
                        2,
                        '学习目标提倡用核心素养来分类概括再描述，具体表述时应行为化、具体化、操作化，可以用“通过什么，达到什么，培养什么”的句式来进行表述'
                      )
                    "
                  /> -->
                </div>
              </div>
              <div>
                <div class="basic_box">
                  <div class="lineBox">
                    <div class="lineTitle">附件内容</div>
                    <div class="strLine"></div>
                  </div>
                  <div>
                    <div
                      class="add_chapters_box"
                      v-if="
                        raceOver.tarDesign.data &&
                        raceOver.tarDesign.data.length == 0
                      "
                    ></div>
                    <div
                      v-else
                      class="add_chapters_box"
                      style="display: flex; flex-direction: column"
                    >
                      <transition-group tag="div">
                        <div
                          class="chapter_upload"
                          v-for="(item1, index1) in raceOver.tarDesign.data"
                          :key="item1.id"
                          draggable="true"
                          @dragstart="handleDragStart($event, item1)"
                          @dragover.prevent="handleDragOver($event, item1)"
                          @dragenter="handleDragEnter($event, item1)"
                          @dragend="handleDragEnd($event, item1, 1)"
                        >
                          <div class="chapter_upload_t"></div>
                          <div class="chapter_upload_o">
                            <div class="chapter_upload_l">
                              <div
                                v-if="item1.type == 2"
                                class="chapter_upload_l_i1"
                              ></div>
                              <div
                                v-if="item1.type == 1 || item1.type == 3"
                                class="chapter_upload_l_i5"
                              ></div>
                            </div>
                            <div class="chapter_upload_ic">
                              <div class="chapter_upload_ic_l"></div>
                              <div
                                class="chapter_upload_ic_r"
                                @click.stop="
                                  deleteChapterData($event, index1, 1)
                                "
                              >
                                <div></div>
                              </div>
                            </div>
                            <div class="chapter_upload_n">
                              <input
                                class="first"
                                v-if="item1.type == 1 || item1.type == 3"
                                :placeholder="item1.name"
                              />
                              <input
                                class="first"
                                v-if="item1.type == 2"
                                :placeholder="item1.name"
                              />
                              <div class="chapter_upload_ud">
                                <div
                                  class="chapter_upload_up"
                                  @click="upCd($event, index1, 1)"
                                ></div>
                                <div
                                  class="chapter_upload_down"
                                  @click="downCd($event, index1, 1)"
                                ></div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </transition-group>
                    </div>
                  </div>
                  <div class="add_info_box">
                    <div class="upTips">
                      <button class="info_btn" @click="addImg($event)">
                        上传附件
                        <input
                          type="file"
                          accept="application/pdf, application/.ppt, .ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document,video/mp4, video/quicktime, video/x-msvideo,image/*"
                          style="display: none"
                          @change="beforeUpload($event, null, 1)"
                        />
                      </button>
                      <div>
                        上传文件PPT、Word限制为10M，Excel、PDF上传限制为5M,其他文件不限制大小。
                      </div>
                    </div>
                  </div>
                  <div v-if="raceOver.tarDesign.data.proVisible" class="mask">
                    <div class="progressBox">
                      <!-- <div id="closePro1" class="closeCss">
                        <img
                          src="../../../../assets/icon/proClose.png"
                          alt=""
                        />
                      </div> -->
                      <div class="lbox">
                        <img
                          src="../../../../assets/loading.gif"
                        />上传中，请稍后
                      </div>
                      <div>
                        <div>
                          {{ raceOver.tarDesign.data.isFinishSize }}M /
                          {{
                            raceOver.tarDesign.data.isAllSize
                              ? raceOver.tarDesign.data.isAllSize
                              : 0
                          }}M
                        </div>
                      </div>
                      <el-progress
                        :text-inside="true"
                        :stroke-width="20"
                        :percentage="
                          raceOver.tarDesign.data.progress
                            ? raceOver.tarDesign.data.progress
                            : 0
                        "
                        style="width: 80%"
                      ></el-progress>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="whiteBg">
            <div class="firstTop">
              <div class="right_title" id="third">评价设计</div>
              <!-- <div class="rightNav">
                项目学习评价方式需要体现过程性评价与总结性评价相结合，积极使用表现性评价。本次征集案例中，需要将学生的作品和报告作为附件呈现作品评价。
              </div> -->
            </div>
            <div class="basic_box1">
              <div class="editorCss">
                <editor-bar
                  v-model="raceOver.actiDesign.brief"
                  @change="upRaceOver"
                  :placeholder="'项目学习评价方式需要体现过程性评价与总结性评价相结合，积极使用表现性评价。本次征集案例中，需要将学生的作品和报告作为附件呈现作品评价。'"
                ></editor-bar>
                <div
                  class="fullCss"
                  @click="
                    fullTools(
                      raceOver.actiDesign.brief,
                      3,
                      '项目学习评价方式需要体现过程性评价与总结性评价相结合，积极使用表现性评价。本次征集案例中，需要将学生的作品和报告作为附件呈现作品评价。'
                    )
                  "
                >
                  全屏编辑
                  <!-- <img
                    src="../../../../assets/full.png"
                    class="full"
                    @click="
                      fullTools(
                        raceOver.actiDesign.brief,
                        3,
                        '项目学习评价方式需要体现过程性评价与总结性评价相结合，积极使用表现性评价。本次征集案例中，需要将学生的作品和报告作为附件呈现作品评价。'
                      )
                    "
                  /> -->
                </div>
              </div>
              <div>
                <div class="basic_box">
                  <div class="lineBox">
                    <div class="lineTitle">附件内容</div>
                    <div class="strLine"></div>
                  </div>
                  <div>
                    <div
                      class="add_chapters_box"
                      v-if="
                        raceOver.actiDesign.data &&
                        raceOver.actiDesign.data.length == 0
                      "
                    ></div>
                    <div
                      v-else
                      class="add_chapters_box"
                      style="display: flex; flex-direction: column"
                    >
                      <transition-group tag="div">
                        <div
                          class="chapter_upload"
                          v-for="(item2, index2) in raceOver.actiDesign.data"
                          :key="item2.id"
                          draggable="true"
                          @dragstart="handleDragStart($event, item2)"
                          @dragover.prevent="handleDragOver($event, item2)"
                          @dragenter="handleDragEnter($event, item2)"
                          @dragend="handleDragEnd($event, item2, 2)"
                        >
                          <div class="chapter_upload_t"></div>
                          <div class="chapter_upload_o">
                            <div class="chapter_upload_l">
                              <div
                                v-if="item2.type == 2"
                                class="chapter_upload_l_i1"
                              ></div>
                              <div
                                v-if="item2.type == 1 || item2.type == 3"
                                class="chapter_upload_l_i5"
                              ></div>
                            </div>
                            <div class="chapter_upload_ic">
                              <div class="chapter_upload_ic_l"></div>
                              <div
                                class="chapter_upload_ic_r"
                                @click.stop="
                                  deleteChapterData($event, index2, 2)
                                "
                              >
                                <div></div>
                              </div>
                            </div>
                            <div class="chapter_upload_n">
                              <input
                                class="first"
                                v-if="item2.type == 1 || item2.type == 3"
                                :placeholder="item2.name"
                              />
                              <input
                                class="first"
                                v-if="item2.type == 2"
                                :placeholder="item2.name"
                              />
                              <div class="chapter_upload_ud">
                                <div
                                  class="chapter_upload_up"
                                  @click="upCd($event, index2, 2)"
                                ></div>
                                <div
                                  class="chapter_upload_down"
                                  @click="downCd($event, index2, 2)"
                                ></div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </transition-group>
                    </div>
                  </div>
                  <div class="add_info_box">
                    <div class="upTips">
                      <button class="info_btn" @click="addImg($event)">
                        上传附件
                        <input
                          type="file"
                          accept="application/pdf, application/.ppt, .ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document,video/mp4, video/quicktime, video/x-msvideo,image/*"
                          style="display: none"
                          @change="beforeUpload($event, null, 2)"
                        />
                      </button>
                      <div>
                        上传文件PPT、Word限制为10M，Excel、PDF上传限制为5M,其他文件不限制大小。
                      </div>
                    </div>
                  </div>
                  <div v-if="raceOver.actiDesign.data.proVisible" class="mask">
                    <div class="progressBox">
                      <!-- <div id="closePro2" class="closeCss">
                        <img
                          src="../../../../assets/icon/proClose.png"
                          alt=""
                        />
                      </div> -->
                      <div class="lbox">
                        <img
                          src="../../../../assets/loading.gif"
                        />上传中，请稍后
                      </div>
                      <div>
                        <div>
                          {{ raceOver.actiDesign.data.isFinishSize }}M /
                          {{
                            raceOver.actiDesign.data.isAllSize
                              ? raceOver.actiDesign.data.isAllSize
                              : 0
                          }}M
                        </div>
                      </div>
                      <el-progress
                        :text-inside="true"
                        :stroke-width="20"
                        :percentage="
                          raceOver.actiDesign.data.progress
                            ? raceOver.actiDesign.data.progress
                            : 0
                        "
                        style="width: 80%"
                      ></el-progress>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="添加富文本"
      :visible.sync="dialogVisible"
      :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"
            @input="change1"
            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="dialogVisible1"
      :append-to-body="true"
      width="500px"
      :before-close="handleClose"
      class="dialog_diy lineCss"
    >
      <el-form>
        <el-form-item label="链接" :label-width="formLabelWidth">
          <span>
            <el-input
              placeholder="请输入链接"
              clearable
              v-model="line"
              class="add_input"
            ></el-input>
          </span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="clearLine">取 消</el-button>
        <el-button type="primary" @click="isAddOrUpdateLine">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="编辑富文本"
      :visible.sync="full"
      :append-to-body="true"
      width="100%"
      :before-close="handleClose"
      class="dialog_diy fullEditor"
    >
      <editor-bar v-model="fullBrief" :placeholder="plaText"></editor-bar>
      <span slot="footer" class="dialog-footer">
        <el-button @click="full = false">取 消</el-button>
        <el-button type="primary" @click="addFullText">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import EditorBar from "../../../tools/wangEnduit";
export default {
  components: { EditorBar },
  props: ["raceOverView"],
  data() {
    return {
      chapterData: [],
      formLabelWidth: "100px",
      noneBtnImg: false,
      raceOver: {
        driQuestion: { brief: "", data: [] },
        tarDesign: { brief: "", data: [] },
        actiDesign: { brief: "", data: [] },
      },
      AttText: {},
      task: 0,
      AttTextType: 0,
      AttTextIndex: 0,
      dialogVisible: false,
      dialogVisible1: false,
      full: false,
      line: "",
      lineCount: 0,
      fullBrief: "",
      plaText: "",
      isBrief: 0,
      ending: null,
      dragging: null,
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
    change(val) {
      console.log(val);
    },

    handleDragStart(e, item) {
      this.dragging = item;
    },
    handleDragEnd(e, item, t) {
      if (this.ending.id === this.dragging.id) {
        return;
      }
      let newItems;
      if (t == 0) {
        newItems = [...this.raceOver.driQuestion.data];
      } else if (t == 1) {
        newItems = [...this.raceOver.tarDesign.data];
      } else {
        newItems = [...this.raceOver.actiDesign.data];
      }
      const src = newItems.indexOf(this.dragging);
      const dst = newItems.indexOf(this.ending);
      newItems.splice(src, 1, ...newItems.splice(dst, 1, newItems[src]));
      console.log(newItems);

      if (t == 0) {
        this.raceOver.driQuestion.data = newItems;
      } else if (t == 1) {
        this.raceOver.tarDesign.data = newItems;
      } else {
        this.raceOver.actiDesign.data = newItems;
      }

      this.$nextTick(() => {
        this.dragging = null;
        this.ending = null;
      });
    },
    handleDragOver(e) {
      // 首先把div变成可以放置的元素，即重写dragenter/dragover
      // 在dragenter中针对放置目标来设置
      e.dataTransfer.dropEffect = "move";
    },
    handleDragEnter(e, item) {
      // 为需要移动的元素设置dragstart事件
      e.dataTransfer.effectAllowed = "move";
      this.ending = item;
    },

    jump(t) {
      var a = document.getElementById(t);
      var b = document.getElementsByClassName("right")[0];
      b.scrollTop = a.offsetTop - 30;
    },
    change1(val) {
      console.log(val);
      this.$forceUpdate();
    },
    upFullBrief() {},
    addImg(e) {
      var el = e.currentTarget;
      el.getElementsByTagName("input")[0].click();
      e.target.value = "";
    },
    imgChange(file, fileList, type, jT) {
      if (jT == 0) {
        var _tmp = this.raceOver.driQuestion.data;
      } else if (jT == 1) {
        var _tmp = this.raceOver.tarDesign.data;
      } else {
        var _tmp = this.raceOver.actiDesign.data;
      }

      this.noneBtnImg = _tmp.length >= 1;
    },
    deleteChapterData(e, i, t) {
      e.stopPropagation();
      if (t == 0) {
        this.raceOver.driQuestion.data.splice(i, 1);
      } else if (t == 1) {
        this.raceOver.tarDesign.data.splice(i, 1);
      } else {
        this.raceOver.actiDesign.data.splice(i, 1);
      }
    },
    beforeUpload(event, type, jsonType) {
      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 type1 = type;
      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
      var _this = this;
      var b = [
        "DOC",
        "DOCX",
        "DOCM",
        "DOTM",
        "DOTX",
        "PPTX",
        "PPSX",
        "PPT",
        "PPS",
        "PPTM",
        "POTM",
        "PPAM",
        "POTX",
        "PPSM",
      ];
      var c = ["PDF", "DOT", "DOC", "DOCX", "PPT", "PPTX", "XLSX", "XLS"];
      var d = [
        "BMP",
        "PJP",
        "APNG",
        "PNG",
        "JPG",
        "GIF",
        "SVG",
        "JPEG",
        "JPG",
        "ICO",
        "PGPEG",
        "AVIF",
      ];
      if (
        b.indexOf(
          file.name
            .split(".")
            [file.name.split(".").length - 1].toLocaleUpperCase()
        ) != -1
      ) {
        if (file.size / 1024 / 1024 > 10) {
          this.$message.error("上传文件大于10M，请重新选择文件！");
          return;
        }
      } else if (
        c.indexOf(
          file.name
            .split(".")
            [file.name.split(".").length - 1].toLocaleUpperCase()
        ) != -1
      ) {
        if (file.size / 1024 / 1024 > 5) {
          this.$message.error("添加的上传文件大于5M，请重新选择文件！");
          return;
        }
      } else if (
        file.name
          .split(".")
          [file.name.split(".").length - 1].toLocaleUpperCase() == "MP4" ||
        file.name
          .split(".")
          [file.name.split(".").length - 1].toLocaleUpperCase() == "M4V"
      ) {
        if (file.size / 1024 / 1024 > 760) {
          this.$message.error("添加的上传文件大于760M，请重新选择文件！");
          return;
        }
      }

      if (
        c.indexOf(
          file.name
            .split(".")
            [file.name.split(".").length - 1].toLocaleUpperCase()
        ) != -1
      ) {
        type1 = 1;
      } else if (
        d.indexOf(
          file.name
            .split(".")
            [file.name.split(".").length - 1].toLocaleUpperCase()
        ) != -1
      ) {
        type1 = 3;
      } else {
        type1 = 2;
      }

      if (jsonType == 0) {
        _this.raceOver.driQuestion.data.progress = 0;
        _this.raceOver.driQuestion.data.proVisible = true;
        _this.raceOver.driQuestion.data.isFinishSize = 0;
        _this.raceOver.driQuestion.data.isAllSize = 0;
        var a = (file.size / 1024 / 1024).toFixed(2);
        _this.raceOver.driQuestion.data.isAllSize = a - 0;
      } else if (jsonType == 1) {
        _this.raceOver.tarDesign.data.progress = 0;
        _this.raceOver.tarDesign.data.proVisible = true;
        _this.raceOver.tarDesign.data.isFinishSize = 0;
        _this.raceOver.tarDesign.data.isAllSize = 0;
        var a = (file.size / 1024 / 1024).toFixed(2);
        _this.raceOver.tarDesign.data.isAllSize = a - 0;
      } else {
        _this.raceOver.actiDesign.data.progress = 0;
        _this.raceOver.actiDesign.data.proVisible = true;
        _this.raceOver.actiDesign.data.isFinishSize = 0;
        _this.raceOver.actiDesign.data.isAllSize = 0;
        var a = (file.size / 1024 / 1024).toFixed(2);
        _this.raceOver.actiDesign.data.isAllSize = a - 0;
      }
      _this.$forceUpdate();
      if (file) {
        var params = {
          Key:
            file.name.split(".")[0] +
            new Date().getTime() +
            "." +
            file.name.split(".")[file.name.split(".").length - 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) + '%');
            if (jsonType == 0) {
              _this.raceOver.driQuestion.data.isFinishSize = (
                evt.loaded /
                1024 /
                1024
              ).toFixed(2);
              _this.raceOver.driQuestion.data.progress = parseInt(
                (evt.loaded / evt.total) * 100
              );
            } else if (jsonType == 1) {
              _this.raceOver.tarDesign.data.isFinishSize = (
                evt.loaded /
                1024 /
                1024
              ).toFixed(2);
              _this.raceOver.tarDesign.data.progress = parseInt(
                (evt.loaded / evt.total) * 100
              );
            } else {
              _this.raceOver.actiDesign.data.isFinishSize = (
                evt.loaded /
                1024 /
                1024
              ).toFixed(2);
              _this.raceOver.actiDesign.data.progress = parseInt(
                (evt.loaded / evt.total) * 100
              );
            }
            _this.$forceUpdate();
          })
          .send(function (err, data) {
            if (jsonType == 0) {
              _this.raceOver.driQuestion.data.progress = 100;
            } else if (jsonType == 1) {
              _this.raceOver.tarDesign.data.progress = 100;
            } else {
              _this.raceOver.actiDesign.data.progress = 100;
            }
            _this.raceOver.actiDesign.data.isFinishSize = _this.raceOver.actiDesign.data.isAllSize;
            _this.$forceUpdate();
            setTimeout(() => {
              if (jsonType == 0) {
                _this.raceOver.driQuestion.data.proVisible = false;
              } else if (jsonType == 1) {
                _this.raceOver.tarDesign.data.proVisible = false;
              } else {
                _this.raceOver.actiDesign.data.proVisible = false;
              }
              _this.$forceUpdate();
            }, 1000);
            if (err) {
              _this.$message.error("上传失败");
            } else {
              if (jsonType == 0) {
                _this.raceOver.driQuestion.data.push({
                  name: file.name,
                  url: data.Location,
                  type: type1,
                  id: "driData" + _this.raceOver.driQuestion.data.length,
                });
                _this.imgChange(null, null, type1, jsonType);
              } else if (jsonType == 1) {
                _this.raceOver.tarDesign.data.push({
                  name: file.name,
                  url: data.Location,
                  type: type1,
                  id: "tarData" + _this.raceOver.tarDesign.data.length,
                });
                _this.imgChange(null, null, type1, jsonType);
              } else {
                _this.raceOver.actiDesign.data.push({
                  name: file.name,
                  url: data.Location,
                  type: type1,
                  id: "actData" + _this.raceOver.actiDesign.data.length,
                });
                _this.imgChange(null, null, type1, jsonType);
              }
              console.log(data.Location);
            }
          });
      }
    },
    upRaceOver() {
      this.$emit("upRaceOver", this.raceOver);
    },
    addAttText(i) {
      this.AttText = {
        title: "",
        text: "",
      };
      this.task = i;
      this.AttTextType = 0;
      this.$forceUpdate();
      this.dialogVisible = true;
    },
    clearAttText() {
      this.AttText = {
        title: "",
        text: "",
      };
      this.dialogVisible = false;
    },
    isAddOrUpdateAttText() {
      if (this.AttTextType == 0) {
        this.addAttTextMessage();
      } else {
        this.updateAttText();
      }
    },
    addAttTextMessage() {
      if (this.task == 0) {
        this.raceOver.driQuestion.data.push({
          name: this.AttText.title,
          url: this.AttText.text,
          type: 3,
        });
        this.imgChange(null, null, 3, this.task);
      } else if (this.task == 1) {
        this.raceOver.tarDesign.data.push({
          name: this.AttText.title,
          url: this.AttText.text,
          type: 3,
        });
        this.imgChange(null, null, 3, this.task);
      } else {
        this.raceOver.actiDesign.data.push({
          name: this.AttText.title,
          url: this.AttText.text,
          type: 3,
        });
        this.imgChange(null, null, 3, this.task);
      }
      this.dialogVisible = false;
      this.upRaceOver();
    },
    updateAttText() {
      if (this.task == 0) {
        this.raceOver.driQuestion.data[this.AttTextIndex].name =
          this.AttText.title;
        this.raceOver.driQuestion.data[this.AttTextIndex].url =
          this.AttText.text;
      } else if (this.task == 1) {
        this.raceOver.tarDesign.data[this.AttTextIndex].name =
          this.AttText.title;
        this.raceOver.tarDesign.data[this.AttTextIndex].url = this.AttText.text;
      } else {
        this.raceOver.actiDesign.data[this.AttTextIndex].name =
          this.AttText.title;
        this.raceOver.actiDesign.data[this.AttTextIndex].url =
          this.AttText.text;
      }
      this.dialogVisible = false;
      this.upRaceOver();
    },
    selectAttText(t, i) {
      if (t == 0) {
        this.AttText.title = this.raceOver.driQuestion.data[i].name;
        this.AttText.text = this.raceOver.driQuestion.data[i].url;
      } else if (t == 1) {
        this.AttText.title = this.raceOver.tarDesign.data[i].name;
        this.AttText.text = this.raceOver.tarDesign.data[i].url;
      } else {
        this.AttText.title = this.raceOver.actiDesign.data[i].name;
        this.AttText.text = this.raceOver.actiDesign.data[i].url;
      }
      this.task = t;
      this.AttTextIndex = i;
      this.AttTextType = 1;
      this.dialogVisible = true;
    },
    openLine(i) {
      this.line = "";
      this.task = i;
      this.lineCount = i;
      this.lineType = 0;
      this.$forceUpdate();
      this.dialogVisible1 = true;
    },
    clearLine() {
      this.line = "";
      this.dialogVisible1 = false;
    },
    isAddOrUpdateLine() {
      if (this.lineType == 0) {
        this.addLine();
      } else {
        this.updateLine();
      }
    },
    addLine() {
      if (this.task == 0) {
        this.raceOver.driQuestion.data.push({
          name: "链接",
          url: this.line,
          type: 4,
        });
        this.imgChange(null, null, 4, this.task);
      } else if (this.task == 1) {
        this.raceOver.tarDesign.data.push({
          name: "链接",
          url: this.line,
          type: 4,
        });
        this.imgChange(null, null, 4, this.task);
      } else {
        this.raceOver.actiDesign.data.push({
          name: "链接",
          url: this.line,
          type: 4,
        });
        this.imgChange(null, null, 4, this.task);
      }

      this.dialogVisible1 = false;
      this.upRaceOver();
    },
    updateLine() {
      if (this.task == 0) {
        this.raceOver.driQuestion.data[this.lineCount].url = this.line;
      } else if (this.task == 1) {
        this.raceOver.tarDesign.data[this.lineCount].url = this.line;
      } else {
        this.raceOver.actiDesign.data[this.lineCount].url = this.line;
      }
      this.dialogVisible1 = false;
      this.upRaceOver();
    },
    selectLine(t, i) {
      if (t == 0) {
        this.line = this.raceOver.driQuestion.data[i].url;
      } else if (t == 1) {
        this.line = this.raceOver.tarDesign.data[i].url;
      } else {
        this.line = this.raceOver.actiDesign.data[i].url;
      }
      this.task = t;
      this.lineCount = i;
      this.lineType = 1;
      this.dialogVisible1 = true;
    },
    fullTools(b, t, text) {
      this.fullBrief = b;
      this.isBrief = t;
      this.plaText = text;
      this.full = !this.full;
    },
    addFullText() {
      if (this.isBrief == 1) {
        this.raceOver.driQuestion.brief = this.fullBrief;
      } else if (this.isBrief == 2) {
        this.raceOver.tarDesign.brief = this.fullBrief;
      } else if (this.isBrief == 3) {
        this.raceOver.actiDesign.brief = this.fullBrief;
      }
      this.isBrief = 0;
      this.fullBrief = "";
      this.plaText = "";
      this.full = !this.full;
      this.upRaceOver();
    },
    upCd(e, i, t) {
      e.stopPropagation();
      if (i == 0) {
        return;
      }
      var c;
      if (t == 0) {
        c = this.raceOverView.driQuestion.data;
      } else if (t == 1) {
        c = this.raceOverView.tarDesign.data;
      } else {
        c = this.raceOverView.actiDesign.data;
      }
      var a = c[i - 1];
      c[i - 1] = c[i];
      c[i] = a;
      this.$forceUpdate();
    },
    downCd(e, i, t) {
      e.stopPropagation();
      var c;
      if (t == 0) {
        c = this.raceOverView.driQuestion.data;
      } else if (t == 1) {
        c = this.raceOverView.tarDesign.data;
      } else {
        c = this.raceOverView.actiDesign.data;
      }
      if (i == c.length - 1) {
        return;
      }
      var a = c[i + 1];
      c[i + 1] = c[i];
      c[i] = a;
      this.$forceUpdate();
    },
  },
  created() {
    this.raceOver.driQuestion = this.raceOverView.driQuestion;
    this.raceOver.tarDesign = this.raceOverView.tarDesign;
    this.raceOver.actiDesign = this.raceOverView.actiDesign;
  },
};
</script>

<style scoped>
@media screen and (max-width: 1280px) {
  .fullCss {
    right: 15% !important;
  }
  .fullEditor >>> .el-dialog__footer {
    padding: 4% 20px 20px !important;
  }
  .upTips {
    align-items: flex-start !important;
  }
}
.dialog_diy >>> .el-dialog__header {
  background: #3c3c3c !important;
  padding: 15px 20px;
}
.dialog_diy >>> .el-dialog__title {
  color: #fff;
}
.pb_content {
  width: 100%;
  height: 100%;
}
.race_content_body {
  width: 100%;
  position: relative;
  margin: 0;
  height: 100%;
}

.raceBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.stepBg {
  font-size: 16px;
  padding: 80px 0 0 0;
  margin: 0 25px 0 0;
  width: 15%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  background: #fff;
  /* min-height: 800px; */
  height: calc(100% - 80px);
  border-radius: 15px;
  overflow: auto;
  min-width: 260px;
  flex-direction: column;
}
.steps {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  position: relative;
  width: 210px;
  height: 130px;
}
.steps > div:nth-child(1) > img {
  z-index: 9;
  position: relative;
}
.stepLeft,
.isSteps {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  border: 2px solid #eee;
  color: #c0c0c0;
}

.isSteps {
  background: #1990ff;
  color: #fff;
  border: none;
}

.stepRightNav {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  margin: 10px 0 0 10px;
  height: 40px;
  cursor: pointer;
}
.stepRightNav > div {
  margin-bottom: 5px;
}
.stepRightNav:hover {
  color: #999;
}
.line,
.isLine {
  position: absolute;
  width: 5px;
  height: 50px;
  border-left: 1px solid #dadada;
  top: 38px;
  left: 15px;
}

.isLine {
  border-left: 1px solid #1d92ff !important;
}

.right {
  width: 100%;
  background: rgb(255, 255, 255);
  border-radius: 10px;
  overflow: auto;
  height: 100%;
  border-radius: 15px;
  /* max-height: 800px; */
}

.allBox {
  padding: 25px;
}

.allBox > div:nth-child(1) {
  color: #0f40f5;
  font-size: 18px;
  font-weight: bold;
}

.raceTop > div:nth-child(2) {
  width: 80%;
  margin-top: 10px;
}

.titleTop {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
}

.titleTop > div:nth-child(2) {
  width: 82%;
  margin-left: 20px;
}

.editorCss {
  width: 90% !important;
}

.basic_box {
  position: relative;
  margin: 0;
  min-height: 0;
  width: 90%;
}
.basic_box1 {
  margin: 10px auto;
  position: relative;
  padding: 0 20px 0 20px;
}
.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: 125px;
  overflow-y: auto;
  overflow-x: hidden;
}

.chapter_upload {
  height: 50px;
  margin-top: 8px;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 50px;
  transition: all linear 0.3s;
}

.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;
  width: 100%;
}

.chapter_upload_o {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

.chapter_upload_ic {
  height: 30px;
  float: right;
  cursor: pointer;
  position: absolute;
  width: 45px;
  right: 0;
  top: 0;
}

.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;
  position: absolute;
}

.chapter_upload_ic_r div {
  width: 25px;
  height: 25px;
  background-image: url("../../../../assets/delete.png");
  background-size: 100% 100%;
}

.chapter_upload_n {
  display: flex;
  text-indent: 10px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 55%;
  margin-left: 10px;
  cursor: pointer;
  margin-top: 2px;
}

.chapter_upload_l_i1 {
  background-image: url("../../../../assets/icon/video.png");
  width: 28px;
  height: 28px;
  background-size: 100% 100%;
}

.chapter_upload_l_i5 {
  background-image: url("../../../../assets/icon/word.png");
  width: 24px;
  height: 24px;
  background-size: 100% 100%;
  margin-left: 1px;
}

.chapter_upload_l_i8 {
  background-image: url("../../../../assets/icon/line.png");
  width: 24px;
  height: 24px;
  background-size: 100% 100%;
  margin-left: 1px;
}

.chapter_upload_ud {
  display: flex;
  flex-direction: column;
  margin-left: 5px;
  justify-content: center;
  z-index: 99;
}

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

.chapter_upload_l {
  padding: 1px 0 0 10px;
}

.first {
  border: none;
  outline: none;
  width: 80%;
  min-width: 215px;
  z-index: 99;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info_btn {
  color: #fff;
  background-color: #0f7eff;
  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;
}

.info_btn:hover {
  background-color: #4f7cd5 !important;
}
.right_title {
  height: 30px;
  font-size: 1.5em;
  font-weight: bold;
  color: #0f7eff;
  width: 10%;
  min-width: 100px;
}
.whiteBg {
  background: #fff;
  border-radius: 10px;
}
.lineBox {
  display: flex;
  margin: 0 0 20px 0;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.lineTitle {
  margin-top: 15px;
  width: 110px;
}
.strLine {
  width: 85%;
  margin: 0 auto;
  border-top: 1px solid #e5e5e5;
  margin-top: 20px;
}
.stepBg .steps:nth-child(1) ::after,
.stepBg .steps:nth-child(2) ::after {
  content: "";
  height: 100%;
  background: #eee;
  width: 4px;
  position: absolute;
  left: 15px;
  top: calc(50% + (35px / 2));
  transform: translateY(-50%);
  z-index: 1;
}
.mask {
  background-color: rgb(0 0 0 / 30%);
  /* position: fixed; */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progressBox {
  width: 300px;
  height: 150px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 6px 1px #bfbfbf;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}

.progressBox >>> .el-progress-bar__outer {
  background-color: #d1dfff !important;
}

.progressBox .lbox {
  height: 60px;
  font-size: 19px;
  display: flex;
  align-items: center;
  color: #747474;
}

.progressBox .lbox img {
  width: 40px;
  margin-right: 20px;
}

.firstTop {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: 90%;
  padding: 20px 0 20px 20px;
}

.rightNav {
  width: 87%;
  color: #a19f9f;
}
.isFinishCss {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
}
.isFinishCss > div:nth-child(2) {
  margin-left: 5px;
  color: #939393;
}
.isFinish {
  width: 16px;
  height: 16px;
  margin-top: 5px;
}
.isFinish > img {
  width: 100%;
  height: 100%;
}
.full,
.closeImg {
  height: 22px;
  cursor: pointer;
  background: #000;
}
.fullCss {
  font-size: 12px;
  position: absolute;
  right: 14%;
  top: 12px;
  cursor: pointer;
}
.fullEditor >>> .text {
  height: 100% !important;
}
.fullEditor >>> .el-dialog {
  margin: 0 !important;
  height: 100%;
}
.fullEditor >>> .el-dialog__body {
  height: 70%;
}
.fullEditor >>> .editor {
  height: 100%;
}
.fullEditor >>> .el-dialog__footer {
  padding: 2% 20px 20px !important;
}
.upTips {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
}
.upTips > div {
  margin-left: 10px;
  color: #999;
  font-size: 14px;
}
.closeCss {
  position: absolute;
  top: 8px;
  right: 8px;
  cursor: pointer;
  width: 20px;
  height: 20px;
}
.closeCss > img {
  width: 100%;
  height: 100%;
}
</style>