<template>
  <!-- 项目实施过程 -->
  <div class="pb_content">
    <div class="race_content_body">
      <div class="raceBox">
        <div class="stepBg">
          <div class="steps">
            <div class="stepLeft" :class="steps == 0 ? 'isSteps' : ''">1</div>
            <div class="stepRightNav">
              <div>活动1</div>
            </div>
            <div class="line" :class="steps == 0 ? 'isLine' : ''"></div>
          </div>
          <div class="steps">
            <div class="stepLeft" :class="steps == 1 ? 'isSteps' : ''">2</div>
            <div class="stepRightNav">
              <div>活动2</div>
            </div>
            <div class="line" :class="steps == 1 ? 'isLine' : ''"></div>
          </div>
          <div class="steps">
            <div class="stepLeft" :class="steps == 2 ? 'isSteps' : ''">3</div>
            <div class="stepRightNav">
              <div>活动3</div>
            </div>
            <div class="line" :class="steps == 2 ? 'isLine' : ''"></div>
          </div>
          <div class="steps">
            <div class="stepLeft" :class="steps == 3 ? 'isSteps' : ''">4</div>
            <div class="stepRightNav">
              <div>活动4</div>
            </div>
            <!-- <div class="line" :class="steps == 3 ? 'isLine' : ''"></div> -->
          </div>
        </div>
        <div class="right">
          <div
            class="raceProBox"
            v-for="(race, raIndex) in racePro.actBox"
            :key="raIndex"
          >
            <div class="raceTop allBox">
              <div style="color: #a1a4a8; font-size: 18px">
                活动{{ raIndex + 1 }}
              </div>
              <div class="titleTop">
                <div class="leftBox"></div>
                <div class="hdName">活动名称</div>
                <div style="width: 60%">
                  <el-input
                    v-model="race.actName"
                    placeholder="输入活动名称"
                    @input="upRacePro"
                  ></el-input>
                </div>
                <div
                  class="remove"
                  v-if="racePro.actBox.length > 1"
                  @click="deleteTask(raIndex)"
                  style="position: absolute; right: 0"
                ></div>
              </div>
            </div>
            <div class="raceTop allBox">
              <div class="titleTop">
                <div style="font-weight: bold">活动实施</div>
                <div>
                  <el-input
                    v-model="race.driQuestion.title"
                    placeholder="输入名称"
                    @input="upRacePro"
                  ></el-input>
                </div>
              </div>
              <div class="lineBox">
                <div class="lineTitle">活动描述</div>
                <div class="strLine"></div>
              </div>
              <div class="editorCss">
                <editor-bar
                  v-model="race.driQuestion.brief"
                  @change="upRacePro"
                ></editor-bar>
              </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="
                        race.driQuestion.data &&
                        race.driQuestion.data.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="(item, index) in race.driQuestion.data"
                        :key="item.id"
                      >
                        <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
                              v-if="item.type == 4"
                              class="chapter_upload_l_i8"
                              style="margin-left: 1px"
                            ></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, raIndex, 0)
                              "
                            >
                              <div></div>
                            </div>
                          </div>
                          <div class="chapter_upload_n">
                            <input
                              class="first"
                              v-if="item.type == 1"
                              :placeholder="item.name"
                            />
                            <input
                              class="first"
                              v-if="item.type == 2"
                              :placeholder="item.name"
                            />
                            <input
                              class="first"
                              :placeholder="item.name"
                              v-if="item.type == 3"
                              readonly="true"
                              @click="selectAttText(0, index)"
                            />
                            <input
                              class="first"
                              v-if="item.type == 4"
                              :placeholder="item.name"
                              @click="selectLine(0, index)"
                            />
                            <div class="chapter_upload_ud">
                              <div class="chapter_upload_up"></div>
                              <div class="chapter_upload_down"></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="add_info_box">
                    <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"
                        style="display: none"
                        @change="beforeUpload($event, null, raIndex, 0)"
                      />
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div class="raceTop allBox">
              <div class="titleTop">
                <div style="font-weight: bold">活动工具</div>
                <div>
                  <el-input
                    v-model="race.tarDesign.title"
                    placeholder="输入名称"
                    @input="upRacePro"
                  ></el-input>
                </div>
              </div>
              <div class="lineBox">
                <div class="lineTitle">活动描述</div>
                <div class="strLine"></div>
              </div>
              <div class="editorCss">
                <editor-bar
                  v-model="race.tarDesign.brief"
                  @change="upRacePro"
                ></editor-bar>
              </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="
                        race.tarDesign.data && race.tarDesign.data.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="(item, index) in race.tarDesign.data"
                        :key="item.id"
                      >
                        <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
                              v-if="item.type == 4"
                              class="chapter_upload_l_i8"
                              style="margin-left: 1px"
                            ></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, raIndex, 1)
                              "
                            >
                              <div></div>
                            </div>
                          </div>
                          <div class="chapter_upload_n">
                            <input
                              class="first"
                              v-if="item.type == 1"
                              :placeholder="item.name"
                            />
                            <input
                              class="first"
                              v-if="item.type == 2"
                              :placeholder="item.name"
                            />
                            <input
                              class="first"
                              :placeholder="item.name"
                              v-if="item.type == 3"
                              readonly="true"
                              @click="selectAttText(0, index)"
                            />
                            <input
                              class="first"
                              v-if="item.type == 4"
                              :placeholder="item.name"
                              @click="selectLine(0, index)"
                            />
                            <div class="chapter_upload_ud">
                              <div class="chapter_upload_up"></div>
                              <div class="chapter_upload_down"></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="add_info_box">
                    <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"
                        style="display: none"
                        @change="beforeUpload($event, null, raIndex, 1)"
                      />
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div class="raceTop allBox">
              <div class="titleTop">
                <div style="font-weight: bold">活动成果</div>
                <div>
                  <el-input
                    v-model="race.actiDesign.title"
                    placeholder="输入名称"
                    @input="upRacePro"
                  ></el-input>
                </div>
              </div>
              <div class="lineBox">
                <div class="lineTitle">活动描述</div>
                <div class="strLine"></div>
              </div>
              <div class="editorCss">
                <editor-bar
                  v-model="race.actiDesign.brief"
                  @change="upRacePro"
                ></editor-bar>
              </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="
                        race.actiDesign.data && race.actiDesign.data.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="(item, index) in race.actiDesign.data"
                        :key="item.id"
                      >
                        <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
                              v-if="item.type == 4"
                              class="chapter_upload_l_i8"
                              style="margin-left: 1px"
                            ></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, raIndex, 2)
                              "
                            >
                              <div></div>
                            </div>
                          </div>
                          <div class="chapter_upload_n">
                            <input
                              class="first"
                              v-if="item.type == 1"
                              :placeholder="item.name"
                            />
                            <input
                              class="first"
                              v-if="item.type == 2"
                              :placeholder="item.name"
                            />
                            <input
                              class="first"
                              :placeholder="item.name"
                              v-if="item.type == 3"
                              readonly="true"
                              @click="selectAttText(0, index)"
                            />
                            <input
                              class="first"
                              v-if="item.type == 4"
                              :placeholder="item.name"
                              @click="selectLine(0, index)"
                            />
                            <div class="chapter_upload_ud">
                              <div class="chapter_upload_up"></div>
                              <div class="chapter_upload_down"></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="add_info_box">
                    <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"
                        style="display: none"
                        @change="beforeUpload($event, null, raIndex, 2)"
                      />
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div class="raceTop allBox">
              <div class="titleTop">
                <div style="font-weight: bold">活动评价</div>
                <div>
                  <el-input
                    v-model="race.evaDesign.title"
                    placeholder="输入名称"
                    @input="upRacePro"
                  ></el-input>
                </div>
              </div>
              <div class="lineBox">
                <div class="lineTitle">活动描述</div>
                <div class="strLine"></div>
              </div>
              <div class="editorCss">
                <editor-bar
                  v-model="race.evaDesign.brief"
                  @change="upRacePro"
                ></editor-bar>
              </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="
                        race.evaDesign.data && race.evaDesign.data.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="(item, index) in race.evaDesign.data"
                        :key="item.id"
                      >
                        <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
                              v-if="item.type == 4"
                              class="chapter_upload_l_i8"
                              style="margin-left: 1px"
                            ></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, raIndex, 3)
                              "
                            >
                              <div></div>
                            </div>
                          </div>
                          <div class="chapter_upload_n">
                            <input
                              class="first"
                              v-if="item.type == 1"
                              :placeholder="item.name"
                            />
                            <input
                              class="first"
                              v-if="item.type == 2"
                              :placeholder="item.name"
                            />
                            <input
                              class="first"
                              :placeholder="item.name"
                              v-if="item.type == 3"
                              readonly="true"
                              @click="selectAttText(0, index)"
                            />
                            <input
                              class="first"
                              v-if="item.type == 4"
                              :placeholder="item.name"
                              @click="selectLine(0, index)"
                            />
                            <div class="chapter_upload_ud">
                              <div class="chapter_upload_up"></div>
                              <div class="chapter_upload_down"></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="add_info_box">
                    <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"
                        style="display: none"
                        @change="beforeUpload($event, null, raIndex, 3)"
                      />
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="addTaskBorder" @click="addTaskBorder">
            <div>
              <img src="../../../../assets/icon/addHw.png" alt />
              <span>添加活动</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EditorBar from "../../../tools/wangEnduit";
export default {
  components: { EditorBar },
  props:["raceProcess"],
  data() {
    return {
      steps: 0,
      racePro: {
        actBox: [
          {
            actName: "",
            driQuestion: { title: "", brief: "", data: [] },
            tarDesign: { title: "", brief: "", data: [] },
            actiDesign: { title: "", brief: "", data: [] },
            evaDesign: { title: "", brief: "", data: [] },
          },
        ],
      },
      driQuestion: "",
      chapterData: [],
    };
  },
  methods: {
    change(val) {
      console.log(val);
    },
    addImg(e) {
      var el = e.currentTarget;
      el.getElementsByTagName("input")[0].click();
    },
    getChapterData(e, i, j, ic, type) {
      e.stopPropagation();
      if ((type == 2 || type == 3) && e.target.tagName !== "INPUT") {
        console.log("还不能下载图片喔");
      }
    },
    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;
        }
      }
    },
    upRacePro() {
      this.$emit("upRacePro", this.racePro);
    },
    deleteChapterData(e, i, j, t) {
      e.stopPropagation();
      if (t == 0) {
        this.racePro.actBox[j].driQuestion.data.splice(i, 1);
      } else if (t == 1) {
        this.racePro.actBox[j].tarDesign.data.splice(i, 1);
      } else if (t == 2) {
        this.racePro.actBox[j].actiDesign.data.splice(i, 1);
      } else {
        this.racePro.actBox[j].evaDesign.data.splice(i, 1);
      }
      this.upRacePro();
    },
    imgChange(file, fileList, type, index, jT) {
      if (jT == 0) {
        var _tmp = this.racePro.actBox[index].driQuestion.data;
      } else if (jT == 1) {
        var _tmp = this.racePro.actBox[index].tarDesign.data;
      } else if (jT == 2) {
        var _tmp = this.racePro.actBox[index].actiDesign.data;
      } else {
        var _tmp = this.racePro.actBox[index].evaDesign.data;
      }

      this.noneBtnImg = _tmp.length >= 1;
    },
    beforeUpload(event, type, index, jsonType) {
      const loading = this.openLoading();
      var file = event.target.files[0];
      this.inputShow = false;
      var credentials = {
        accessKeyId: "AKIATLPEDU37QV5CHLMH",
        secretAccessKey: "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",
      }; //秘钥形式的登录上传
      window.AWS.config.update(credentials);
      window.AWS.config.region = "cn-northwest-1"; //设置区域
      var 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"];
      if (
        b.indexOf(
          file.name
            .split(".")
            [file.name.split(".").length - 1].toLocaleUpperCase()
        ) != -1
      ) {
        if (file.size / 1024 / 1024 > 10) {
          this.$message.error("上传文件大于10兆,请重新选择文件！");
          loading.close();
          return;
        }
      } else if (
        file.name
          .split(".")
          [file.name.split(".").length - 1].toLocaleUpperCase() != "PDF"
      ) {
        if (file.size / 1024 / 1024 > 5) {
          this.$message.error("添加成上传文件大于5兆,请重新选择文件！");
          loading.close();
          return;
        }
      }

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

      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) + '%');
          })
          .send(function (err, data) {
            loading.close();
            _this.inputShow = true;
            if (err) {
              _this.$message.error("上传失败");
            } else {
              if (jsonType == 0) {
                _this.racePro.actBox[index].driQuestion.data.push({
                  name: file.name,
                  url: data.Location,
                  uid: file.uid,
                  type: type1,
                });
                _this.imgChange(null, null, type1, index, jsonType);
              } else if (jsonType == 1) {
                _this.racePro.actBox[index].tarDesign.data.push({
                  name: file.name,
                  url: data.Location,
                  uid: file.uid,
                  type: type1,
                });
                _this.imgChange(null, null, type1, index, jsonType);
              } else if (jsonType == 2) {
                _this.racePro.actBox[index].actiDesign.data.push({
                  name: file.name,
                  url: data.Location,
                  uid: file.uid,
                  type: type1,
                });
                _this.imgChange(null, null, type1, index, jsonType);
              } else if (jsonType == 3) {
                _this.racePro.actBox[index].evaDesign.data.push({
                  name: file.name,
                  url: data.Location,
                  uid: file.uid,
                  type: type1,
                });
                _this.imgChange(null, null, type1, index, jsonType);
              }
              _this.upRacePro();
              console.log(data.Location);
            }
          });
      }
    },
    addTaskBorder() {
      this.racePro.actBox.push({
        actName: "",
        driQuestion: { title: "", brief: "", data: [] },
        tarDesign: { title: "", brief: "", data: [] },
        actiDesign: { title: "", brief: "", data: [] },
        evaDesign: { title: "", brief: "", data: [] },
      });
      this.upRacePro();
    },
    deleteTask(i){
      var _this = this;
      if (_this.time()) {
        _this
          .$confirm("确定删除此活动吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            _this.racePro.actBox.splice(i,1);
            _this.$message.success("删除成功");
            this.upRacePro();
          })
          .catch(() => {
            return;
          });
      }
    },
  },
  created() {
    this.racePro = this.raceProcess;
  },
};
</script>

<style scoped>
.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 {
  margin: 0 25px 0 0;
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  background: #fff;
  /* min-height: 800px; */
  height: 100%;
  border: 1px solid #c2c2c2;
  border-radius: 15px;
  overflow: auto;
  min-width: 260px;
}

.steps {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 35px 20px 20px 20px;
  position: relative;
  align-items: center;
}

.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-left: 10px;
}

.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: calc(100% - 20%);
  background: rgb(255, 255, 255);
  border-radius: 10px;
  overflow: auto;
  height: 100%;
  border: 1px solid #c2c2c2;
  border-radius: 15px;
  /* max-height: 800px; */
  min-width: calc(100% - 260px);
}

.raceProBox {
  background: #f6f9fe;
  width: 90%;
  margin: 20px 0 0 20px;
  border-radius: 10px;
  border: 2px solid #c4d9f3;
}

.allBox {
  padding: 25px 25px 0 25px;
}

.allBox > div:nth-child(1) {
  font-size: 18px;
}

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

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

.titleTop > div:nth-child(2) {
  margin-left: 10px;
}
.leftBox {
  width: 5px;
  height: 15px;
  background: #5499e6;
}

.editorCss {
  width: 90% !important;
}

.basic_box {
  position: relative;
  margin: 0;
  min-height: 0;
  width: 90%;
}

.add_info_box {
  margin: 20px 0;
}

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

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

.chapter_upload {
  height: 50px;
  margin-top: 12px;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 50px;
}

.chapter_upload_t {
  background-color: #fff;
  position: absolute;
  height: 100%;
  top: 0px;
  left: 0px;
  border-radius: 40px;
  box-sizing: border-box;
  box-shadow: 0 0 3px 3px #dfdfdf;
  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;
}
.hdName {
  font-size: 22px;
  color: #407eef;
  margin: 0 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;
}
.addTaskBorder {
  border: 2px solid #e1e1e1;
  border-radius: 10px;
  width: 90%;
  margin: 20px 0 20px 20px;
  cursor: pointer;
}

.addTaskBorder > div {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.addTaskBorder > div > img {
  width: 100px;
}

.addTaskBorder > div > span {
  font-size: 23px;
  color: #dbdbdb;
}
.remove {
  background-image: url(../../../../assets/remove.png);
  cursor: pointer;
  opacity: 0.5;
  width: 40px;
  height: 50px;
  background-repeat: no-repeat;
  background-position: 5px 10px;
}
</style>