<template>
  <div class="leveladddetail">
    <div style="display: flex">
      <div class="left clearfix">
        <div class="leftmain">
          <div class="tit" style="margin-left: 18px">关卡</div>
          <div class="btn btn3" @click="showModal({},'add')" style="margin-left: 19px">
            <div class="search"></div>
            <div class="btnText">添加关卡</div>
          </div>
          <div class="maincon" style="background-color: #fff">
            <Draggable v-model="routerInfo.chapterList" chosenClass="chosen" ghostClass="ghost" forceFallback="true"
                       item-key="id" group="stage" animation="500">
              <template #item="{ element,index }">
                <div class="items" v-if="!element.deleted" :class="activeIndex === index ? 'active' : ''"
                     @click="changebgc(index)">
                  <div class="items1">
                    <div class="boxs_left">
                      <a-popover placement="topLeft" trigger="click">
                        <template #content>
                          <div style="width: 130px">
                            <div>
                              {{ element.remark || "暂无说明" }}
                            </div>
                          </div>
                        </template>
                        <template #title>
                          <span>关卡说明</span>
                        </template>
                        <div style="display:flex;justify-content: flex-start;margin-right: 8px;">
                          <div class="script">
                            <span style="font-size: 12px; color: #ffffff">说明</span>
                          </div>
                        </div>
                      </a-popover>
                      <div class="imgIcon" @click="showModal(element,'edit')"></div>
                    </div>
                    <div class="boxs_right">
                      <div class="imgIcon" @click="deleteChapter"></div>
                    </div>
                  </div>
                  <div class="items2">
                    <a-popover placement="topLeft" v-if="element.name?.length > 10">
                      <template #content>
                        <div style="width: 130px">
                          {{ element.name }}
                        </div>
                      </template>
                      <div class="nname">
                        {{ element.name }}
                      </div>
                    </a-popover>
                    <div class="nname" v-if="element.name?.length <= 10">
                      {{ element.name }}
                    </div>
                  </div>
                </div>
              </template>
            </Draggable>
          </div>
        </div>
      </div>
      <a-modal v-model:visible="modal" :centered="true" :footer="null" wrapClassName="AddLevell" @cancel="closeModal">
        <div class="header">
          <div class="headmain">
            <div class="add">编辑/添加关卡</div>
            <div class="img" style="cursor: pointer" @click="closeModal"></div>
          </div>
        </div>
        <div class="main">
          <div class="inma">
            <div class="name">
              <div class="d" style="margin-top: 2px; margin-right: 2px">
                <img style="width: 10px; height: 10px" src="../../assets/images/basicinfo/asterisk.png"/>
              </div>
              <div class="fir">关卡名称：</div>
              <div class="input">
                <a-input style="width: 100%" v-model:value="formValue.name" :maxlength="20"
                         placeholder="请输入关卡名称"/>
              </div>
              <div class="co">{{ formValue.name?.length || 0 }}/20</div>
            </div>
            <div class="name">
              <div
                class="d"
                style="width: 10px;
                  height: 10px;
                  margin-top: 2px;
                  margin-right: 2px;"></div>
              <div class="fir">关卡说明：</div>
              <div class="input">
                <a-textarea style="width: 100%" v-model:value="formValue.remark"
                            :maxlength="100" placeholder="请输入关卡说明"
                            :rows="5"/>
              </div>
              <div class="co1">{{ formValue.remark?.length || 0 }}/100</div>
            </div>
            <div class="btn">
              <button class="btn1" @click="closeModal">取消</button>
              <button class="btn2" @click="editChapter">确定</button>
            </div>
          </div>
        </div>
      </a-modal>
      <div class="right">
        <div class="addhead">
          <div class="filt">
            <div class="le">
              <div class="leftimg">
                <img class="img" :src="routerInfo?.routerInfo?.picUrl"/>
              </div>
              <div class="imgfor">
                <div class="forz">{{ routerInfo?.routerInfo?.name }}</div>
                <div class="fort">创建时间：{{ routerInfo?.routerInfo?.createTime }}</div>
              </div>
            </div>
            <div class="rightt">
              <div class="select" style="margin-right:90px;">
                <span>学习模式：</span>
                <span
                  style="border: 1px solid rgba(0, 0, 0, 0.25);width: 120px;height: 38px; border-radius: 10px;text-align: center;line-height: 38px;">
                  {{
                    routerInfo.routerInfo.unlockMode == 1 ? "自由学习模式" : routerInfo.routerInfo.unlockMode == 2 || routerInfo.routerInfo.unlockMode == 3 ? "闯关模式" : ""
                  }}
                </span>
                <unlock-mode :routerInfo="routerInfo.routerInfo" :types="types">
                  <a-button type="primary" size="large" style="border-radius: 8px;margin-left: 24px;">切换模式
                  </a-button>
                </unlock-mode>
              </div>
              <div class="line"></div>
              <router-link :to="{ path: '/leveladd', query:{ routerId: routerId } }">
                <div style="display: flex">
                  <img class="img2" style="margin-right: 22px" src="../../assets/images/leveladd/back.png"/>
                  <div class="return">返回</div>
                </div>
              </router-link>
            </div>
          </div>
        </div>
        <div class="mid">
          <div class="item" v-for="(value,key) in TASK_TYPE" :key="key">
            <component :is="value.component" :ref="el=>courseRef['el'+key]=el" :type="key"
                       v-model:task-list="routerInfo.chapterList[activeIndex].draftTaskList">
              <div class="itcon">
                <div class="img">
                  <img :src="value.img"/>
                </div>
                <div class="text">{{ value.name }}</div>
              </div>
            </component>
            <div>
            </div>
            <div class="lin"></div>
          </div>
        </div>
        <div class="boom">
          <div class="boomcen">
            <div class="title">
              <div class="tit_left">
                <span>任务列表</span>
              </div>
              <div class="tit_right">
                <div class="btn btn1" @click="showChangeModal">
                  <div class="btnText">移动任务到关卡</div>
                </div>
                <div class="btn btn2" @click="subdeleteAll">
                  <div class="imgIcon"></div>
                  <div class="btnText">批量删除</div>
                </div>
              </div>
            </div>
            <div v-if="routerInfo?.chapterList[activeIndex]?.draftTaskList?.length" class="tableBox">
              <div style="
                  height: 50px;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  background-color: #eff4fc;
                  font-size: 14px;
                  font-weight: 400;
                  color: #999ba3;
                  line-height: 36px;
                  border-bottom: 1px solid #f2f6fc;
                ">
                <div style="
                    width: 87px;
                    text-align: center;
                    display: flex;
                    margin-left: 46px;
                  ">
                  <img style="
                      width: 16px;
                      height: 16px;
                      cursor: pointer;
                      margin-top: 12px;
                    " :src="
                      selectAll === 0
                        ? require('../../assets/images/notSelect.png')
                        : selectAll === 1
                          ? require('../../assets/images/selectAll.png')
                          : require('../../assets/images/select.png')
                    " @click="selectRowAll"/>
                  <div style="margin-top: 2px; margin-left: 8px">类型</div>
                </div>
                <div style="width: 120px; text-align: center">任务名称</div>
                <div style="width: 120px; text-align: center">必修/选修</div>
                <div style="width: 87px; text-align: center">时长</div>
                <!--                <div style="width: 87px; text-align: center">状态</div>-->
                <div style="width: 120px; text-align: center; margin-right: 20px">
                  操作
                </div>
              </div>
              <Draggable v-model="routerInfo.chapterList[activeIndex].draftTaskList" chosenClass="chosen"
                         ghostClass="ghost" forceFallback="true" group="task"
                         animation="500">
                <template #item="{ element,index }">
                  <div
                    v-if="!element.deleted"
                    style="
                      height: 50px;
                      display: flex;
                      justify-content: space-between;
                      align-items: center;
                      border-bottom: 1px solid #f2f6fc;
                      font-size: 14px;
                      font-weight: 400;
                      color: #4f5156;
                      line-height: 36px;" class="tableRow">
                    <div style="
                        width: 87px;
                        text-align: center;
                        margin-left: 46px;
                        position: relative;">
                      <div class="racona">
                        <div class="img" style="
                            cursor: pointer;
                            margin-top: 2px;
                            margin-right: 9px;
                            position: absolute;
                            left: -25px;"></div>
                        <a-checkbox :id="element.id" v-model:checked="element.checked"></a-checkbox>
                        <div style="margin-top: 2px; margin-left: 8px">
                          {{ TASK_TYPE[element.type]?.name || "" }}
                        </div>
                      </div>
                    </div>
                    <div style="
                        width: 120px;
                        text-align: center;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                      " :title="element.name">
                      {{ element.name }}
                    </div>
                    <div style="width: 120px; text-align: center">
                      <div class="opat">
                        <div class="opacationt clearfix">
                          <a-switch style="margin-left: -50px; margin-top: 3px" v-model:checked="element.flag"
                                    size="small" active-color="red"/>
                          <div class="showt clearfix">
                            <div class="bi" :style="{
                              'z-index': element.flag ? 889 : 887,
                            }">
                              必修
                            </div>
                            <div class="xuan">选修</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div style="width: 87px; text-align: center">
                      {{ element.duration ? element.duration + "分钟" : "-" }}
                    </div>
                    <div style="
                        width: 120px;
                        text-align: center;
                        margin-right: 20px;">
                      <div class="opa">
                        <div class="opacation">
                          <span
                            style="color: #4ea6ff;
                              margin-right: 25px;
                              cursor: pointer;"
                            @click="editTaskForType(element,index)">
                            编辑
                          </span>
                          <span style="color: #4ea6ff; cursor: pointer" @click="deleteTask(element,index)">
                            删除
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </Draggable>
            </div>
            <!-- 无数据样式 -->
            <div v-else class="notable">
              <div class="notablebox">
                <div class="boxbody">
                  <div class="boximg"></div>
                  <div class="boxtitle">
                    <span style="color: #ffb64e; font-size: 20px">无任务</span>
                  </div>
                  <div class="boxtitle2">
                    <span style="color: #878b92">请点击上方，创建任务</span>
                  </div>
                </div>
                <div class="smallleft"></div>
                <div class="smallright"></div>
              </div>
            </div>
            <!-- 无数据样式 -->
          </div>
        </div>
      </div>
    </div>

    <div class="footbtn footBox">
      <div class="btnbox">
        <a-button class="btn btn2" @click="temporaryStorage" :loading="confirmLoading">暂存</a-button>
        <a-button class="btn btn2" @click="submitStorage" :loading="confirmLoading">确定</a-button>
        <a-button class="btn btn1" @click="cancelStorage" :loading="cancleLoading">取消</a-button>
      </div>
    </div>
    <div>
      <div style="height:80px;width:100%;"/>
    </div>
    <!-- 移动任务到阶段 -->
    <a-modal style="padding: 0" v-model:visible="visiblene" :footer="null" :centered="true"
             wrapClassName="moveModal">
      <div class="con">
        <div class="header">
          <div class="inhe">
            <div class="mod"></div>
            <div class="tz">选择任务移动到关卡</div>
          </div>
        </div>
        <div class="mid">
          <div class="inher">
            <div class="cur">
              已选中{{ routerInfo?.chapterList[activeIndex]?.draftTaskList?.filter(t => t.checked)?.length || 0 }}个任务
            </div>
            <div class="select">
              <a-select v-model:value="moveChapterIndex" style="width: 100%" placeholder="请选择阶段" allowClear
                        :options="routerInfo.chapterList.map(({name:label},value)=>({label,value,disabled:value===activeIndex}))"
              ></a-select>
            </div>
            <div class="btn">
              <button style="cursor: pointer" class="sameb btn1" @click="closeChangeModal">
                取消
              </button>
              <button style="cursor: pointer" class="sameb btn2" @click="moveTask">
                确定
              </button>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script setup>
import {computed, onMounted, ref, watch} from "vue";
import {GetRouterDraftDetail, releaseRouter} from "@/api/indexTask";
import {message} from "ant-design-vue";
import {useRoute} from "vue-router";
import UnlockMode from "@/components/drawers/UnlockMode.vue";
import {TASK_TYPE} from "@/utils/const";
import Draggable from "vuedraggable";
import {ROUTER_DETAIL_MODIFY} from "@/api/apis";
import {request} from "@/api/request";
import dialog from "@/utils/dialog";

const { query: { routerId } } = useRoute();
const modal = ref(false);
const ischapterEdit = ref(false);
const visiblene = ref(false);
const cancleLoading = ref(false);
const confirmLoading = ref(false);
const moveChapterIndex = ref("");
const activeIndex = ref(0);
const types = 1; // 1 路径图 2 项目

const courseRef = ref({});
const formValue = ref({ draftTaskList: [] });
const routerInfo = ref({ chapterList: [{ name: "关卡一", draftTaskList: [] }], routerInfo: {} });

const selectAll = computed(() => {
  const selectedNum = routerInfo.value.chapterList[activeIndex.value].draftTaskList.filter(t => t.checked).length;
  if (!selectedNum) {
    return 0;
  }
  if (selectedNum === routerInfo.value.chapterList[activeIndex.value].draftTaskList.length) {
    return 1;
  }
  return 2;
});

watch(() => routerInfo.value.chapterList, () => {
  routerInfo.value.chapterList.forEach((t, i) => {
    t.sort = i;
    t.draftTaskList?.forEach((s, j) => {
      s.sort = j;
    });
  });
}, { deep: true });

const showModal = (e, type) => {
  ischapterEdit.value = (type === "edit");
  console.log(ischapterEdit.value);
  if (type == "edit") {
    console.log("关卡信息：" + e.name);
    formValue.value = e;//回传修改的信息
  } else {
    //关卡信息初始化
    formValue.value = {};
  }
  modal.value = true;
};
const closeModal = () => {
  modal.value = false;
};

//新建关卡
const editChapter = () => {
  if (!formValue.value.name) {
    return message.warning("请输入关卡名称");
  }
  if (ischapterEdit.value) {
    routerInfo.value.chapterList = [{ ...formValue.value, draftTaskList: [] }];
  } else {
    routerInfo.value.chapterList.push({ ...formValue.value, draftTaskList: [] });
  }
  formValue.value = { draftTaskList: [] };
  closeModal();
};

//删除关卡
const deleteChapter = () => {
  dialog({
    content: "确定要删除关卡吗?",
    ok: () => {
      if (routerInfo.value.chapterList.length === 1) {
        message.warning("至少保留一个关卡");
        return;
      }
      if (routerInfo.value.chapterList[activeIndex.value].id) {
        routerInfo.value.chapterList[activeIndex.value].deleted = true;
        routerInfo.value.chapterList[activeIndex.value].draftTaskList?.forEach((t, i) => t.id ? (t.deleted = true) : routerInfo.value.chapterList[activeIndex.value].draftTaskList.splice(i, 1));
      } else {
        routerInfo.value.chapterList.splice(activeIndex.value, 1);
      }
      activeIndex.value && (activeIndex.value = activeIndex.value - 1);
      message.info("删除关卡成功");
    },
  });
};

const getDetail = async () => {
  await GetRouterDraftDetail(routerId).then((res) => {
    routerInfo.value = res.data.data;
  });
};

onMounted(() => {
  getDetail();
});

const changebgc = (index) => {
  activeIndex.value = index;
};

const subdeleteAll = () => {
  if (!routerInfo.value?.chapterList[activeIndex.value]?.draftTaskList?.filter(t => t.checked)?.length) {
    message.warning("请选择要删除的任务！");
    return;
  }
  dialog({
    content: "确定要删除所选任务吗?",
    ok: () => {
      for (let i = 0; i < routerInfo.value.chapterList[activeIndex.value].draftTaskList.length; i++) {
        const t = routerInfo.value.chapterList[activeIndex.value].draftTaskList[i];
        if (t.checked) {
          if (t.id) {
            t.checked = false;
            t.deleted = true;
          } else {
            routerInfo.value.chapterList[activeIndex.value].draftTaskList.splice(i, 1);
            i--;
          }
        }
      }
    },
  });
};

//全选任务或全不选任务
const selectRowAll = () => {
  if (selectAll.value === 1) {
    routerInfo.value.chapterList[activeIndex.value].draftTaskList.forEach(t => t.checked = false);
    return;
  }
  routerInfo.value.chapterList[activeIndex.value].draftTaskList.forEach(t => t.checked = true);
};
//移动任务到关卡
const moveTask = () => {
  routerInfo.value.chapterList[moveChapterIndex.value].draftTaskList.push(...routerInfo.value.chapterList[activeIndex.value].draftTaskList.filter(t => t.checked).map((t) => ({
    ...t,
    checked: false
  })));
  routerInfo.value.chapterList[activeIndex.value].draftTaskList = routerInfo.value.chapterList[activeIndex.value].draftTaskList.filter(t => !t.checked);
  visiblene.value = false;
};
//编辑的按钮
const editTaskForType = (ele, index) => {
  courseRef.value["el" + ele.type].openDrawer(index, ele);
};

function deleteTask(element, index) {
  dialog({
    content: "确定要删除此任务吗?",
    ok: () => {
      message.success("删除成功");
      routerInfo.value.chapterList[activeIndex.value].draftTaskList[index].id ? (element.deleted = true) : routerInfo.value.chapterList[activeIndex.value].draftTaskList.splice(index, 1);
    },
  });
}

const showChangeModal = () => {
  if (routerInfo.value?.chapterList?.length <= 1) {
    message.warning("请添加关卡！");
    return;
  }
  if (!routerInfo.value?.chapterList[activeIndex.value]?.draftTaskList?.filter(t => t.checked)?.length) {
    message.warning("请选择要移动的任务！");
    return;
  }
  visiblene.value = true;
};
const closeChangeModal = () => {
  visiblene.value = false;
};

//暂存
const temporaryStorage = async () => {
  confirmLoading.value = true;
  await request(ROUTER_DETAIL_MODIFY, routerInfo.value);
  await getDetail();
  message.success("暂存成功");
  confirmLoading.value = false;
};

const submitStorage = async () => {
  if (routerInfo.value.routerInfo.status === 1) {
    dialog({
      content: "该路径图已经发布，修改后如未点击暂存当前操作未保存数据将丢失，确认保存?",
      ok: async () => {
        confirmLoading.value = true;
        await releaseRouter(routerId);
        message.success("关卡和任务数据已保存");
        confirmLoading.value = false;
      },
    });
    return;
  }
  confirmLoading.value = true;
  await request(ROUTER_DETAIL_MODIFY, routerInfo.value);
  message.success("关卡和任务数据已保存");
  confirmLoading.value = false;
};
//取消
const cancelStorage = async () => {
  cancleLoading.value = true;
  await getDetail();
  message.success("取消成功");
  cancleLoading.value = false;
};

</script>
<style lang="scss">
.ConfirmModal {
  .ant-modal {
    width: 424px !important;
    height: 258px !important;

    .ant-modal-content {
      width: 424px !important;
      height: 258px !important;

      .ant-modal-body {
        width: 424px !important;
        height: 258px !important;
        padding: 0 !important;

        .delete {
          z-index: 999;
          width: 424px;
          height: 258px;
          background: #ffffff;
          box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
          border-radius: 4px;

          .del_header {
            position: absolute;
            width: calc(100%);
            height: 40px;
            background: linear-gradient(rgba(78, 166, 255, 0.2) 0%,
              rgba(78, 166, 255, 0) 100%);
          }

          .del_main {
            width: 100%;
            position: relative;

            .header {
              display: flex;
              align-items: center;
              padding-top: 20px;
              padding-left: 26px;
              font-size: 16px;

              .icon {
                width: 16px;
                height: 16px;
                margin-right: 10px;
                background-image: url(@/assets/images/coursewareManage/QR.png);
                background-size: 100% 100%;
              }

              .close_exit {
                position: absolute;
                right: 42px;
                cursor: pointer;
                width: 20px;
                height: 20px;
                background-image: url(@/assets/images/coursewareManage/close.png);
                background-size: 100% 100%;
              }
            }

            .body {
              width: 100%;
              margin: 34px auto 56px auto;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              position: relative;

              .back {
                position: absolute;
                top: 30px;
                font-size: 12px;
                font-weight: 400;
                color: #666666;
              }
            }

            .del_btnbox {
              display: flex;
              margin: 30px auto;
              justify-content: center;

              .del_btn {
                width: 100px;
                height: 40px;
                background: rgba(64, 158, 255, 0);
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                cursor: pointer;

                .btnText {
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 40px;
                }
              }

              .btn1 {
                border: 1px solid rgba(64, 158, 255, 1);
                color: #4ea6ff;
                margin-right: 14px;
              }

              .btn2 {
                background-color: #4ea6ff;
                color: #ffffff;
              }
            }
          }
        }
      }
    }
  }
}

.moveModal {
  .ant-modal {
    width: 549px !important;
    height: 245px !important;

    .ant-modal-content {
      width: 549px !important;
      height: 245px !important;

      .ant-modal-body {
        padding: 0 !important;
        width: 549px !important;
        height: 245px !important;

        .con {
          width: 100%;
          height: 100%;

          .header {
            width: 100%;
            display: flex;
            height: 68px;
            position: relative;
            justify-content: center;
            background: linear-gradient(rgba(78, 166, 255, 0.2) 0%,
              rgba(78, 166, 255, 0) 100%);

            .inhe {
              width: 80%;
              height: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .mod {
                left: 30px;
                top: 27px;
                position: absolute;
                width: 18px;
                height: 17px;
                background-image: url(../../assets/images/leveladd/mod.png);
              }

              .tz {
                color: #000000;
                font-weight: 400;
                font-size: 16px;
              }

              .mg {
                width: 20px;
                height: 20px;
                background-image: url(../../assets/images/basicinfo/close22.png);
                background-size: 100% 100%;
                cursor: pointer;
              }
            }
          }

          .mid {
            width: 100%;
            display: flex;
            height: 100%;
            justify-content: center;

            .inher {
              width: 80%;
              height: 100%;

              .cur {
                color: #6f6f6f;
                font-size: 14px;
              }

              .select {
                margin-top: 10px;
              }

              .btn {
                width: 100%;
                display: flex;
                justify-content: center;
                margin-top: 30px;

                .sameb {
                  width: 100px;
                  height: 40px;
                  font-size: 14px;
                  border-radius: 8px;
                }

                .btn1 {
                  color: #4ea6ff;
                  background: #ffffff;
                  border: 1px solid #4ea6ff;
                }

                .btn2 {
                  margin-left: 16px;
                  border: 0;
                  color: #ffffff;
                  background: #4ea6ff;
                }
              }
            }
          }
        }
      }
    }
  }
}

.clearfix:after,
.clearfix:before {
  content: " ";
  display: block;
  clear: both;
}

.AddLevell {
  .ant-modal {
    width: 624px !important;
    height: 388px !important;

    .ant-modal-content {
      width: 624px !important;
      height: 388px !important;
      border-radius: 4px !important;

      .ant-modal-body {
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;

        .header {
          width: 624px;
          height: 68px;
          background: linear-gradient(180deg,
            rgba(78, 166, 255, 0.2) 0%,
            rgba(78, 166, 255, 0) 100%);
          display: flex;
          justify-content: center;

          .headmain {
            width: 90%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .add {
              font-size: 16px;
              font-weight: 600;
              color: #333333;
            }

            .img {
              width: 20px;
              height: 20px;
              background-image: url(../../assets/images/basicinfo/close22.png);
              background-size: 100% 100%;
            }
          }
        }

        .main {
          width: 100%;
          height: calc(100% - 68px);
          display: flex;
          justify-content: center;

          .inma {
            width: 75%;
            height: 100%;

            .name {
              display: flex;
              position: relative;
              margin-top: 30px;

              .fir {
                font-size: 14px;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.85);
                white-space: nowrap;
                margin-top: 3px;
              }

              .input {
                width: 100%;

                .ant-input {
                  border-radius: 8px;
                  border: 1px solid #c7cbd2;

                  &::placeholder {
                    font-size: 12px;
                    position: absolute;
                    top: 5px;
                  }
                }

                .ant-textarea {
                  border-radius: 8px;
                  border: 1px solid #c7cbd2;

                  &::placeholder {
                    font-size: 12px;
                    position: absolute;
                    top: 5px;
                  }
                }
              }

              .co {
                position: absolute;
                right: 10px;
                top: 4px;
                font-size: 14px;
                font-weight: 400;
                color: #c7cbd2;
              }

              .co1 {
                position: absolute;
                right: 10px;
                bottom: 8px;
                font-size: 14px;
                font-weight: 400;
                color: #c7cbd2;
              }
            }

            .btn {
              margin-top: 40px;
              width: 100%;
              display: flex;
              justify-content: center;

              .btn1 {
                width: 100px;
                height: 40px;
                border-radius: 4px;
                border: 1px solid #4ea6ff;
                font-size: 14px;
                color: #4ea6ff;
                cursor: pointer;
                background: #ffffff;
                margin-right: 20px;
              }

              .btn2 {
                width: 100px;
                height: 40px;
                border-radius: 4px;
                font-size: 14px;
                color: #fff;
                cursor: pointer;
                border: 0;
                background: #4ea6ff;
              }
            }
          }
        }
      }
    }
  }
}

.ProjectDrawer {
  .drawerMain {
    min-width: 600px;
    margin: 0px 32px 0px 32px;
    display: flex;
    flex-direction: column;

    .header {
      height: 73px;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      flex-shrink: 0;

      .headerTitle {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
        line-height: 25px;
      }
    }

    .drawerbox {
      overflow-y: auto;

      th {
        background-color: #eff4fc !important;
      }

      .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
        background: #f6f9fd;
      }
    }

    .btnn {
      height: 72px;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
      background-color: #ffffff;

      .btn1 {
        width: 100px;
        height: 40px;
        border: 1px solid #4ea6ff;
        border-radius: 8px;
        color: #4ea6ff;
        background-color: #fff;
        cursor: pointer;
      }

      .btn2 {
        cursor: pointer;
        width: 100px;
        height: 40px;
        background: #4ea6ff;
        border-radius: 8px;
        border: 0;
        margin-left: 15px;
        color: #fff;
      }
    }
  }
}

.leveladddetail {
  width: 100%;
  min-height: 800px;
  display: flex;
  flex-direction: column;
  min-width: 933px;
  background-color: rgba(245, 247, 250, 1);

  .left {
    margin-right: 20px;
    width: 208px;
    background: #ffffff;
    box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
    display: flex;
    justify-content: center;

    .leftmain {
      // width: 86%;
      margin-top: 20px;
      position: sticky;
      top: 0;
      height: 80vh;
      overflow-y: auto;

      .tit {
        font-size: 18px;
        color: #363636;
      }

      .btn {
        margin-top: 20px;
        height: 38px;
        background: #fff6e8;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        cursor: pointer;

        .search {
          background-size: 100%;
        }

        .btnText {
          font-size: 14px;
          font-weight: 400;
          color: #ffb64e;
          margin-top: 4px;
          margin-left: 5px;
        }
      }

      .btn3 {
        width: 171px;
        margin-right: 0px;

        .search {
          width: 17px;
          height: 18px;
          background-image: url("../../assets/images/leveladd/add.png");
          background-size: 100% 100%;
        }
      }

      .maincon {
        margin-top: 17px;
        width: 208px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .ghost {
          // background-color: red;
          opacity: 0 !important;
        }

        .items {
          width: 171px;
          // height: 83px;
          background: rgba(255, 182, 78, 0.1);
          border: 1px solid #ffb64e;
          opacity: 0.45;
          border-radius: 8px;
          margin-bottom: 16px;
          align-items: center;
          padding: 16px;
          opacity: 0.5;
          cursor: pointer;

          .items1 {
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .boxs_left {
              display: flex;
              align-items: center;

              .script {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 46px;
                height: 24px;
                background: #ffb64e;
                border-radius: 6px;
                margin-right: 5px;
                white-space: nowrap;
              }

              .imgIcon {
                width: 16px;
                height: 16px;
                background-image: url(@/assets/images/leveladd/edit1.png);
                background-size: 100% 100%;
              }
            }

            .boxs_right {
              .imgIcon {
                width: 16px;
                height: 16px;
                background-image: url(@/assets/images/leveladd/delete.png);
                background-size: 100% 100%;
              }
            }
          }

          .items2 {
            .nname {
              width: 140px;
              // overflow: hidden;
              // text-overflow: ellipsis;
              // white-space: nowrap;
              font-weight: bold;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-line-clamp: 2;
              display: -webkit-box;
              -webkit-box-orient: vertical;
            }
          }
        }

        .active {
          opacity: 1;
          // transition: all 0.5s;
        }
      }
    }
  }

  .right {
    flex: 1;
    // background-color: #fff;
    display: flex;
    flex-direction: column;

    .addhead {
      width: 100%;
      // min-width: 500px;
      // height: 130px;
      // flex: 1;
      background-color: #fff;
      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
      display: flex;
      align-items: center;
      position: relative;

      .filt {
        margin: 16px 30px 16px 22px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
        flex-wrap: wrap;

        .le {
          display: flex;
          align-items: center;

          // margin-bottom: 10px;
          .leftimg {
            width: 151px;
            height: 100px;
            border: 10px solid #e7f2ff;
            border-radius: 8px;
            margin-left: 20px;

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

          .imgfor {
            margin-left: 32px;

            .forz {
              color: #363636;
              font-size: 16px;
            }

            .fort {
              color: #878b92;
              font-size: 14px;
              margin-top: 20px;
            }
          }
        }

        .rightt {
          height: 100%;
          display: flex;
          align-items: center;

          .select {
            display: flex;
            align-items: center;
            white-space: nowrap;
            margin-right: 56px;

            .inputbox {
              display: flex;
              align-items: center;
              border: 1px solid #c7cbd2;
              width: 238px;
              height: 40px;
              border-radius: 8px;
              padding-left: 12px;

              input {
                border: none;
                outline: none;
              }

              .bottonbox {
                width: 100px;
                height: 40px;
                background: #4ea6ff;
                border-radius: 8px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                flex-shrink: 0;

                .btnText {
                  font-size: 14px;
                  font-weight: 400;
                  color: #ffffff;
                  line-height: 36px;
                  margin-left: 5px;
                }
              }
            }
          }

          .line {
            height: 60px;
            width: 1px;
            background-color: #e8effa;
            margin-right: 18px;
          }

          .return {
            color: #4ea6ff;
            font-size: 14px;
            margin-top: 13px;
            margin-right: 20px;
            white-space: nowrap;
          }
        }
      }
    }

    .mid {
      width: 100%;
      // height: 130px;
      margin-top: 20px;
      background-color: #fff;
      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      position: sticky;
      top: 0;
      z-index: 999;

      .item {
        height: 115px;
        // width: 7.7%;
        display: flex;
        align-items: center;

        .itcon {
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 100%;
          width: 100%;
          margin-left: 38px;
          margin-right: 38px;

          .img {
            cursor: pointer;
          }

          .text {
            font-size: 16px;
            color: #363636;
            margin-top: 5px;
            white-space: nowrap;
          }
        }

        .lin {
          width: 1px;
          height: 60%;
          background-color: #e8effa;
        }

        .no {
          display: none;
        }
      }
    }

    .boom {
      width: 100%;
      margin-top: 20px;
      flex: 1;
      background-color: #fff;
      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
      display: flex;
      justify-content: center;
      min-height: 512px;

      .boomcen {
        width: 95%;

        // height: 100%;
        // background-color: #bfa;
        .title {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .tit_left {
            font-size: 16px;
            font-weight: 500;
            color: #363636;
            line-height: 36px;
            margin-top: 30px;
          }

          .tit_right {
            display: flex;
            align-items: center;
            margin-top: 30px;

            .btn {
              padding: 0px 26px 0px 26px;
              height: 38px;
              border-radius: 8px;
              border: 1px solid rgba(64, 158, 255, 1);
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 14px;
              flex-shrink: 0;
              cursor: pointer;
              white-space: nowrap;

              .btnText {
                font-size: 14px;
                font-weight: 400;
                line-height: 36px;
                margin-left: 5px;
              }
            }

            .btn1 {
              background-color: #4ea6ff;

              .btnText {
                color: #ffffff;
              }
            }

            .btn2 {
              background-color: #ffffff;

              .imgIcon {
                width: 16px;
                height: 16px;
                background-image: url(@/assets/images/projectadd/delete.png);
                background-size: 100%;
              }

              .btnText {
                color: #4ea6ff;
              }
            }
          }
        }

        .tableBox {
          margin-top: 21px;
          margin-bottom: 20px;

          .chosen {
            background-color: #f2f6fc;
            opacity: 1;
          }

          .ghost {
            // background-color: red;
            opacity: 0;
          }

          .classify {
            margin-left: 10px !important;
            padding-left: 9px !important;
          }

          .ant-checkbox-wrapper {
            align-items: center;
            margin-top: -2px;
          }

          .ant-table-selection-column {
            padding: 0px !important;
            padding-left: 60px !important;
          }

          .ant-table-thead > tr > th {
            background-color: rgba(239, 244, 252, 1);
          }

          th.h {
            background-color: #eff4fc !important;
          }

          .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
            background: #f6f9fd;
          }
        }

        .xwid {
          position: relative;
          margin-top: 30px;
          display: flex;
          margin-bottom: 20px;

          .xin {
            width: 100%;

            .xheadb {
              display: flex;

              .addx {
                width: 130px;
                height: 40px;
                background: #4ea6ff;
                border-radius: 8px;
                color: #fff;
                border: 0;
                cursor: pointer;
                margin-right: 20px;
              }

              .addd {
                width: 130px;
                height: 40px;
                background: #fff;
                border-radius: 8px;
                border: 1px solid #4ea6ff;
                color: #4ea6ff;
                cursor: pointer;
                margin-right: 20px;
              }

              .select {
                .ant-select {
                  //
                  // border: 0 !important;
                  border-radius: 11px;

                  .ant-select-selector {
                    border: 1px solid #4ea6ff !important;

                    .ant-select-selection-placeholder {
                      padding-left: 15px;
                      color: #4ea6ff;
                    }
                  }
                }
              }
            }

            .talk {
              margin-top: 24px;
              margin-bottom: 11px;
              width: 100%;
              height: 50px;
              background: #f5faff;
              border: 1px solid #4ea6ff;
              // opacity: 0.22;
              display: flex;
              align-items: center;

              .im {
                width: 14px;
                height: 15px;
                margin-left: 27px;
                margin-top: -3px;
              }

              .xu {
                height: 100%;
                line-height: 50px;
                margin-left: 13px;

                .yi {
                  color: #4f5156;
                  font-size: 14px;
                }

                .zon {
                  color: #999ba3;
                  font-size: 14px;
                  margin-left: 34px;
                }

                .th {
                  color: #4ea6ff;
                }
              }
            }

            .tableBox {
              margin-block-end: 20px;

              .classify {
                margin-left: 11px !important;
                padding-left: 9px !important;
              }

              .ant-checkbox-wrapper {
                align-items: center;
                margin-top: -2px;
              }

              .ant-table-selection-column {
                padding: 0px !important;
                padding-left: 38px !important;
              }

              .ant-table-thead > tr > th {
                background-color: rgba(239, 244, 252, 1);
              }

              th.h {
                background-color: #eff4fc !important;
              }

              .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
                background: #f6f9fd;
              }

              .pa {
                left: 0;
                width: 100%;
                // height: 20px;
                // background-color: red;
                display: flex;
                justify-content: center;
                position: absolute;
                bottom: 0px;
              }
            }

            .tablebox1 {
              margin-bottom: 80px;

              .pa {
                left: 0;
                width: 100%;
                // height: 20px;
                // background-color: red;
                display: flex;
                justify-content: center;
                position: absolute;
                bottom: 0px;
              }
            }
          }
        }

        .Gcon {
          display: flex;

          .pad {
            height: 100%;
            width: 40px;
          }

          .Gin {
            // background-color: #bfa;
            margin-top: 30px;

            .headone {
              // background-color: red;
              display: flex;
              text-align: center;

              .box {
                width: 4px;
                height: 20px;
                background-color: #4ea6ff;
                border-radius: 2px;
              }

              .onetitle {
                margin-left: 15px;
                color: #333333;
                font-size: 14px;
              }

              .oneedi {
                margin-left: 15px;
                color: #4ea6ff;
                cursor: pointer;
              }

              .twobtn {
                display: flex;

                .btnone {
                  width: 42px;
                  height: 24px;
                  border: 1px solid rgba(64, 158, 255, 1);
                  border-radius: 4px;
                  color: rgba(64, 158, 255, 1);
                  margin-left: 20px;
                  cursor: pointer;
                }

                .btntwo {
                  width: 42px;
                  height: 24px;
                  border: 1px solid rgba(64, 158, 255, 1);
                  border-radius: 4px;
                  color: #ffffff;
                  margin-left: 20px;
                  background: #4ea6ff;
                  cursor: pointer;
                }
              }
            }

            .onemain {
              margin-top: 20px;
              margin-left: 55px;
              color: #6f6f6f;
              font-size: 14px;

              .checkcon {
                position: relative;

                .in {
                  position: absolute;
                  // margin-top: 10px;
                  left: 0;
                  top: 3px;
                }

                .yulan {
                  // color: yellow;
                  margin-left: 22px;
                  // display: inline-block;
                }

                .yulan2 {
                  margin-left: 22px;
                }

                .ant-input-number {
                  height: 24px;
                  width: 24px;
                  margin: 10px;
                  border-radius: 4px;
                  border: 1px solid #6d7584;

                  .ant-input-number-input {
                    width: 100%;
                    height: 100%;
                    font-size: 14px;
                    padding: 0;
                    color: #4ea6ff;
                    text-align: center;
                  }
                }
              }
            }

            .twomain {
              margin-left: 20px;
              margin-top: 20px;

              .ant-switch-checked {
                background-color: #5dc988;
              }

              .info {
                margin-left: 10px;
                color: #6f6f6f;
                font-size: 14px;
                // margin-top: 10px;
              }

              .infor {
                margin-left: 38px;
                margin-top: 10px;
                color: #c7cbd2;
                font-size: 14px;
              }

              .chooseshow {
                // background-color: red;
                margin-left: 38px;
                margin-top: 12px;

                .fane {
                  color: #6f6f6f;
                  font-size: 14px;
                }
              }

              .choo {
                display: none;
              }

              .btm {
                margin-left: 38px;
                margin-top: 20px;

                .bmo {
                  color: #6f6f6f;
                  font-size: 14px;
                }

                .bmt {
                  color: #c7cbd2;
                  font-size: 14px;
                  margin-top: 3px;
                }

                .chosecon {
                  display: flex;
                  margin-top: 6px;
                  margin-bottom: 20px;

                  .chose {
                    position: relative;

                    .inl {
                      position: absolute;
                      top: 2px;
                    }

                    .sh {
                      margin-left: 23px;
                      color: #6f6f6f;
                    }
                  }
                }
              }
            }
          }
        }

        .notable {
          width: 100%;
          height: 100%;

          .notablebox {
            width: 412px;
            height: 212px;
            background: linear-gradient(180deg, #fef3dd 0%, #fffaf0 100%);
            border-radius: 10px;
            display: flex;
            justify-content: center;
            text-align: center;
            margin: 77px auto 109px auto;
            cursor: pointer;
            position: relative;

            .smallleft {
              position: absolute;
              top: 18px;
              left: 0px;
              width: 8px;
              height: 21px;
              border-radius: 0px 4px 4px 0px;
              background-color: #ffb64e;
            }

            .smallright {
              position: absolute;
              bottom: 18px;
              right: 0px;
              width: 8px;
              height: 21px;
              border-radius: 4px 0px 0px 4px;
              background-color: #ffb64e;
            }

            .boxbody {
              .boximg {
                width: 72px;
                height: 72px;
                margin: 32px auto 20px auto;
                background-image: url(@/assets/images/coursewareManage/nostate.png);
                background-size: 100% 100%;
              }

              .boxtitle {
                margin-bottom: 4px;
              }
            }
          }
        }
      }
    }

    // .footbtn {
    //   width: 100%;
    //   flex: 1;
    //   background-color: #fff;
    //   box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
    //   display: flex;
    //   justify-content: end;
    //   .btnbox {
    //     display: flex;
    //     margin-right: 36px;
    //     .btn {
    //       padding: 0px 26px 0px 26px;
    //       height: 38px;
    //       border-radius: 8px;
    //       border: 1px solid rgba(64, 158, 255, 1);
    //       display: flex;
    //       align-items: center;
    //       justify-content: center;
    //       flex-shrink: 0;
    //       margin: 21px 0px 19px 14px;
    //       cursor: pointer;
    //       white-space: nowrap;
    //       .btnText {
    //         font-size: 14px;
    //         font-weight: 400;
    //         line-height: 36px;
    //         margin-left: 5px;
    //       }
    //     }
    //     .btn1 {
    //       background-color: #4ea6ff;
    //       .btnText {
    //         color: #ffffff;
    //       }
    //     }
    //     .btn2 {
    //       background-color: #ffffff;
    //       .btnText {
    //         color: #4ea6ff;
    //       }
    //     }
    //   }
    // }
  }

  .opat {
    .opacationt {
      display: flex;
      align-items: center;
      justify-content: center;

      .ant-switch-checked {
        background-color: #5dc988;
      }

      .showt {
        // margin-top: 10px;
        display: flex;
        margin-left: 10px;
        height: 23px;
        position: relative;

        .bi {
          // margin-top: 10px;
          width: 63px;
          height: 23px;
          background-color: #5dc988;
          line-height: 23px;
          position: absolute;
          z-index: 888;
          color: #ffffff;
          border-radius: 4px;
        }

        .xuan {
          width: 63px;
          height: 23px;
          background-color: #f2f6fc;
          line-height: 23px;
          // display: none;
          position: absolute;
          z-index: 888;
          color: #5dc988;
          border-radius: 4px;
        }
      }
    }
  }

  .racona {
    // background-color: #bfa;
    display: flex;
    align-items: center;
    // justify-content: center;
    height: 100%;

    .img {
      // margin-left: -40px;
      // margin-top: -2px;
      width: 17px;
      height: 14px;
      background-image: url("../../assets/images/leveladd/z1.png");
      position: absolute;
      left: -40px;
    }

    .ch {
      margin-left: 10px;
    }
  }

  .footbtn {
    width: 100%;
    height: 80px;
    margin-top: 16px;
    // flex: 1;
    background-color: #fff;
    box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
    display: flex;
    justify-content: end;

    .btnbox {
      display: flex;
      margin-right: 275px;
      height: 80px;

      .btn {
        padding: 0px 26px 0px 26px;
        height: 38px;
        border-radius: 8px;
        border: 1px solid rgba(64, 158, 255, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin: 21px 0px 19px 14px;
        cursor: pointer;
        white-space: nowrap;

        .btnText {
          font-size: 14px;
          font-weight: 400;
          line-height: 36px;
          margin-left: 5px;
        }
      }

      .btn1 {
        background-color: #4ea6ff;
        color: #ffffff;

        .btnText {
          color: #ffffff;
        }
      }

      .btn2 {
        background-color: #ffffff;
        color: #4ea6ff;

        .btnText {
          color: #4ea6ff;
        }
      }
    }
  }
}

.CopyModal {
  .ant-modal {
    width: 424px !important;
    height: 258px !important;

    .ant-modal-content {
      width: 424px !important;
      height: 258px !important;

      .ant-modal-body {
        width: 424px !important;
        height: 258px !important;
        padding: 0 !important;

        .delete {
          z-index: 999;
          width: 424px;
          height: 258px;
          background: #ffffff;
          box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
          border-radius: 4px;

          // position: absolute;
          // left: 50%;
          // top: 10%;
          // transform: translate(-50%, -50%);
          .del_header {
            position: absolute;
            width: calc(100%);
            height: 40px;
            background: linear-gradient(rgba(78, 166, 255, 0.2) 0%,
              rgba(78, 166, 255, 0) 100%);
          }

          .del_main {
            width: 100%;
            position: relative;

            .header {
              display: flex;
              align-items: center;
              padding-top: 20px;
              padding-left: 26px;
              font-size: 16px;

              .icon {
                width: 16px;
                height: 16px;
                margin-right: 10px;
                background-image: url(@/assets/images/coursewareManage/QR.png);
                background-size: 100% 100%;
              }

              .close_exit {
                position: absolute;
                right: 42px;
                cursor: pointer;
                width: 20px;
                height: 20px;
                background-image: url(@/assets/images/coursewareManage/close.png);
                background-size: 100% 100%;
              }
            }

            .body {
              width: 100%;
              margin: 34px auto 56px auto;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              // background-color: red;
              position: relative;

              .back {
                position: absolute;
                top: 30px;
                font-size: 12px;
                font-weight: 400;
                color: #666666;
              }
            }

            .del_btnbox {
              display: flex;
              margin: 30px auto;
              justify-content: center;

              .del_btn {
                width: 100px;
                height: 40px;
                background: rgba(64, 158, 255, 0);
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                cursor: pointer;

                .btnText {
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 40px;
                }
              }

              .btn1 {
                border: 1px solid rgba(64, 158, 255, 1);
                color: #4ea6ff;
                margin-right: 14px;
              }

              .btn2 {
                background-color: #4ea6ff;
                color: #ffffff;
              }
            }
          }
        }
      }
    }
  }
}

.footBox {
  position: fixed;
  bottom: 0;
  z-index: 999;
}
</style>
