<template>
  <div class="taskadd">
    <div style="display: flex">
      <div class="left clearfix">
        <div class="leftmain">
          <div class="tit">
            阶段
            <img src="../../assets/images/projectadd/right.png" style="margin-left: 10px; cursor: pointer"
              @click="showCancel" v-show="projectInfo.stageList[0].id != '0'" />
          </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="projectInfo.stageList" chosenClass="chosen" ghostClass="ghost" forceFallback="true"
              group="stage" animation="500" v-if="JSON.stringify(projectInfo.stageList[0].taskTemplateList[0]) != '{}'">
              <template #item="{ element, index }">
                <div class="items" v-if="element.id !== '0' && !element.deleted"
                  :class="activeIndex === index ? 'active' : ''" @click="changeStageIndex(index)">
                  <div class="items1">
                    <div class="boxs_left">
                      <a-popover placement="topLeft" trigger="click">
                        <template #content>
                          <div style="width: 130px">
                            {{ element.name || "暂无说明" }}
                          </div>
                        </template>
                        <template #title>
                          <span>阶段说明</span>
                        </template>
                        <div class="script">
                          <span style="font-size: 12px; color: #ffffff">说明</span>
                        </div>
                      </a-popover>
                      <div class="imgIcon" @click="showModal(element, 'edit')"></div>
                    </div>
                    <div class="boxs_right">
                      <div class="imgIcon" @click="showDeleteStage(index)"></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>
      <div class="right">
        <div class="addhead">
          <div class="filt">
            <div class="le">
              <div class="leftimg">
                <img class="img" :src="projectInfo?.projectTemplateInfo?.picUrl" />
              </div>
              <div class="imgfor">
                <div class="forz" style="font-weight: 700">
                  {{ projectInfo?.projectTemplateInfo?.name }}
                </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;">-->
              <!--									{{ projectInfo?.projectTemplateInfo?.unlockMode === 1 ? '自由学习模式' : '闯关模式' }}-->
              <!--								</span>-->
              <!--                <unlock-mode :routerInfo="projectInfo.projectTemplateInfo" :types="2">-->
              <!--                  <a-button type="primary" size="large" style="margin-left:10px;border-radius: 10px;">切换模式-->
              <!--                  </a-button>-->
              <!--                </unlock-mode>-->
              <!--              </div>-->
              <div class="line"></div>
              <router-link :to="{ path: `/libraryAdd`, query: { projectId: route.query.projectId } }">
                <div style="display: flex">
                  <img class="img2" 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">
            <div v-if="key != 13">
              <component :is="value.component" :ref="el => courseRef['el' + key] = el" :type="key" :infoType="1" :id="projectInfo.projectTemplateInfo?.id"
                v-model:task-list="projectInfo.stageList[activeIndex].taskTemplateList">
                <div class="itcon">
                  <div class="img">
                    <img :src="value.img" />
                  </div>
                  <div class="text">{{ value.name }}</div>
                </div>
              </component>
            </div>
            <div>
            </div>
            <div class="lin"></div>
          </div>
        </div>
        <div class="boom">
          <div class="boomcen">
            <div class="onerow">
              <div class="taskmain">任务列表</div>
              <button class="btn" @click="showChangeModal">
                移动任务到阶段
              </button>
              <div class="edit" @click="showdeAll">
                <img class="editimg" src="../../assets/images/projectadd/delete1.png" />
                <span class="editext">批量删除</span>
              </div>
            </div>
            <!-- 无数据样式 -->
            <div class="notable" style="display: none">
              <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 class="rwbox">
              <div class="tableBox" style="border: 1px solid #f2f6fc">
                <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: 120px; text-align: center; margin-right: 20px">
                    操作
                  </div>
                </div>
                <Draggable v-model="projectInfo.stageList[activeIndex].taskTemplateList" chosenClass="chosen"
                  ghostClass="ghost" forceFallback="true" group="task" animation="500">
                  <template #item="{ element, index }">
                    <div 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" v-if="!element.deleted">
                      <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 ? 999 : 998, }">必修</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 v-if="element.type !== 5" style="
                                      color: #4ea6ff;
                                      margin-right: 25px;
                                      cursor: pointer;
                                    " @click="editTaskForType(element, index)">
                              编辑
                            </span>
                            <span v-else style="
      															color: #4ea6ff;
      															margin-right: 55px;
      															cursor: pointer;
      															">
                            </span>
                            <span style="color: #4ea6ff; cursor: pointer" @click="showDelete(index)">
                              删除
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                </Draggable>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="footbtn">
      <div class="btnbox">
        <a-button class="btn btn1" @click="submitStorage" :loading="templateLoading">确定</a-button>
        <a-button class="btn btn1" @click="cancelStorage" :loading="cancleLoading">取消</a-button>
      </div>
    </div>

    <!-- 添加阶段弹窗 -->
    <div>
      <a-modal v-model:visible="stage" :title="null" @ok="closeModal" :footer="null" :closable="false"
        wrapClassName="addstage" width="624px" height="388px" :centered="true" @cancel="closeModal">
        <div class="modalHeader" style="
                  width: 100%;
                  height: 68px;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                ">
          <div class="headerLeft" style="margin-left: 32px">
            <span class="headerLeftText" style="font-size: 16px">编辑/添加阶段</span>
          </div>
          <div style="cursor: pointer; margin-right: 32px" @click="closeModal">
            <img style="width: 22px; height: 22px" src="../../assets/images/basicinfo/close22.png" />
          </div>
        </div>
        <div class="modalMain" style="width: 100%">
          <div class="name">
            <div class="namebox">
              <div>
                <img src="@/assets/images/coursewareManage/asterisk.png" alt="" />
              </div>
              <div class="inname">阶段名称：</div>
            </div>
            <div class="in">
              <a-input v-model:value="formValue.name" show-count :maxlength="20" placeholder="请输入阶段名称" />
            </div>
          </div>
          <div class="name" style="display: flex; align-items: flex-start">
            <div class="namebox">
              <div class="inname">阶段说明：</div>
            </div>
            <div class="intext" style="margin-left: 14px">
              <a-textarea v-model:value="formValue.remark" style="height: 88px" show-count :maxlength="100"
                placeholder="请输入阶段说明" />
            </div>
          </div>
          <div style="
                    display: flex;
                    width: 100%;
                    justify-content: center;
                    margin-top: 40px;
                  ">
            <button @click="closeModal" style="
                      cursor: pointer;
                      height: 40px;
                      width: 100px;
                      border: 1px solid #4ea6ff;
                      border-radius: 4px;
                      color: #fff;
                      background-color: #4ea6ff;
                    ">
              取消
            </button>
            <button @click="editStage" style="
                      cursor: pointer;
                      margin-left: 16px;
                      margin-bottom: 40px;
                      height: 40px;
                      width: 100px;
                      border: 1px solid #4ea6ff;
                      border-radius: 4px;
                      color: #ffffff;
                      background-color: #4ea6ff;
                    ">
              确定
            </button>
          </div>
        </div>
      </a-modal>
    </div>
    <!-- 确认添加阶段弹窗 -->
    <a-modal v-model:visible="confirmModal" :footer="null" wrapClassName="ConfirmModal" centered="true">
      <div class="delete">
        <div class="del_header"></div>
        <div class="del_main">
          <div class="header">
            <div class="icon"></div>
            <span>提示</span>
            <div class="close_exit" @click="closeConfirm"></div>
          </div>
          <div class="body">
            <span>您确定要添加阶段吗</span>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn2" @click="closeConfirm" style="margin-right: 32px;">
              <div class="btnText">取消</div>
            </div>
            <div class="del_btn btn2" @click="showModal">
              <div class="btnText">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 确认取消阶段弹窗 -->
    <a-modal v-model:visible="cancelModal" :footer="null" wrapClassName="ConfirmModal" centered="true">
      <div class="delete">
        <div class="del_header"></div>
        <div class="del_main">
          <div class="header">
            <div class="icon"></div>
            <span>提示</span>
            <div class="close_exit" @click="closeCancel"></div>
          </div>
          <div class="body">
            <span>您确定要删除所有阶段吗？</span>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn2" @click="closeCancel" style="margin-right: 32px;">
              <div class="btnText">取消</div>
            </div>
            <div class="del_btn btn2" @click="removeAllLevel">
              <div class="btnText">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 确认删除任务弹窗 -->
    <a-modal v-model:visible="deleteModal" :footer="null" wrapClassName="ConfirmModal" centered="true">
      <div class="delete">
        <div class="del_header"></div>
        <div class="del_main">
          <div class="header">
            <div class="icon"></div>
            <span>提示</span>
            <div class="close_exit" @click="closeDelete"></div>
          </div>
          <div class="body">
            <span>您确定要删除此任务吗</span>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn2" @click="closeDelete" style="margin-right: 32px;">
              <div class="btnText">取消</div>
            </div>
            <div class="del_btn btn2" @click="confirmDelTask">
              <div class="btnText">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <a-modal v-model:visible="deAll" :footer="null" :closable="cC" wrapClassName="ConfirmModal" :centered="true">
      <div class="delete">
        <div class="del_header"></div>
        <div class="del_main">
          <div class="header">
            <div class="icon"></div>
            <span>提示</span>
            <div class="close_exit" @click="closeDeAll"></div>
          </div>
          <div class="body">
            <span>您确定要批量删除任务吗</span>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn2" @click="closeDeAll" style="margin-right: 32px;">
              <div class="btnText">取消</div>
            </div>
            <div class="del_btn btn2" @click="deleteTaskAll">
              <div class="btnText">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 移动任务到阶段 -->
    <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">已选中{{
              projectInfo.stageList[activeIndex]?.taskTemplateList?.filter(t => t.checked)?.length
            }}个任务
            </div>
            <div class="select">
              <a-select v-model:value="moveChapterIndex" style="width: 100%" placeholder="请选择阶段" allowClear
                :options="projectInfo.stageList.map(({ name: label }, value) => ({ label, value, disabled: value === activeIndex }))"></a-select>
            </div>
            <div class="btn">
              <button style="cursor: pointer" class="sameb btn2" @click="closeChangeModal">
                取消
              </button>
              <button style="cursor: pointer" class="sameb btn2" @click="moveTask">
                确定
              </button>
            </div>
          </div>
        </div>
      </div>
    </a-modal>

    <!-- 是否删除阶段弹窗 -->
    <a-modal v-model:visible="deleteStageModal" :footer="null" :closable="cC" wrapClassName="ConfirmModal"
      centered="true">
      <div class="delete">
        <div class="del_header"></div>
        <div class="del_main">
          <div class="header">
            <div class="icon"></div>
            <span>提示</span>
            <!-- <div class="close_exit" @click="closeDeleteStage"></div> -->
          </div>
          <div class="body">
            <span style="width:320px;display:flex;justify-content:center;align-items:center;">{{
              projectInfo.stageList?.length === 1 ? "当前为最后一个阶段，删除后任务将被移出，为无阶段模式，确认删除阶段吗?" : "您确定要删除此阶段"
            }}</span>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn2" @click="closeDeleteStage" style="margin-right: 32px;">
              <div class="btnText">取消</div>
            </div>
            <div class="del_btn btn2" @click="deleteStage">
              <div class="btnText">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { computed, onMounted, onUnmounted, ref, watch, } from "vue";
import { message } from "ant-design-vue";
import * as api from "../../api/indexTemplate";
import Draggable from "vuedraggable";
import { useRoute } from "vue-router";
import { TASK_TYPE } from "@/utils/const";
import { request } from "@/api/request";
import { PROJECT_TEMPLATE_DETAIL_MODIFY } from "@/api/apis";

const route = useRoute();
const courseRef = ref({})
const visiblene = ref(false);
const deAll = ref(false);
const deleteModal = ref(false);
const confirmModal = ref(false);
const stage = ref(false);
const ischapterEdit = ref(false);//修改阶段标志
const cancelModal = ref(false);
const deleteStageModal = ref(false);
const templateLoading = ref(false);
const cancleLoading = ref(false);
const projectInfo = ref({
  stageList: [{
    "id": "0",
    taskTemplateList: [{
    }]
  }],
  projectTemplateInfo: {

  }
});
const activeIndex = ref(0);
const moveChapterIndex = ref(0);
const deleteIndex = ref(0);
const formValue = ref({ taskTemplateList: [] });


const selectAll = computed(() => {
  const selectedNum = projectInfo.value?.stageList[activeIndex.value]?.taskTemplateList?.filter(t => t.checked)?.length
  if (!selectedNum) {
    return 0
  }
  if (selectedNum === projectInfo.value?.stageList[activeIndex.value]?.taskTemplateList?.length) {
    return 1
  }
  return 2
})

watch(() => projectInfo.value.stageList, () => {
  projectInfo.value.stageList.forEach((t, i) => {
    t.sort = i;
    t.taskTemplateList?.forEach((s, j) => {
      s.sort = j
    })
  })
}, { deep: true })

function changeStageIndex(index) {
  activeIndex.value = index
}

//获取任务列表
const getTask = async () => {
  await api.templateEditDetail(route.query.projectId).then((res) => {
    projectInfo.value = res.data.data
    if (projectInfo.value.stageList.length == 0) {
      projectInfo.value.stageList = [{
        "id": "0",
        taskTemplateList: []
      }]
    }
    console.log("获取任务列表信息：" + JSON.stringify(projectInfo.value));
  });
};

const editTaskForType = (ele, index) => {
  courseRef.value['el' + ele.type].openDrawer(index, ele)
};

const showChangeModal = () => {
  if (projectInfo.value?.stageList?.length <= 1) {
    message.warning("请添加阶段！");
    return
  }
  if (!projectInfo.value?.stageList[activeIndex.value]?.taskTemplateList?.filter(t => t.checked)?.length) {
    message.warning("请选择要移动的任务！");
    return
  }
  visiblene.value = true
};
const closeChangeModal = () => {
  visiblene.value = false;
};
//移动任务到阶段
const moveTask = () => {
  console.log("移动到阶段：" + JSON.stringify(projectInfo.value));
  projectInfo.value.stageList[moveChapterIndex.value].taskTemplateList.push(...projectInfo.value.stageList[activeIndex.value].taskTemplateList.filter(t => t.checked).map((t) => ({
    ...t,
    checked: false
  })));
  projectInfo.value.stageList[activeIndex.value].taskTemplateList = projectInfo.value.stageList[activeIndex.value].taskTemplateList.filter(t => !t.checked);
  visiblene.value = false;
};
//批量删除
const deleteTaskAll = () => {
  projectInfo.value.stageList[activeIndex.value].taskTemplateList.filter(t => t.checked).forEach(t => {
    t.checked = false;
    t.deleted = true;
  })
  deAll.value = false;
};

const confirmDelTask = () => {
  projectInfo.value.stageList[activeIndex.value].taskTemplateList[deleteIndex.value].deleted = true
  deleteModal.value = false
};
//关闭添加阶段弹窗
const closeModal = () => {
  stage.value = false
};
//显示添加阶段弹窗
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 = {};
  }
  stage.value = true
};

//添加阶段
function editStage() {
  if (!formValue.value.name) {
    message.warning("请输入阶段名称！");
    return
  }
  //是否修改阶段2023-02-27add
  if (ischapterEdit.value) {//修改
    projectInfo.value.stageList[activeIndex.value] = formValue.value;
  } else {//添加
    projectInfo.value.stageList.push({ ...formValue.value })
  }
  //替换 默认阶段
  if (projectInfo.value.stageList.length === 1 && projectInfo.value.stageList[0].id === '0') {
    formValue.value.taskTemplateList = [...projectInfo.value.stageList[0].taskTemplateList]
    console.log("修改后的阶段信息：" + JSON.stringify(projectInfo.value.stageList[activeIndex.value]))
    projectInfo.value.stageList.splice(0, 1)
  } else {
    activeIndex.value = activeIndex.value + 1
    console.log("activeIndex.value：" + activeIndex.value);
  }
  formValue.value = { taskTemplateList: [] }
  stage.value = false
}

//打开删除阶段弹窗
const showDeleteStage = (index) => {
  deleteStageModal.value = true;
  deleteIndex.value = index;
};
//关闭删除阶段弹窗
const closeDeleteStage = () => {
  deleteStageModal.value = false;
};
//删除阶段
const deleteStage = () => {
  console.log("删除阶段前的数据：" + JSON.stringify(projectInfo.value));
  if (projectInfo.value.stageList.length === 1) {
    projectInfo.value.stageList = [{ id: '0', stageId: '0', name: '', remark: '', taskTemplateList: [] }];
    deleteStageModal.value = false;
    return
  }
  projectInfo.value.stageList[activeIndex.value].deleted = true;
  console.log("删除阶段后的数据：" + JSON.stringify(projectInfo.value));
  activeIndex.value = activeIndex.value - 1;
  deleteStageModal.value = false;
};
onMounted(() => {
  document.getElementsByTagName("main")[0].style.background = "rgb(245, 247, 250,1)";
  document.getElementsByTagName("main")[0].style.boxShadow = "none";
  getTask();
});

onUnmounted(() => {
  document.getElementsByTagName("main")[0].style.background = "#ffffff";
  document.getElementsByTagName("main")[0].style.boxShadow = "0px 1px 35px 0px rgba(118, 136, 166, 0.07)";
});
const closeConfirm = () => {
  confirmModal.value = false;
};
const showCancel = () => {
  cancelModal.value = true;
};
const closeCancel = () => {
  cancelModal.value = false;
};
const showDelete = (index) => {
  deleteModal.value = true;
  deleteIndex.value = index
};
const closeDelete = () => {
  deleteModal.value = false;
};
// 删除所有阶段
const removeAllLevel = () => {

};
//全选任务或全不选任务
const selectRowAll = () => {
  if (selectAll.value === 1) {
    projectInfo.value.stageList[activeIndex.value].taskTemplateList.forEach(t => t.checked = false)
    return
  }
  projectInfo.value.stageList[activeIndex.value].taskTemplateList.forEach(t => t.checked = true)
};
const showdeAll = () => {
  if (!projectInfo.value?.stageList[activeIndex.value]?.taskTemplateList?.filter(t => t.checked)?.length) {
    message.warning("请选择要删除的任务！");
    return
  }
  deAll.value = true
};
const closeDeAll = () => {
  deAll.value = false;
};

//确定
const submitStorage = async () => {
  templateLoading.value = true
  await request(PROJECT_TEMPLATE_DETAIL_MODIFY, projectInfo.value)
  // await getTask()
  message.success("保存成功");
  templateLoading.value = false
};
//取消
const cancelStorage = async () => {
  cancleLoading.value = true
  await getTask()
  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;
              }
            }
          }
        }
      }
    }
  }
}

.addstage {
  .ant-modal {
    .ant-modal-body {
      padding: 0 !important;

      .modalHeader {
        background: linear-gradient(0deg,
            rgba(78, 166, 255, 0) 0%,
            rgba(78, 166, 255, 0.2) 100%);
      }

      .modalMain {
        .ant-input-textarea-show-count {
          position: relative;
          height: 88px;
        }

        .ant-input-textarea-show-count::after {
          position: absolute;
          right: 10px;
          bottom: 5px;
        }
      }
    }
  }

  .name {
    width: 78%;
    display: flex;
    margin-top: 20px;
    align-items: center;

    .namebox {
      width: 120px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-shrink: 0;

      .nameimg {
        width: 10px;
        height: 10px;
      }
    }

    .d {
      margin-top: 8px;
      font-size: 25px;
      color: #ff4e4e;
    }

    .box {
      position: relative;
      margin-left: 14px;

      .box1 {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 50px;
        margin-left: -25px;
        margin-top: -5px;
        border-top: 2px solid rgba(78, 166, 255, 1);
      }

      .box2 {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 50px;
        margin-top: -25px;
        border-left: 2px solid rgba(78, 166, 255, 1);
      }
    }

    .inname {
      color: #000000;
      font-size: 14px;
      margin-left: 7px;
    }

    .in {
      margin-left: 14px;
      flex: 1;

      .ant-input-affix-wrapper {
        width: 384px;
        border-radius: 8px;
      }

      .ant-input {
        border-radius: 8px;
        height: 30px;
      }
    }
  }
}

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

.taskadd {
  width: 100%;
  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 {
      margin-top: 20px;
      min-height: 800px;

      .tit {
        margin-left: 20px;
        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 {
          opacity: 0 !important;
        }

        .items {
          width: 171px;
          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: 56px;
                height: 24px;
                background: #ffb64e;
                border-radius: 6px;
                margin-right: 12px;
                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;
              font-weight: bold;

              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-line-clamp: 2;
              display: -webkit-box;
              -webkit-box-orient: vertical;
            }
          }
        }

        .active {
          opacity: 1;
        }
      }
    }
  }

  .right {
    flex: 1;
    display: flex;
    flex-direction: column;

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

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

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

          .img2 {
            width: 42px;
            height: 42px;
            margin-right: 18px;
          }

          .pub {
            color: #57c887;
            font-size: 14px;
            margin-top: 5px;
            margin-right: 30px;
            cursor: pointer;
            white-space: nowrap;
          }

          @media screen and (max-width: 1050px) {
            .pub {
              margin-right: 10px;
            }

            .line {
              margin-right: 10px;
            }
          }

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

          .role {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: 400;
            color: #333330;
            line-height: 36px;
            cursor: pointer;
            position: relative;
            margin-right: 20px;

            .roleArrow {
              width: 13px;
              height: 7px;
              margin-left: 8px;
              background-image: url(../../assets/images/navtop/down.png);
              background-size: 100%;
            }

            .roleItems {
              width: 109px;
              height: 90px;
              padding-top: 10px;
              background: #ffffff;
              box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
              position: absolute;
              top: 35px;
              right: 0px;
              text-align: center;
              display: none;
              z-index: 100;
            }

            .roleItem {
              font-size: 14px;
              font-weight: 400;
              color: rgba(79, 81, 86, 1);
              line-height: 36px;
            }

            .roleItem:hover {
              color: #4ea6ff;
            }
          }

          .role:hover .roleItems {
            display: block;
          }

          .role:hover .roleArrow {
            background-image: url(../../assets/images/navtop/up.png);
          }
        }
      }
    }

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

      .item {
        height: 115px;
        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%;
      flex: 1;
      background-color: #fff;
      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
      display: flex;
      justify-content: center;

      .boomcen {
        width: 95%;

        .onerow {
          width: 100%;
          display: flex;
          height: 40px;
          position: relative;
          margin-top: 20px;

          .taskmain {
            font-size: 18px;
            color: #000000;
            margin-top: 10px;
          }

          .btn {
            position: absolute;
            top: 0;
            right: 130px;
            background-color: #4ea6ff;
            width: 130px;
            height: 40px;
            border-radius: 8px;
            border: 1px solid #4ea6ff;
            color: #ffffff;
            cursor: pointer;
          }

          .edit {
            position: absolute;
            right: 0;
            top: 0;
            color: #fff;
            width: 120px;
            height: 40px;
            border: 1px solid #4ea6ff;
            background: #4ea6ff;
            border-radius: 8px;

            .editimg {
              width: 15px;
              height: 15px;
              margin-top: -2px;
              margin-left: 25px;
              margin-right: 5px;
            }

            .editext {
              line-height: 40px;
            }
          }

          // .edit:hover {
          //   color: #ffffff;
          //   background-color: #4ea6ff;
          //   cursor: pointer;

          //   .editimg {
          //     background-image: url("../../assets/images/projectadd/delete1.png");
          //   }
          // }
        }

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

          .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-top: 77px;
            margin-bottom: 109px;
            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;
              }
            }
          }
        }

        .rwbox {
          position: relative;

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

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

            .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-bottom: 20px;
            margin-top: 20px;

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

            .ghost {
              opacity: 0;
            }

            .tableRow:hover {
              background-color: #f2f6fc;
            }

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

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

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

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

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

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

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

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

    .img {
      width: 17px;
      height: 14px;
      background-image: url("../../assets/images/leveladd/z1.png");
    }

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

  .footbtn {
    width: 100%;
    height: 80px;
    margin-top: 16px;
    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;
      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;
        }
      }
    }
  }
}
</style>
