<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="removeAllLevel" v-show="projectInfo.stageList[0].id != '0'"/>
          </div>
          <div class="btn btn3" @click="showModal" 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].taskDraftDtoList[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.remark || "暂无说明" }}
                          </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="editModal(index)"></div>
                    </div>
                    <div class="boxs_right">
                      <div class="imgIcon" @click="deleteStage(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?.projectInfo?.picUrl"/>
              </div>
              <div class="imgfor">
                <div class="forz" style="font-weight: 700">
                  {{ projectInfo?.projectInfo?.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?.projectInfo?.unlockMode === 1 ? '自由学习模式' : '闯关模式' }}
								</span>
                <unlock-mode :routerInfo="projectInfo.projectInfo" :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: `/taskpage`, query: { projectId: route.query.projectId, routerEdit: true  } }">
                <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.projectInfo?.id" :courseSyncFlag="projectInfo.projectInfo?.courseSyncFlag"
                         v-model:task-list="projectInfo.stageList[activeIndex].taskDraftDtoList" :chapter-list="projectInfo.stageList">
                <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>
              <div class="taskmain_switch">
                <span class="taskmain_switch_text" :style="{color: switchList ? '#4ea6ff' : '#ffb64e'}">{{switchList ?'自由学习模式':'顺序学习模式'}}</span>
                <a-switch v-model:checked="switchList" />
              </div>
              <button class="btn" @click="showChangeModal">
                移动任务到阶段
              </button>
              <div class="edit" @click="deleteTaskAll">
                <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].taskDraftDtoList" 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 ? 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 
                              v-if="element.type==2 && element.id"
                              style="color: #4ea6ff; cursor: pointer;" 
                              @click="openCourse(element,index)">
                              开课
                            </span>
								            <span 
                              v-if="element.type!==2"
                              style="color: #4ea6ff;cursor: pointer;" 
                              @click="editTaskForType(element,index)">
															编辑
														</span> 
                            <span 
                              v-if="projectInfo.projectInfo.status !==3 && element.type===2"
                              style="color: #4ea6ff;cursor: pointer;" 
                              @click="editTaskForType(element,index)">
															编辑
														</span>
                            <span style="color: #4ea6ff; cursor: pointer" @click="confirmDelTask(index)">
															删除
														</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                </Draggable>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="footbtn footBox">
      <div class="btnbox">
        <a-button class="btn btn1" @click="temporaryStorage" :loading="confirmLoading">暂存</a-button>
        <a-button class="btn btn1" @click="submitStorage" :loading="confirmLoading">确定</a-button>
        <router-link :to="{ path: `/taskpage`, query: { projectId: route.query.projectId, routerEdit: true } }">
          <!-- @click="cancelStorage" -->
          <a-button class="btn btn1" :loading="cancleLoading">取消</a-button>
        </router-link>
      </div>
    </div>
    <div>
      <div style="height:80px;width:100%;"/>
    </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;height:100%;width:100%">
            <a-textarea v-model:value="formValue.remark" style="height:100%;width:100% " show-count  rows=6 :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>
    <!-- 移动任务到阶段 -->
    <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]?.taskDraftDtoList?.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>
    <!-- 面授课开课弹框 -->
    <AddOpenCourse ref="coursePlanRef" :type="1"/>
  </div>
</template>

<script setup>
import {computed, onMounted, ref, watch,} from "vue";
import {message} from "ant-design-vue";
import * as api from "../../api/indexTaskadd";
import UnlockMode from "../../components/drawers/UnlockMode.vue";
import AddOpenCourse from "@/components/drawers/AddOpenCourse.vue";
import Draggable from "vuedraggable";
import {useRoute} from "vue-router";
import {TASK_TYPE} from "@/utils/const";
import {request} from "@/api/request";
import {PROJECT_DETAIL_MODIFY, PROJECT_RELEASE} from "@/api/apis";
import dialog from "@/utils/dialog";
import { editProjectModel } from "@/api/indexLearningPath";
const route = useRoute();
const courseRef = ref({})
const visiblene = ref(false);
const stage = ref(false);
const confirmLoading = ref(false);
const cancleLoading = ref(false);
const coursePlanRef = ref();
const projectInfo = ref({stageList: [{taskDraftDtoList: [{}]}], projectInfo: {}});
const activeIndex = ref(0);
const moveChapterIndex = ref(0);
const formValue = ref({taskDraftDtoList: []});


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

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

function changeStageIndex(index) {
  activeIndex.value = index
  projectInfo.value?.stageList[activeIndex.value]?.studyModel == 1 ? switchList.value = false : switchList.value = true
}

//获取任务列表
const getTask = async () => {
  await api.getDraftTask({projectId: route.query.projectId}).then((res) => {
    projectInfo.value = res.data.data
    projectInfo.value?.stageList[activeIndex.value]?.studyModel == 1 ? switchList.value = false : switchList.value = true
    console.log("获取任务列表:" + JSON.stringify(projectInfo.value) )
  });
};

const editTaskForType = (ele, index) => {
  courseRef.value['el' + ele.type].openDrawer(index, ele)
};
const switchList = ref(false)
watch(()=>switchList.value,(newVal)=>{
  newVal ? projectInfo.value.stageList[activeIndex.value].studyModel = 0 : projectInfo.value.stageList[activeIndex.value].studyModel = 1
  request(PROJECT_DETAIL_MODIFY, projectInfo.value)
})
const showChangeModal = () => {
  if (projectInfo.value?.stageList?.length <= 1) {
    message.warning("请添加阶段！");
    return
  }
  if (!projectInfo.value?.stageList[activeIndex.value]?.taskDraftDtoList?.filter(t => t.checked)?.length) {
    message.warning("请选择要移动的任务！");
    return
  }
  visiblene.value = true
};
const closeChangeModal = () => {
  visiblene.value = false;
};
//移动任务到阶段
const moveTask = () => {
  projectInfo.value.stageList[moveChapterIndex.value].taskDraftDtoList.push(...projectInfo.value.stageList[activeIndex.value].taskDraftDtoList.filter(t => t.checked).map((t) => ({
    ...t,
    checked: false
  })));
  projectInfo.value.stageList[activeIndex.value].taskDraftDtoList = projectInfo.value.stageList[activeIndex.value].taskDraftDtoList.filter(t => !t.checked);
  visiblene.value = false;
};
//批量删除
const deleteTaskAll = () => {
  if (!projectInfo.value?.stageList[activeIndex.value]?.taskDraftDtoList?.filter(t => t.checked)?.length) {
    message.warning("请选择要删除的任务！");
    return
  }
  dialog({
    content: '确定要删除所选任务吗?',
    ok: () => {
      for (let i = 0; i < projectInfo.value.stageList[activeIndex.value].taskDraftDtoList.length; i++) {
        const t = projectInfo.value.stageList[activeIndex.value].taskDraftDtoList[i]
        if (t.checked) {
          if (t.id) {
            t.checked = false;
            t.deleted = true;
          } else {
            projectInfo.value.stageList[activeIndex.value].taskDraftDtoList.splice(i, 1);
            i--;
          }
        }
      }
    },
  });
};

const confirmDelTask = (index) => {
  dialog({
    content: '确定要删除此任务吗?',
    ok: () => {
      message.success("删除成功");
      projectInfo.value.stageList[activeIndex.value].taskDraftDtoList[index].id ? (projectInfo.value.stageList[activeIndex.value].taskDraftDtoList[index].deleted = true) : projectInfo.value.stageList[activeIndex.value].taskDraftDtoList.splice(index, 1)
    },
  });
};
//关闭添加阶段弹窗
const closeModal = () => {
  stage.value = false
};
//显示添加阶段弹窗
const showModal = () => {
  formValue.value = {taskDraftDtoList: []}
  stage.value = true
};
const editModal = () => {
  formValue.value = projectInfo.value.stageList[activeIndex.value]
  formValue.value.edit = true
  stage.value = true
};

//添加阶段
function editStage() {
  if (!formValue.value.name) {
    message.warning("请输入阶段名称！");
    return
  }
  if(formValue.value.edit){
    stage.value = false
    return
  }
  formValue.value.studyModel = 0
  //替换 默认阶段
  if (projectInfo.value.stageList.length === 1 && projectInfo.value.stageList[0].id === '0') {
    formValue.value.taskDraftDtoList = [...projectInfo.value.stageList[0].taskDraftDtoList]
    projectInfo.value.stageList.push({...formValue.value})
    projectInfo.value.stageList.splice(0, 1)
  } else {
    projectInfo.value.stageList.push({...formValue.value})
    activeIndex.value = activeIndex.value + 1
  }
  formValue.value = {taskDraftDtoList: []}
  stage.value = false
}

//删除阶段
const deleteStage = () => {
  dialog({
    content: projectInfo.value.stageList.length === 1 ? "当前为最后一个阶段，删除后任务将被移出，为无阶段模式，确认删除阶段吗?" : '确认删除此阶段吗?',
    ok: () => {
      message.success("删除成功");
      if (projectInfo.value.stageList[activeIndex.value].id) {
        projectInfo.value.stageList[activeIndex.value].deleted = true
        projectInfo.value.stageList[activeIndex.value].taskDraftDtoList?.forEach((t, i) => t.id ? (t.deleted = true) : projectInfo.value.stageList[activeIndex.value].taskDraftDtoList.splice(i, 1));
      } else {
        projectInfo.value.stageList.splice(activeIndex.value, 1)
      }
      activeIndex.value && (activeIndex.value = activeIndex.value - 1);
    },
  });
};
onMounted(() => {
  getTask();
});
// 删除所有阶段
const removeAllLevel = () => {
  dialog({
    content: '确定要删除所有阶段吗?',
    ok: () => {
      message.success("删除成功");
      projectInfo.value.stageList.forEach((t, i) => {
        if (t.id) {
          t.checked = false;
          t.deleted = true;
        } else {
          projectInfo.value.stageList.splice(i, 1)
        }
      })
    },
  });
};
//全选任务或全不选任务
const selectRowAll = () => {
  if (selectAll.value === 1) {
    projectInfo.value.stageList[activeIndex.value].taskDraftDtoList.forEach(t => t.checked = false)
    return
  }
  projectInfo.value.stageList[activeIndex.value].taskDraftDtoList.forEach(t => t.checked = true)
};

//暂存
const currentTaskList = computed(() => {
      return projectInfo.value?.stageList[activeIndex.value]?.taskDraftDtoList.length;
    });
watch(currentTaskList, (oldValue,newValue) => {
      request(PROJECT_DETAIL_MODIFY, projectInfo.value)
      // request(PROJECT_RELEASE, {projectId: route.query.projectId})
      getTask()
});
const temporaryStorage = async () => {
  confirmLoading.value = true
  await request(PROJECT_DETAIL_MODIFY, projectInfo.value)
  await getTask()
  message.success("暂存成功");
  confirmLoading.value = false
};
//确定
const submitStorage = async () => {
  if (projectInfo.value.projectInfo.status === 3) {
    dialog({
      content: '该项目已经发布，修改后如未点击暂存当前操作未保存数据将丢失，确认保存?',
      ok: async () => {
        confirmLoading.value = true
        request(PROJECT_DETAIL_MODIFY, projectInfo.value)
        await getTask()
        await request(PROJECT_RELEASE, {projectId: route.query.projectId})
        message.success("保存成功");
        confirmLoading.value = false;
        getTask();
      },
    })
    return
  }
  confirmLoading.value = true
  await request(PROJECT_DETAIL_MODIFY, projectInfo.value)
  await getTask()
  message.success("阶段和任务数据已保存")
  confirmLoading.value = false
};
//取消
const cancelStorage = async () => {
  cancleLoading.value = true
  await getTask()
  message.success("取消成功");
  cancleLoading.value = false
};

const openCourse = (ele) => {
  coursePlanRef.value.openDrawer(ele);
}

</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: 83%;
    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;
      }
    }
    .intext {
   

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

.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;
      position: sticky;
      top: 0;
      height: 80vh;
      overflow-y: auto;

      .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;
      position: sticky;
      top: 0;
      z-index: 999;

      .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;
          }
          .taskmain_switch{
            position: absolute;
            top: 0;
            right: 268px;
            width: 150px;
            height: 40px;
            border-radius: 8px;
            cursor: pointer;
            text-align: center;
            line-height: 40px;

            .taskmain_switch_text{
              margin-right: 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-color: #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: 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;
          position: absolute;
          z-index: 888;
          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: 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;
        }
      }
    }
  }
}

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