<template>
  <div class="leveladddetail">
    <div style="display: flex">
      <div class="left clearfix">
        <div class="leftmain">
          <div class="tit" style="margin-left: 18px">关卡</div>
          <div class="btn btn3" @click="showModal()" style="margin-left: 19px">
            <div class="search"></div>
            <div class="btnText">添加关卡</div>
          </div>
          <div class="maincon" style="background-color: #fff">
            <!-- <div
            class="items"
            :class="{ active: isActive == true }"
            @click="changebgc"
            v-for="item in level"
            :key="item.id"
          > -->
            <draggable v-model="level" chosenClass="chosen" ghostClass="ghost" forceFallback="true" group="stage"
              animation="500" @end="changeSort">
              <template #item="{ element }">
                <div class="items" :class="isactive == element.id ? 'active' : ''"
                  @click="changebgc(element.id)">
                  <div class="items1">
                    <div class="boxs_left">
                      <a-popover placement="topLeft" trigger="click">
                        <template #content>
                          <div style="width: 130px">
                            <div>
                              {{ element.remark ? element.remark : "暂无说明" }}
                            </div>
                          </div>
                        </template>
                        <template #title>
                          <span>关卡说明</span>
                          <!-- <span style="float:right">
                            {{ element.status === 0 ? '草稿' : element.status === 1 ? '已发布' : '' }}
                          </span> -->
                        </template>
                        <div style="display:flex;justify-content: flex-start;margin-right: 8px;">
                          <div class="script">
                            <span style="font-size: 12px; color: #ffffff">说明</span>
                          </div>
                          <!-- <div class="script">
                            <span style="font-size: 12px; color: #ffffff">{{
                              element.status === 0 ? '草稿' : element.status
                                === 1 ? '已发布' : ''
                            }}</span>
                          </div> -->
                        </div>

                      </a-popover>

                      <div class="imgIcon" @click="showModal(element)"></div>
                    </div>
                    <div class="boxs_right">
                      <div class="imgIcon" @click="showDeleteChapter(element.id)"></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 class="itemle">
                    <div class="tit">{{ item.remark }}</div>
                    <div class="name">{{ item.name }}</div>
                  </div> -->
                </div>
              </template>
            </draggable>
            <!-- <div
            class="items"
            :class="isactive == index ? 'active' : ''"
            @click="changebgc(index)"
            v-for="(item, index) in level"
            :key="item.chapterId"
          >
            <div class="items1">
              <div class="boxs_left">
                <div class="script">
                  <span style="font-size: 12px; color: #ffffff">说明</span>
                </div>
                <div class="imgIcon"></div>
              </div>
              <div class="boxs_right">
                <div class="imgIcon"></div>
              </div>
            </div>
            <div class="items2">
              <div class="nname">{{ item.name }}</div>
            </div>
          </div> -->
          </div>
        </div>
      </div>
      <a-modal v-model:visible="modal" centered="true" :footer="null" :closable="clos" wrapClassName="AddLevell"
        @cancel="closeModal">
        <div class="header">
          <div class="headmain">
            <div class="add">编辑/添加关卡</div>
            <div class="img" style="cursor: pointer" @click="closeModal"></div>
          </div>
        </div>
        <div class="main">
          <div class="inma">
            <div class="name">
              <div class="d" style="margin-top: 2px; margin-right: 2px">
                <img style="width: 10px; height: 10px" src="../../assets/images/basicinfo/asterisk.png" />
              </div>
              <div class="fir">关卡名称：</div>
              <div class="input">
                <a-input style="width: 100%" v-model:value="value1" :maxlength="20" placeholder="请输入关卡名称" />
              </div>
              <div class="co">{{ value1?value1.length:0 }}/20</div>
            </div>
            <div class="name">
              <div 
                class="d" 
                style="width: 10px;
                  height: 10px;
                  margin-top: 2px;
                  margin-right: 2px;"></div>
              <div class="fir">关卡说明：</div>
              <div class="input">
                <a-textarea style="width: 100%" v-model:value="value2" :maxlength="100" placeholder="请输入关卡说明"
                  :rows="5" />
              </div>
              <div class="co1">{{ value2?value2.length:0 }}/100</div>
            </div>
            <div class="btn">
              <button class="btn1" @click="closeModal">取消</button>
              <button class="btn2" @click="editChapter">确定</button>
            </div>
          </div>
        </div>
        <div class="aeLoading" :style="{ display: addLoading ? 'flex' : 'none' }">
          <a-spin :spinning="addLoading" :tip="updateChapterID ? '修改中...' : ''" />
        </div>
      </a-modal>
      <div class="right" :style="{ display: gqxy_hs ? 'block' : 'none' }">
        <div class="addhead">
          <div class="filt">
            <div class="le">
              <div class="leftimg">
                <img class="img" :src="picUrl" />
              </div>
              <div class="imgfor">
                <div class="forz">{{ styTitle }}</div>
                <div class="fort">创建时间：{{ creTime }}</div>
              </div>
            </div>
            <div class="rightt">
              <!-- 2022-11-30注释 后面放开 -->
              <div class="select" style="margin-right:90px;">
                <span>学习模式：</span>
                <!-- <div class="inputbox"> -->
                <!-- <input type="text" :placeholder="unlockMode === 1?'自由学习模式':unlockMode === 2?'闯关模式':''" /> -->
                <a-select v-model:value="unlockMode" ref="select" size="small" style="width: 150px" disabled>
                  <a-select-option :value="1">自由学习模式</a-select-option>
                  <a-select-option :value="2">闯关模式</a-select-option>
                  <a-select-option :value="3">闯关模式</a-select-option>
                </a-select>
                <a-button type="primary" size="large" style="border-radius: 8px;margin-left: 24px;"
                  @click="showModeVisible">切换模式</a-button>
                <!-- <div class="bottonbox" @click="showModeVisible">
                    <div class="btnText">切换模式</div>
                  </div> -->
                <!-- </div> -->
                <unlock-mode ref="unlockModeModal" v-model:unlockModeVisible="unlockModeVisible"
                  :objData="routerInfo" @saveUnlock="saveUnlock" @closeUnlockModal="closeUnlockModal" />
              </div>
              <div class="line"></div>
              <router-link :to="{ path: '/leveladd', query:{ routerId: routerId } }">
                <div style="display: flex">
                  <img class="img2" style="margin-right: 22px" src="../../assets/images/leveladd/back.png" />
                  <div class="return">返回</div>
                </div>
              </router-link>
            </div>
          </div>
        </div>
        <div class="mid">
          <div class="item">
            <div class="itcon" @click="showDrawerAddOnline()">
              <div class="img">
                <img src="../../assets/images/leveladd/zai.png" />
              </div>
              <div class="text">在线</div>
            </div>
            <!-- 添加在线侧弹窗 -->
            <div>
              <add-online v-model:addonlineVisible="addonlinevisible" @changeData="updateTableData"
                v-model:isactive="isactive" v-model:routerId="routerId" v-model:routerTaskId="routerTaskId"
                v-model:projectId="projectId" v-model:chooseStageId="chooseStageId"
                v-model:projectTaskId="projectTaskId" v-model:edit="edit" v-model:EditOnlineId="EditOnlineId"
                :isLevel="isLevel" v-model:taskIdDraft="taskIdDraft" v-model:taskCourseID="taskCourseID" />
            </div>
            <!-- 添加在线侧弹窗 -->
            <div class="lin"></div>
          </div>
          <div class="item">
            <div class="itcon" @click="showAddface()">
              <div class="img">
                <img src="../../assets/images/leveladd/mian.png" />
              </div>
              <div class="text">面授</div>
            </div>
            <!-- 添加面授 -->
            <add-faceteach @changeData="updateTableData" v-model:edit="edit" v-model:isactive="isactive"
              v-model:routerId="routerId" v-model:chooseStageId="chooseStageId" v-model:routerTaskId="routerTaskId"
              v-model:addfaceteachVisible="addfaceteachVisible" v-model:EditFaceId="EditFaceId" v-model:taskIdDraft="taskIdDraft" v-model:taskCourseID="taskCourseID" :isLevel="isLevel"  />
            <!-- 添加面授 -->
            <div class="lin"></div>
          </div>
          <div class="item">
            <div class="itcon" @click="showDrawerAddCase()">
              <div class="img">
                <img src="../../assets/images/leveladd/an.png" />
              </div>
              <div class="text">案例</div>
            </div>
            <!-- 添加案例侧弹窗 -->
            <div>
              <add-case v-model:addcaseVisible="addcasevisible" @changeData="updateTableData"
                v-model:isactive="isactive" v-model:routerId="routerId" v-model:routerTaskId="routerTaskId"
                v-model:projectId="projectId" v-model:chooseStageId="chooseStageId"
                v-model:projectTaskId="projectTaskId" v-model:edit="edit" v-model:EditCaseId="EditCaseId"
                :isLevel="isLevel" v-model:taskIdDraft="taskIdDraft" v-model:taskCourseID="taskCourseID" />
            </div>
            <!-- 添加案例侧弹窗 -->
            <div class="lin"></div>
          </div>
          <div class="item">
            <div class="itcon">
              <div class="img" @click="showDrawerAddHomework">
                <img src="../../assets/images/leveladd/zuo.png" />
              </div>
              <div class="text">作业</div>
            </div>
            <!-- 添加作业侧弹窗 -->
            <div>
              <add-homework v-model:addhomeworkVisible="addhomeworkvisible" :isLevel="isLevel"
                @changeData="updateTableData" v-model:isactive="isactive" v-model:edit="edit"
                v-model:routerId="routerId" v-model:chooseStageId="chooseStageId" v-model:EditWorkId="EditWorkId"
                v-model:routerTaskId="routerTaskId" v-model:taskIdDraft="taskIdDraft" v-model:taskCourseID="taskCourseID" />
            </div>
            <div class="lin"></div>
          </div>
          <div class="item">
            <div class="itcon">
              <div class="img" @click="() => showDrawerAddTest()">
                <img src="../../assets/images/leveladd/kao.png" />
              </div>
              <div class="text">考试</div>
            </div>
            <!-- 添加考试侧弹窗 -->
            <div>
              <add-test v-model:addtestVisible="addtestvisible" :isLevel="isLevel" @changeData="updateTableData"
                v-model:isactive="isactive" v-model:edit="edit" v-model:routerId="routerId"
                v-model:chooseStageId="chooseStageId" v-model:EditTestId="EditTestId"
                v-model:routerTaskId="routerTaskId" v-model:taskIdDraft="taskIdDraft" v-model:taskCourseID="taskCourseID" />
            </div>
            <div class="lin"></div>
          </div>
          <div class="item">
            <div class="itcon" @click="showDrawerAddLive">
              <div class="img">
                <img src="../../assets/images/leveladd/zhi.png" />
              </div>
              <div class="text">直播</div>
            </div>
            <div>
              <add-live v-model:addliveVisible="addlivevisible" :isLevel="isLevel" @changeData="updateTableData"
                v-model:isactive="isactive" v-model:routerId="routerId" v-model:chooseStageId="chooseStageId"
                v-model:routerTaskId="routerTaskId" v-model:edit="edit" v-model:EditLiveId="EditLiveId" v-model:taskIdDraft="taskIdDraft" v-model:taskCourseID="taskCourseID" />
            </div>
            <div class="lin"></div>
          </div>
          <div class="item">
            <div class="itcon" @click="showDrawerAddRef">
              <div class="img">
                <img src="../../assets/images/leveladd/wai.png" />
              </div>
              <div class="text">外链</div>
            </div>
            <div>
              <add-ref v-model:addrefVisible="addrefvisible" :isLevel="isLevel" @changeData="updateTableData"
                v-model:isactive="isactive" v-model:routerId="routerId" v-model:chooseStageId="chooseStageId"
                v-model:routerTaskId="routerTaskId" v-model:edit="edit" v-model:EditRefId="EditRefId" v-model:taskIdDraft="taskIdDraft" v-model:taskCourseID="taskCourseID" />
            </div>
            <div class="lin"></div>
          </div>
          <!-- TODO1216 -->
          <div class="item" @click="showDrawerAddDiscuss">
            <div class="itcon">
              <div class="img">
                <img src="../../assets/images/leveladd/tao.png" />
              </div>
              <div class="text">讨论</div>
            </div>
            <div>
              <add-discuss v-model:adddiscussVisible="adddiscussvisible" @changeData="updateTableData"
                :isLevel="isLevel" v-model:isactive="isactive" v-model:edit="edit" v-model:routerId="routerId"
                v-model:chooseStageId="chooseStageId" v-model:routerTaskId="routerTaskId"
                v-model:EditDiscussId="EditDiscussId" v-model:taskIdDraft="taskIdDraft" v-model:taskCourseID="taskCourseID" />
            </div>
            <div class="lin"></div>
          </div>
          <div class="item" @click="showDrawerAddActive">
            <div class="itcon">
              <div class="img">
                <img src="../../assets/images/leveladd/huo.png" />
              </div>
              <div class="text">活动</div>
            </div>
            <div>
              <add-active v-model:addactiveVisible="addactivevisible" :isLevel="isLevel" v-model:edit="edit"
                v-model:isactive="isactive" @changeData="updateTableData" v-model:routerId="routerId"
                v-model:chooseStageId="chooseStageId" v-model:routerTaskId="routerTaskId"
                v-model:EditActiveId="EditActiveId" v-model:taskIdDraft="taskIdDraft" v-model:taskCourseID="taskCourseID" />
            </div>
            <div class="lin"></div>
          </div>
          <div class="item" @click="showDrawerAddEval">
            <div class="itcon">
              <div class="img">
                <img src="../../assets/images/leveladd/ce.png" />
              </div>
              <div class="text">测评</div>
              <!-- 添加测评侧弹窗 -->
              <div>
                <add-eval v-model:addevalVisible="addevalvisible" @changeData="updateTableData"
                  v-model:isactive="isactive" v-model:routerId="routerId" v-model:routerTaskId="routerTaskId"
                  v-model:projectId="projectId" v-model:chooseStageId="chooseStageId"
                  v-model:projectTaskId="projectTaskId" v-model:edit="edit" v-model:EditEvalId="EditEvalId"
                  :isLevel="isLevel" v-model:taskIdDraft="taskIdDraft" v-model:taskCourseID="taskCourseID" />
              </div>
              <!-- 添加测评侧弹窗 -->
            </div>
            <div class="lin"></div>
          </div>
          <div class="item" @click="showDrawerAddInvist">
            <div class="itcon">
              <div class="img">
                <img src="../../assets/images/leveladd/diao.png" />
              </div>
              <div class="text">评估</div>
              <!-- 添加评估侧弹窗 -->
              <div>
                <add-invist v-model:addinvistVisible="addinvistvisible" :isLevel="isLevel" @changeData="updateTableData"
                  v-model:isactive="isactive" v-model:edit="edit" v-model:routerId="routerId"
                  v-model:chooseStageId="chooseStageId" v-model:EditInvistId="EditInvistId"
                  v-model:routerTaskId="routerTaskId" v-model:taskIdDraft="taskIdDraft" v-model:taskCourseID="taskCourseID" />
              </div>
              <!-- 添加评估侧弹窗 -->
            </div>
            <div class="lin"></div>
          </div>
          <!-- TODO1216 -->
          <div class="item" @click="showDrawerAddVote">
            <div class="itcon">
              <div class="img">
                <img src="../../assets/images/leveladd/tou.png" />
              </div>
              <div class="text">投票</div>

              <div>
                <add-vote v-model:addvoteVisible="addvotevisible" :isLevel="isLevel" @changeData="updateTableData"
                  v-model:isactive="isactive" v-model:edit="edit" v-model:routerId="routerId"
                  v-model:chooseStageId="chooseStageId" v-model:EditVoteId="EditVoteId"
                  v-model:routerTaskId="routerTaskId" v-model:taskIdDraft="taskIdDraft" v-model:taskCourseID="taskCourseID" />
              </div>

            </div>
            <div class="lin"></div>
          </div>

          <div class="item" @click="showDrawerAddProj">
            <div class="itcon">
              <div class="img">
                <img src="../../assets/images/leveladd/xiang.png" />
              </div>
              <div class="text">项目</div>
              <div>
                <add-project v-model:addprojvisible="addprojvisible" :isLevel="isLevel" @changeData="updateTableData"
                  v-model:isactive="isactive" v-model:edit="edit" v-model:routerId="routerId"
                  v-model:chooseStageId="chooseStageId" v-model:EditProjectId="EditProjectId"
                  v-model:routerTaskId="routerTaskId" v-model:chooseProjectList="chooseProjectList" v-model:taskIdDraft="taskIdDraft"  v-model:taskCourseID="taskCourseID" />
              </div>
            </div>
          </div>

        </div>
        <div class="boom"
          :style="{ minHeight: level.length > 6 ? ((level.length - 6) * 106 + 512) + 'px' : 512 + 'px' }">
          <div class="boomcen">
            <div class="title">
              <div class="tit_left">
                <span>任务列表</span>
              </div>
              <div class="tit_right">
                <div class="btn btn1" @click="showChangeModal">
                  <div class="btnText">移动任务到关卡</div>
                </div>
                <div class="btn btn2" @click="showDeleteALLModal(1)">
                  <div class="imgIcon"></div>
                  <div class="btnText">批量删除</div>
                </div>
              </div>
            </div>
            <div class="tableBox">
              <div style="
                  height: 50px;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  background-color: #eff4fc;
                  font-size: 14px;
                  font-weight: 400;
                  color: #999ba3;
                  line-height: 36px;
                  border-bottom: 1px solid #f2f6fc;
                ">
                <div style="
                    width: 87px;
                    text-align: center;
                    display: flex;
                    margin-left: 46px;
                  ">
                  <img style="
                      width: 16px;
                      height: 16px;
                      cursor: pointer;
                      margin-top: 12px;
                    " :src="
                      selectAll === 0
                        ? require('../../assets/images/notSelect.png')
                        : selectAll === 1
                          ? require('../../assets/images/selectAll.png')
                          : require('../../assets/images/select.png')
                    " @click="selectRowAll" />
                  <!-- <a-checkbox
                    v-model:checked="selectAll"
                    @change="selectRowAll"
                  >
                  </a-checkbox> -->
                  <div style="margin-top: 2px; margin-left: 8px">类型</div>
                </div>
                <div style="width: 120px; text-align: center">任务名称</div>
                <div style="width: 120px; text-align: center">必修/选修</div>
                <div style="width: 87px; text-align: center">时长</div>
                <div style="width: 87px; text-align: center">状态</div>
                <div style="width: 120px; text-align: center; margin-right: 20px">
                  操作
                </div>
              </div>
              <draggable v-model="tableData" chosenClass="chosen" ghostClass="ghost" forceFallback="true" group="task"
                animation="500" @start="onStart" @end="onEnd">
                <template #item="{ element }">
                  <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">
                    <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.routerTaskId" v-model:checked="element.checked" @change="changeRow">
                        </a-checkbox>
                        <div style="margin-top: 2px; margin-left: 8px">
                          {{ element.lei }}
                        </div>
                      </div>
                    </div>
                    <div style="
                        width: 120px;
                        text-align: center;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                      " :title="element.creater">
                      {{ element.creater }}
                    </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.checked1"
                            size="small" active-color="red" @click="changeCourseType(element)" />
                          <div class="showt clearfix">
                            <div class="bi" :style="{
                              'z-index': element.checked1 ? 999 : 998,
                            }">
                              必修
                            </div>
                            <div class="xuan">选修</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div style="width: 87px; text-align: center">
                      <!-- {{ element.cretime ? element.cretime + "分钟" : "-" }} -->
                      {{
                        element.cretime
                          ?
                          element.type == 1 ? Math.ceil(Number(element.cretime) / 60) + "分钟" : element.cretime + "分钟"
                          : "-"
                      }}
                    </div>

                    <div style="width: 87px; text-align: center">
                      {{ element.status === 0 ? '草稿' : element.status === 1 ? '已发布' : '' }}
                    </div>
                    <div style="
                        width: 120px;
                        text-align: center;
                        margin-right: 20px;">
                      <div class="opa">
                        <div class="opacation">
                          <span 
                            style="color: #4ea6ff;
                              margin-right: 25px;
                              cursor: pointer;"
                              @click="
                              decideType(
                                element.lei,
                                element.courseId,
                                element.id,
                                element.routerTaskId,
                                element.courseId
                              )">
                            编辑
                          </span>
                          <span style="color: #4ea6ff; cursor: pointer" @click="showDeleteModal(element.id)">
                            删除
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </draggable>
            </div>
            <!-- 无数据样式 -->
            <div class="notable" :style="{ display: stm_hs ? 'block' : '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>
        </div>
      </div>
      <div class="right" :style="{ display: gqxy_hs ? 'none' : 'block' }">
        <div class="addhead">
          <div class="filt">
            <div class="le">
              <div class="leftimg">
                <img class="img" src="../../assets/px.jpg" />
              </div>
              <div class="imgfor">
                <div class="forz">产品经理进阶路径</div>
                <div class="fort">创建时间：2022-07-21 00:00</div>
              </div>
            </div>
            <div class="rightt">
              <!-- 2022-11-30注释 后面放开 -->
              <div class="select">
                <span>学习模式：</span>
                <!-- <div class="inputbox"> -->
                <!-- <input type="text" :placeholder="unlockMode === 1?'自由学习模式':unlockMode === 2?'闯关模式':''" /> -->
                <a-select v-model:value="unlockMode" ref="select" size="small" style="width: 150px" disabled>
                  <a-select-option :value="1">自由学习模式</a-select-option>
                  <a-select-option :value="2">闯关模式</a-select-option>
                  <a-select-option :value="3">闯关模式</a-select-option>
                </a-select>
                <a-button type="primary" size="large" style="border-radius: 8px;margin-left: 24px;"
                  @click="showModeVisible">切换模式</a-button>

                <!-- <div class="bottonbox" @click="showModeVisible">
                    <div class="btnText">切换模式</div>
                  </div> -->
                <!-- </div> -->
                <unlock-mode ref="unlockModeModal" :unlockModeVisible="unlockModeVisible"
                  :objData="routerInfo" @saveUnlock="saveUnlock" @closeUnlockModal="closeUnlockModal"/>
              </div>
              <div class="line"></div>
              <router-link :to="{ path: '/leveladd', query:{ routerId: routerId } }">
                <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="boom">
          <div class="boomcen">
            <div class="xwid">
              <div class="xin">
                <div class="xheadb">
                  <button class="addx" @click="showAddStu">添加学员</button>
                  <!-- 点击抽屉组件在LevelAdd，此处没添加showAddStu、showImpStu -->
                  <button class="addd" @click="showImpStu">导入学员</button>
                  <button class="addd" @click="showDeleteALLModal(2)">
                    批量删除
                  </button>
                </div>
                <!-- <div class="talk">
                <img class="im" src="../../assets/images/leveladd/gan.png" />
                <div class="xu">
                  <span class="yi">已选择</span>
                  <div style="width: 5px; display: inline-block"></div>
                  <span class="th">3</span>
                  <div style="width: 5px; display: inline-block"></div>
                  <span class="yi">项</span>
                  <span class="zon">列表选项总数：</span>
                  <span class="yi">5</span>
                  <span class="yi">条</span>
                </div>
              </div> -->
                <div class="tablebox1" style="margin-top: 20px">
                  <a-table style="border: 1px solid #f2f6fe" :columns="tableDataFunc2()" :data-source="tableData2"
                    :loading="tableDataTotal === -1 ? true : false" expandRowByClick="true" @expand="expandTable"
                    :pagination="false" :row-selection="{
                      columnWidth: 30,
                      selectedRowKeys: selectedRowKeys,
                      onChange: onSelectChange,
                    }" />
                  <!-- <div class="pa">
                  <a-pagination
                    :showSizeChanger="false"
                    showQuickJumper="true"
                    hideOnSinglePage="true"
                    :pageSize="pageSize"
                    :current="currentPage"
                    :total="tableDataTotal"
                    class="pagination"
                  />
                </div> -->
                  <!-- 无数据样式 -->
                  <div class="notable" :style="{ display: stm_hs ? 'block' : '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>
              </div>
              <div class="pad"></div>
            </div>
          </div>
        </div>
        <div class="footbtn">
          <div class="btnbox">
            <div class="btn btn1" @click="gqxy_hShow">
              <div class="btnText">上一步</div>
            </div>
            <div class="btn btn2">
              <div class="btnText">保存</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="footbtn">
      <div class="btnbox">
        <div class="btn btn2" @click="temporaryStorage">
          <div class="btnText">暂存</div>
        </div>
        <div class="btn btn2" @click="submitStorage">
          <div class="btnText">确定</div>
        </div>
        <div class="btn btn1" @click="cancelStorage">
          <div class="btnText">取消</div>
        </div>
      </div>
    </div>
    <!-- 添加学员抽屉 -->
    <add-stu v-model:AddSvisible="AddSvisible" />
    <!-- 导入学员抽屉 -->
    <imp-stu v-model:AddImpStuvisible="AddImpStuvisible" />
    <!-- 添加讨论侧弹窗 -->
    <!-- 添加活动侧弹窗 -->
    <!-- 批量删除学员弹窗 -->
    <a-modal v-model:visible="deleteAll" :footer="null" :closable="closeDeleteAll" wrapClassName="CopyModal"
      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="closedeleteAll"></div>
          </div>
          <div class="body">
            <span>请确认是否批量删除任务</span>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn1" @click="closedeleteAll">
              <div class="btnText">取消</div>
            </div>
            <div class="del_btn btn2" @click="subdeleteAll">
              <div class="btnText">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 是否确认删除任务弹窗 -->
    <!-- 确认删除阶段弹窗 -->
    <a-modal v-model:visible="deleteModal" :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="closeConfirm"></div>
          </div>
          <div class="body">
            <span>您确定要删除此任务吗</span>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn1" @click="closeConfirm">
              <div class="btnText">取消</div>
            </div>
            <div class="del_btn btn2" @click="deleteLevelTask">
              <div class="btnText">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 移动任务到阶段 -->
    <a-modal style="padding: 0" :closable="sh" 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">已选中{{ selectRow.length }}个任务</div>
            <div class="select">
              <a-select v-model:value="curLevel" style="width: 100%" placeholder="请选择阶段" :options="level"
                @change="handleChangeStage" allowClear></a-select>
            </div>
            <div class="btn">
              <button style="cursor: pointer" class="sameb btn1" @click="closeChangeModal">
                取消
              </button>
              <button style="cursor: pointer" class="sameb btn2" @click="moveTask">
                确定
              </button>
            </div>
          </div>
        </div>
      </div>
    </a-modal>

    <!-- 是否删除关卡弹窗 -->
    <a-modal v-model:visible="deleteChapterModal" :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="closeDeleteChapter"></div>
          </div>
          <div class="body">
            <span>您确定要删除此关卡</span>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn1" @click="closeDeleteChapter">
              <div class="btnText">取消</div>
            </div>
            <div class="del_btn btn2" @click="deleteChapter">
              <div class="btnText">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script>
import { reactive, toRefs, onMounted, onUnmounted, ref } from "vue";
import AddStu from "../../components/drawers/AddLevelAddStu";
import ImpStu from "../../components/drawers/AddLevelImportStu";
import AddOnline from "../../components/drawers/AddOnline.vue";
import AddCase from "../../components/drawers/AddCase.vue";
import AddHomework from "../../components/drawers/AddHomework.vue";
import AddTest from "../../components/drawers/AddTest.vue";
import AddDiscuss from "../../components/drawers/AddDiscuss.vue";
import AddActive from "../../components/drawers/AddActive.vue";
import AddEval from "../../components/drawers/AddEval.vue";
import AddInvist from "../../components/drawers/AddInvist.vue";
import AddVote from "../../components/vote/AddVote.vue";
import AddLive from "../../components/drawers/AddLive.vue";
import AddRef from "../../components/drawers/AddRef.vue";
import AddProject from "../../components/drawers/AddProject.vue";
import AddFaceteach from "../../components/drawers/AddFaceteach.vue";
import * as api from "../../api/indexLevel";
import { GetRouterDetail, changeChapterSort, changeTasklistSort, releaseRouter, cancelRouterTask } from "../../api/indexTask";
import { message, Modal } from "ant-design-vue";
// import { storage } from "../../api/storage";
import { deleteStudyTask } from "../../api/indexStudy";
import draggable from "vuedraggable";
import { editTask } from "../../api/indexTaskadd";
import { editRoutered } from '@/api/indexLearningPath'
// import { RouterEditTask } from "@/api/indexTask";
import { useRouter, useRoute } from "vue-router";
import UnlockMode from "../../components/drawers/UnlockMode.vue";
export default {
  name: "LevelAddDetail",
  components: {
    AddStu,
    ImpStu,
    AddOnline,
    AddCase,
    AddHomework,
    AddDiscuss,
    AddActive,
    AddTest,
    AddEval,
    AddInvist,
    AddVote,
    AddLive,
    AddRef,
    draggable,
    UnlockMode,
    AddFaceteach,
    AddProject,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const unlockModeModal = ref()
    const state = reactive({
      routerId: route.query.routerId,
      routerDetail: null,
      level: [
        // {
        //   chapterId: "1",
        //   remark: "关卡说明",
        //   name: "默认关卡",
        // },
      ],
      unlockMode: 1, // 学习模式
      tableData: [
        // {
        //   key: 1,
        //   lei: "在线",
        //   routerTaskId: 0,
        //   // state: "已发布",
        //   creater: "管理者课程",
        //   // pubtime: "2022-07-20 14:00:03",
        //   cretime: "60分钟",
        //   haspub: false,
        //   checked1: false,
        //   checkedd: false,
        // },
      ],
      tableData2: [
        // {
        //   key: 1,
        //   name: "张三",
        //   com: "产研部",
        //   gang: "产品经理",
        //   cur: "关卡2",
        //   jin: "2/10",
        //   time: "2022-07-15 14:00",
        // },
      ],
      //项目抽屉、列表参数
      currentPage: 1,
      tableDataTotal: 0,
      pageSize: 10,
      //项目
      editproj: false,
      addprojvisible: false,
      addfaceteachVisible: false,
      AddSvisible: false, //添加学员抽屉
      AddImpStuvisible: false, //导入学员抽屉
      addlivevisible: false, //添加直播抽屉
      addrefvisible: false, //添加外链抽屉
      modal: false,
      clos: false,
      stm_hs: false,
      deleteAll: false,
      closeDeleteAll: false,
      deleteModal: false, // 删除弹窗
      deleteID: "", // 要删除的任务的id
      editID: "", // 要编辑的任务id
      EditOnlineId: "", // 要编辑的 workid
      EditCaseId: "",
      EditWorkId: "",
      EditTestId: "",
      EditRefId: "",
      EditLiveId: "",
      EditDiscussId: "",
      EditActiveId: "",
      EditEvalId: "",
      EditInvistId: "",
      EditVoteId: "",
      EditFaceId: "",
      //项目
      EditProjectId: "",
      routerTaskId: "",
      taskIdDraft: "",
      taskCourseID: "",
      chapterId: "",
      stageId: "",
      cC: false,
      value1: "",
      value2: "",
      selectedRowKeys: [],
      edit: false, //是否点击编辑
      isLevel: 1, //学习路径1项目2模板库3
      gqxy_hs: true,
      isactive: 0,
      adddiscussvisible: false, //讨论抽屉
      isStudiscuss: false,
      addactivevisible: false, //活动抽屉
      addonlinevisible: false,
      addcasevisible: false,
      addhomeworkvisible: false,
      addtestvisible: false,
      addevalvisible: false,
      addinvistvisible: false,
      addvotevisible: false,
      // 表示当前触发列表的id,用来发送编辑和删除
      ListChoosedId: 0,
      selectRow: [], //选择行
      selectAll: 0, //0：未选择，1：全选，2：部分选择
      visiblene: false, //移动任务弹窗
      removeStageId: null,
      styTitle: null,
      creTime: null,
      picUrl: null,
      routerInfo: {},
      //项目抽屉参数
      time: undefined,
      projId: null, //选项选到的id
      projName: "", //选项选到的name
      projectId: null,
      projectTaskId: null,
      chooseStageId: null,
      chooseChapterId: null,

      updateChapterID: null, //编辑关卡id
      updateID: null, //编辑关卡id
      deleteChapterModal: false, //删除关卡弹窗
      deleteChapterId: null, //删除关卡id

      unlockModeVisible: false, //切换模式抽屉
      chooseProjectList: null, //选择的阶段下的任务列表

      curLevel: null, //选择移动到的关卡名称

      deleteType: null, //批量删除学员/任务 1：任务 2：学员

      addLoading: false, //添加编辑关卡动画
    });

    const showModal = (element) => {
      state.modal = true;
      console.log("element", element);
      if (element) {
        console.log("element", element);
        state.value1 = element.name;
        state.value2 = element.remark;
        state.updateChapterID = element.chapterId;
        state.updateID = element.id;
      }
    };
    const closeModal = () => {
      state.modal = false;
      state.value1 = "";
      state.value2 = "";
      state.updateChapterID = null;
    };

    // 关闭模式弹框
    const closeUnlockModal = () => {
      state.unlockModeVisible = false;
    }

    const saveUnlock = (num) => {
       state.routerInfo.unlockMode = num
       editRoutered(state.routerInfo).then(res=>{
        if(res.data.code == 200){
          message.success(res.data.msg)
          getDetail()     
          state.unlockModeVisible = false    
        }else{
          message.error(res.data.msg)
        }
      }).catch(e=>{
        console.log(e)
        message.error(e.data.msg)
      })
      // 
    }

    //新建关卡
    const editChapter = () => {
      if (!state.value1) return message.warning("请输入关卡名称");
      state.addLoading = true;
      if (state.updateChapterID) {
        let obj = {
          name: state.value1,
          remark: state.value2,
          routerId: state.routerId,
          id: state.updateID,
          chapterId: state.updateChapterID,
        };
        api.updateChapter(obj)
          .then((res) => {
            console.log("修改成功", res);
            message.success("修改成功");
            state.addLoading = false;
            localStorage.setItem("chapterId", res.data.data.chapterId);
            getDetail();
            closeModal();
          })
          .catch((err) => {
            console.log("修改失败", err);
          });
      } else {
        let obj = {
          name: state.value1,
          remark: state.value2,
          routerId: state.routerId,
        };
        api.editChapter(obj)
          .then((res) => {
            console.log("创建成功", res);
            // setTimeout(() => {
            //   console.log("创建成功", res);

            // }, 1000);
            message.success("创建成功");
            state.value1 = "";
            state.value2 = "";
            state.modal = false;
            // state.createLoading = false;
            //state.currentPage = 1;
            // getLearnPath();
            state.addLoading = false;
            localStorage.setItem("chapterId", res.data.data.chapterId);
            getDetail();
            closeModal();
          })
          .catch((err) => {
            console.log("创建失败", err);
          });
      }
    };
    //打开删除关卡弹窗
    const showDeleteChapter = (id) => {
      state.deleteChapterId = id;
      state.deleteChapterModal = true;
    };
    //关闭删除关卡弹窗
    const closeDeleteChapter = () => {
      state.deleteChapterId = null;
      state.deleteChapterModal = false;
    };
    //删除关卡
    const deleteChapter = () => {
      console.log("chapterId", state.deleteChapterId);
      let obj = {
        id: state.deleteChapterId,
      };
      api
        .deleteChapter(obj)
        .then((res) => {
          if (res.data.code == 200) {
            console.log("删除关卡成功", res);
            message.destroy();
            message.success("删除关卡成功");
            let chapter = localStorage.getItem("chapterId");
            if (state.deleteChapterId == chapter) {
              localStorage.removeItem("chapterId");
            }
            closeDeleteChapter();
            getDetail();
          } else if (res.data.code == -1) {
            message.destroy();
            message.success("至少保留一个关卡");
            closeDeleteChapter();
          }
        })
        .catch((err) => {
          console.log("删除关卡失败", err);
        });
    };
    // 关卡拖动排序
    const changeSort = () => {
      const sortArr = state.level.map(s => s.sort).sort((a, b) => Number(a) - Number(b))
      state.level.map((s, i) => {
        s.sort = sortArr[i]
        return s
      })

      changeChapterSort(state.level).then((res) => {
        console.log(res)
        if (res.data.code === 200) {
          message.success('关卡顺序已修改')
          getDetail()
        }
        // getDetail()
      })
    }

    // 任务拖动排序
    const onEnd = () => {
      const sortArr = state.tableData.map(s => s.sort).sort((a, b) => Number(a) - Number(b))
      state.tableData.map((s, i) => {
        s.sort = sortArr[i]
        return s
      })
      changeTasklistSort(state.tableData).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          message.success('任务顺序已修改')
          getDetail()
        }
      })
    }

    //在线抽屉
    const showDrawerAddOnline = (id, eleId, routerTaskId, courseId) => {
      state.addonlinevisible = true;
      state.EditOnlineId = id;
      state.routerTaskId = routerTaskId;
      state.taskIdDraft = eleId;
      state.taskCourseID = courseId;
    };
    //面授抽屉
    const showAddface = (id, eleId, routerTaskId, courseId) => {
      state.addfaceteachVisible = true;
      state.EditFaceId = id;
      state.routerTaskId = routerTaskId;
      state.taskIdDraft = eleId;
      state.taskCourseID = courseId;
    };
    //案例抽屉
    const showDrawerAddCase = (id, eleId, routerTaskId, courseId) => {
      state.addcasevisible = true;
      state.EditCaseId = id;
      state.routerTaskId = routerTaskId;
      state.taskIdDraft = eleId;
      state.taskCourseID = courseId;
    };
    // 作业抽屉
    const showDrawerAddHomework = (id, eleId, routerTaskId, courseId) => {
      state.addhomeworkvisible = true;
      state.EditWorkId = id;
      state.routerTaskId = routerTaskId;
      state.taskIdDraft = eleId;
      state.taskCourseID = courseId;
    };
    //考试抽屉
    const showDrawerAddTest = (id, eleId, routerTaskId, courseId) => {
      state.addtestvisible = true;
      state.EditTestId = id;
      state.routerTaskId = routerTaskId;
      state.taskIdDraft = eleId;
      state.taskCourseID = courseId;
    };
    //测试抽屉
    const showDrawerAddEval = (id, eleId, routerTaskId, courseId) => {
      state.addevalvisible = true;
      state.EditEvalId = id;
      state.routerTaskId = routerTaskId;
      state.taskIdDraft = eleId;
      state.taskCourseID = courseId;
    };
    //评估抽屉
    const showDrawerAddInvist = (id, eleId, routerTaskId, courseId) => {
      state.addinvistvisible = true;
      state.routerTaskId = routerTaskId;
      state.EditInvistId = id;
      state.taskIdDraft = eleId;
      state.taskCourseID = courseId;
    };
    //投票抽屉
    const showDrawerAddVote = (id, eleId, routerTaskId, courseId) => {
      state.addvotevisible = true;
      state.EditVoteId = id;
      state.routerTaskId = routerTaskId;
      state.taskIdDraft = eleId;
      state.taskCourseID = courseId;
    };
    //直播抽屉
    const showDrawerAddLive = (id, eleId, routerTaskId, courseId) => {
      state.addlivevisible = true;
      state.EditLiveId = id;
      state.routerTaskId = routerTaskId;
      state.taskIdDraft = eleId;
      state.taskCourseID = courseId;
    };
    //外链抽屉
    const showDrawerAddRef = (id, eleId, routerTaskId, courseId) => {
      state.addrefvisible = true;
      state.EditRefId = id;
      state.routerTaskId = routerTaskId;
      state.taskIdDraft = eleId;
      state.taskCourseID = courseId;
    };
    //讨论抽屉
    const showDrawerAddDiscuss = (id, eleId, routerTaskId, courseId) => {
      state.adddiscussvisible = true;
      state.EditDiscussId = id;
      state.routerTaskId = routerTaskId;
      state.taskIdDraft = eleId;
      state.taskCourseID = courseId;
    };
    //活动抽屉
    const showDrawerAddActive = (id, eleId, routerTaskId, courseId) => {
      state.addactivevisible = true;
      state.EditActiveId = id;
      state.routerTaskId = routerTaskId;
      state.taskIdDraft = eleId;
      state.taskCourseID = courseId;
    };
    //打开项目抽屉
    const showDrawerAddProj = (id, eleId, routerTaskId, courseId) => {
      state.addprojvisible = true;
      state.EditProjectId = id;
      state.routerTaskId = routerTaskId;
      state.taskIdDraft = eleId;
      state.taskCourseID = courseId;
    };
    //tableData数据赋值方法
    const dataAssignment = (id) => {
      console.log(state.level);
      for (let i = 0; i < state.level.length; i++) {
        if (state.level[i].id == Number(id)) {
          let array = [];
          state.chooseProjectList = JSON.stringify(state.level[i].taskList);
          state.level[i].taskList.forEach((element) => {
            let obj = {
              id: element.id,
              key: element.routerTaskId,
              lei: checkType(element.type),
              creater: element.name,
              cretime: element.duration || element.duration === 0 ? element.duration : "-",
              checked1: element.flag,
              routerTaskId: element.routerTaskId,
              courseId: element.courseId,
              stageId: element.stageId,
              type: element.type,
              routerId: element.routerId,
              chapterId: element.chapterId,
              ...element
            };
            array.push(obj);
          });
          state.tableData = array;
        }
      }
    };
    //数据变化
    const updateTableData = (data) => {
      console.log("添加数据", data);
      getDetail();
    };
    const getDetail = () => {
      console.log('调用查询')
      GetRouterDetail(state.routerId, "draft")
        .then((res) => {
          //给level赋初始值
          state.level = res.data.data.chapterList;
          state.styTitle = res.data.data.routerInfo.name;
          state.creTime = res.data.data.routerInfo.createTime;
          state.picUrl = res.data.data.routerInfo.picUrl;
          state.unlockMode = res.data.data.routerInfo.unlockMode
          state.unlockMode = state.unlockMode ? state.unlockMode : 1
          // console.log('学习模式', state.unlockMode)
          state.routerInfo = res.data.data.routerInfo
          //增加两个字段
          state.level.forEach((item) => {
            item["value"] = item.chapterId;
            item["label"] = item.name;
          });
          console.log("路径图详情", res.data.data);
          state.routerDetail = res.data.data
          if (state.level.length > 0) {
            let chapter = localStorage.getItem("chapterId")
              ? JSON.parse(localStorage.getItem("chapterId"))
              : null;
            console.log("chapter", chapter);
            if (chapter > 0) {
              dataAssignment(chapter); //用哪个的任务表
              state.isactive = chapter; //哪个亮
            } else {
              console.log("state.level[0]", state.level[0]);
              dataAssignment(state.level[0].chapterId);
              state.isactive = state.level[0].chapterId;
            }
          }
          state.deleteModal = false;
        })
        .catch((err) => {
          console.log(err)
          // message.error(err);
        });
    };

    const showAddStu = () => {
      state.AddSvisible = true;
    };
    const showImpStu = () => {
      state.AddImpStuvisible = true;
    };
    const checkType = (index) => {
      let typeRules = [
        "",
        "在线",
        "面授",
        "案例",
        "作业",
        "考试",
        "直播",
        "外链",
        "讨论",
        "活动",
        "测评",
        "评估",
        "投票",
        "项目",
      ];
      return typeRules[index];
    };
    const tableDataFunc2 = () => {
      const columns = [
        {
          title: "姓名",
          dataIndex: "name",
          key: "name",
          width: 160,
          align: "left",
          ellipsis: true,
          className: "classify",
          scopedSlots: { customRender: "action" }, //引入的插槽
          customRender: (text) => {
            return (
              <div class="racona">
                <span> {text.record.name}</span>
              </div>
            );
          },
        },
        {
          title: "部门",
          dataIndex: "com",
          // width: "30%",
          key: "com",
          width: 110,
          align: "center",
          className: "h",
        },
        //   {
        //   title: "岗位",
        //   dataIndex: "gang",
        //   key: "gang",
        //  width: 110,
        //  align: "center",
        //  className: "h",
        //  },
        {
          title: "当前关卡",
          dataIndex: "cur",
          key: "cur",
          width: 110,
          align: "center",
          className: "h",
        },
        {
          title: "进度",
          dataIndex: "jin",
          key: "jin",
          width: 110,
          align: "center",
          className: "h",
        },
        {
          title: "开始时间",
          dataIndex: "time",
          key: "time",
          width: 120,
          align: "center",
          className: "h",
        },
        {
          title: "操作",
          className: "h",
          dataIndex: "opacation",
          key: "opacation",
          width: 140,
          align: "center",
          scopedSlots: { customRender: "action" }, //引入的插槽
          customRender: () => {
            return (
              <div class="opa">
                <div class="opacation">
                  <span style="color:#4EA6FF;cursor:pointer">删除</span>
                </div>
              </div>
            );
          },
        },
      ];
      return columns;
    };
    const onSelectChange = (selectedRowKeys) => {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      state.selectedRowKeys = selectedRowKeys;
    };
    const drawertableColumns = () => {
      const drawercolumns = [
        {
          title: "项目名称",
          dataIndex: "name",
          key: "projectName",
          width: 200,
          ellipsis: true,
        },
        {
          title: "项目经理",
          dataIndex: "manager",
          key: "manager",
          width: 100,
          align: "center",
        },
        {
          title: "创建人",
          dataIndex: "creator",
          key: "creater",
          width: 100,
          align: "center",
        },
        {
          title: "创建时间",
          dataIndex: "time",
          key: "time",
          width: 180,
          align: "center",
        },
      ];
      return drawercolumns;
    };
    // const getClientHeight = () => {
    //   state.rightheight =
    //     document.getElementsByClassName("addhead")[0].offsetHeight +
    //     document.getElementsByClassName("mid")[0].offsetHeight +
    //     document.getElementsByClassName("boom")[0].offsetHeight +
    //     40 +
    //     "px";
    // };
    onMounted(() => {
      document.getElementsByTagName("main")[0].style.background =
        "rgb(245, 247, 250,1)";
      document.getElementsByTagName("main")[0].style.boxShadow = "none";
      getDetail();
    });
    onUnmounted(() => {
      document.getElementsByTagName("main")[0].style.background = "#ffffff";
      document.getElementsByTagName("main")[0].style.boxShadow =
        "0px 1px 35px 0px rgba(118, 136, 166, 0.07)";
      localStorage.removeItem("chapterId");
    });
    const changebgc = (chapterId) => {
      state.isactive = chapterId;
      state.selectRow = []; //选择行
      state.selectAll = 0; //0：未选择，1：全选，2：部分选择
      dataAssignment(chapterId);
      state.chooseChapterId = chapterId;
    };
    const gqxy_hShow = () => {
      state.gqxy_hs = !state.gqxy_hs;
    };
    const showDeleteALLModal = (type) => {
      if (state.selectRow.length === 0) {
        message.destroy();
        return message.warning("请选择要删除的任务");
      }
      state.deleteAll = true;
      state.deleteType = type;
    };
    const closedeleteAll = () => {
      state.deleteAll = false;
      state.deleteType = null;
    };
    const subdeleteAll = () => {
      deletecTaskAll();
      state.deleteType = null;
    };
    const showDeleteModal = (id) => {
      state.deleteID = id;
      console.log(id);
      state.deleteModal = true;
    };
    const closeConfirm = () => {
      state.deleteModal = false;
      state.deleteID = "";
      state.editID = "";
    };
    const deleteLevelTask = () => {
      deleteStudyTask({ routerTaskIds: state.deleteID })
        .then((res) => {
          state.deleteModal = false;
          message.destroy();
          message.success("删除成功");
          state.selectRow = []; //选择行
          state.selectAll = 0; //0：未选择，1：全选，2：部分选择
          getDetail();
          console.log("删除成功", res);
        })
        .catch((err) => {
          message.destroy();
          message.error("删除失败");
          console.log(err);
        });
    };
    const closeDeleteModel = () => {
      state.deleteModal = false;
      state.deleteID = "";
    };
    // 子组件触发的清空 editid 事件
    const clearEditData = () => {
      state.editID = "";
      getDetail();
    };
    //选择单个任务
    const changeRow = (e) => {
      //selectRow:已经选择的任务的id数组
      let arr = state.selectRow;
      if (e.target.checked) {
        arr.push(e.target.id);
      } else {
        arr.map((value, index) => {
          if (value == e.target.id) {
            arr.splice(index, 1);
          }
        });
      }
      state.selectRow = arr;
      //判断是否是全部选择或者是全部未选择来修改selectAll框的样式
      if (arr.length !== 0) {
        if (arr.length === state.tableData.length) {
          state.selectAll = 1;
        } else {
          state.selectAll = 2;
        }
      } else {
        state.selectAll = 0;
      }
      console.log("state.selectRow", state.selectRow, state.selectAll);
    };
    //全选任务或全不选任务
    const selectRowAll = () => {
      let arr = state.tableData;
      let array = [];
      if (state.selectAll === 0 || state.selectAll === 2) {
        arr.map((value) => {
          // console.log("value", value, index);
          value.checked = true;
          array.push(value.id);
          // if (value == e.target.id) {
          //   arr.splice(index, 1);
          // }
          state.selectAll = 1;
        });
      } else {
        array = [];
        arr.map((value) => {
          // console.log("value", value, index);
          value.checked = false;
          state.selectAll = 0;
        });
      }
      state.tableData = arr;
      state.selectRow = array;
    };
    //批量删除任务
    const deletecTaskAll = () => {
      let arr = state.selectRow;
      console.log("选择的行信息", arr);
      arr.map((value) => {
        let obj = {
          routerTaskIds: value,
        };
        console.log("value", value);
        api
          .deleteTask(obj)
          .then((res) => {
            console.log(res);
            state.deleteAll = false;
            // state.deleteType = null;
            message.destroy();
            state.selectRow = []; //选择行
            state.selectAll = 0; //0：未选择，1：全选，2：部分选择
            message.success("批量删除成功");
            getDetail();
          })
          .catch((err) => {
            console.log(err);
          });
      });
    };
    //移动任务到关卡
    const moveTask = () => {
      if (state.isactive == state.removeStageId) {
        message.destroy();
        message.warning("选择的任务已在当前关卡");
      } else if (state.removeStageId == null) {
        message.destroy();
        message.warning("请选择关卡");
      } else {
        let obj = {
          chapterId: state.removeStageId,
          routerTaskIdList: state.selectRow,
        };
        console.log("移动关卡obj", obj);
        api
          .moveTask(obj)
          .then((res) => {
            console.log("移动成功", res);
            message.destroy();
            message.success("移动成功");
            localStorage.setItem("chapterId", state.chooseChapterId);
            state.selectRow = []; //选择行
            state.selectAll = 0; //0：未选择，1：全选，2：部分选择
            getDetail();
          })
          .catch((err) => {
            console.log("移动失败", err);
          });
        state.visiblene = false;
        state.curLevel = null;
      }
    };
    //编辑的按钮
    const decideType = (type, id, eleId, routerTaskId, courseId) => {
      state.edit = true;
      console.log(type, id);
      if (type == "外链") {
        showDrawerAddRef(id, eleId, routerTaskId, courseId);
      } else if (type == "直播") {
        showDrawerAddLive(id, eleId, routerTaskId, courseId);
      } else if (type == "作业") {
        showDrawerAddHomework(id, eleId, routerTaskId, courseId);
      } else if (type == "考试") {
        showDrawerAddTest(id, eleId, routerTaskId, courseId);
      } else if (type == "讨论") {
        showDrawerAddDiscuss(id, eleId, routerTaskId, courseId);
      } else if (type == "活动") {
        showDrawerAddActive(id, eleId, routerTaskId, courseId);
      } else if (type == "测评") {
        showDrawerAddEval(id, eleId, routerTaskId, courseId);
      } else if (type == "评估") {
        showDrawerAddInvist(id, eleId, routerTaskId, courseId);
      } else if (type == "投票") {
        showDrawerAddVote(id, eleId, routerTaskId, courseId);
      } else if (type == "项目") {
        showDrawerAddProj(id, eleId, routerTaskId, courseId);
      } else if (type == "在线") {
        showDrawerAddOnline(id, eleId, routerTaskId, courseId);
      } else if (type == "案例") {
        showDrawerAddCase(id, eleId, routerTaskId, courseId);
      } else if (type == "面授") {
        showAddface(id, eleId, routerTaskId, courseId);
      }
    };

    const changeCourseType = (ele) => {
      console.log("任务id", ele.id);
      console.log("flag", ele.checked1);
      let obj = {
        chapterId: ele.chapterId,
        courseId: ele.courseId,
        duration: ele.cretime == "-" ? 0 : ele.cretime,
        flag: ele.checked1,
        name: ele.creater,
        routerId: ele.routerId,
        routerTaskId: ele.routerTaskId,
        type: ele.type,
      };
      editTask(obj)
        .then((res) => {
          console.log(`修改状态成功${res.data}`);
          message.destroy();
          message.success("修改成功");
        })
        .catch((err) => {
          console.log(`修改状态失败${err.data}`);
          message.destroy();
          message.warning("修改失败");
        });
    };
    const showChangeModal = () => {
      if (state.selectRow.length == 0) {
        message.destroy();
        return message.warning("请选择要移动的任务");
      } else {
        state.visiblene = true;
      }
    };
    const closeChangeModal = () => {
      state.visiblene = false;
      state.curLevel = null;
    };
    const handleChangeStage = (value, option) => {
      console.log("阶段改变", value, option);
      state.removeStageId = option.chapterId;
      state.curLevel = option.name;
    };

    //显示切换模式抽屉
    const showModeVisible = () => {
      state.unlockModeVisible = true;
    };

    //暂存
    const temporaryStorage = () => {
      message.success("暂存成功");
    };
    //确定
    // 确定，将当前暂存的草稿发布
    // 
    const submitStorage = () => {
      // 发布'
      // let obj = {}
      console.log(state.routerDetail, state.routerId)
      // state.routerDetail
      releaseRouter(state.routerId).then(res => {
        // console.log("发布",res.data.data)
        if (res.data.code === 200) {
          message.success("关卡和任务数据已保存，将返回上一页")
          setTimeout(() => {
            router.push({
              path: "/leveladd",
              query:{ routerId: state.routerId } 
            });
          }, 3000);
        }
      })


    };
    //取消
    const cancelStorage = () => {
      // 查询所有数据中是否有status===0的，有的话说明数据未保存，
      let bool = state.routerDetail.chapterList.some(s => s.status === 0 || s.taskList.some(t => t.status === 0))
      if (bool) {
        Modal.confirm({
          content: () => "有未保存的草稿，确定舍弃草稿吗？",
          onOk() {
            cancelRouterTask(state.routerId).then(res => {
              if (res.data.code === 200) {
                message.success("取消草稿")
                setTimeout(() => {
                  router.push({
                    path: "/leveladd",
                    query:{ routerId: state.routerId } 
                  });
                }, 5000)
              }
            })
          }
        })
        // Modal.confirm("有未保存的草稿，确定舍弃草稿吗？").then(() => {
        //   cancelRouterTask(state.routerId).then(res => {
        //     if (res.data.code === 200) {
        //       message.success("取消草稿")
        //       setTimeout(() => {
        //         router.push({
        //           path: "/leveladd",
        //         });
        //       }, 5000);
        //     }
        //   })
        // })
      } else {
        router.push({
          path: "/leveladd",
          query:{ routerId: state.routerId } 
        });
      }



    };
    return {
      ...toRefs(state),
      unlockModeModal,
      // tableDataFunc,
      tableDataFunc2,
      showModal,
      closeModal,
      showAddStu,
      showImpStu,
      onEnd,
      // drawercolumns,
      onSelectChange,
      changebgc,
      gqxy_hShow,
      showDeleteALLModal,
      // delete_exit,
      closeConfirm,
      drawertableColumns,
      changeSort,
      editChapter,
      // updateChapter,
      showDrawerAddOnline,
      showDrawerAddCase,
      showDrawerAddHomework,
      showDrawerAddTest,
      showDrawerAddEval,
      showDrawerAddInvist,
      showDrawerAddVote,
      deleteLevelTask,
      showDrawerAddLive,
      showDrawerAddRef,
      showDrawerAddProj,
      closeDeleteModel,
      clearEditData,
      showDrawerAddDiscuss,
      showDrawerAddActive,
      selectRowAll,
      changeRow,
      deletecTaskAll,
      moveTask,
      showDeleteModal,
      decideType,
      updateTableData,
      changeCourseType,
      showChangeModal,
      closeChangeModal,
      handleChangeStage,

      showDeleteChapter,
      closeDeleteChapter,
      deleteChapter,

      showModeVisible,
      showAddface,

      temporaryStorage,
      submitStorage,
      cancelStorage,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

              .select {
                margin-top: 10px;
              }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

              .input {
                width: 100%;

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

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

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

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

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

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

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

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

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

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

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

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

    .drawerbox {
      overflow-y: auto;

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

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

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

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

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

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

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

    .leftmain {
      // width: 86%;
      margin-top: 20px;

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

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

        .search {
          background-size: 100%;
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

          .imgfor {
            margin-left: 32px;

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

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

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

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

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

              input {
                border: none;
                outline: none;
              }

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

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

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

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

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

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

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

          .img {
            cursor: pointer;
          }

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

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

        .no {
          display: none;
        }
      }
    }

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

      .boomcen {
        width: 95%;

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

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

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

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

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

            .btn1 {
              background-color: #4ea6ff;

              .btnText {
                color: #ffffff;
              }
            }

            .btn2 {
              background-color: #ffffff;

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

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

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

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

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

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

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

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

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

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

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

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

          .xin {
            width: 100%;

            .xheadb {
              display: flex;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

            .tablebox1 {
              margin-bottom: 80px;

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

        .Gcon {
          display: flex;

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

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

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

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

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

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

              .twobtn {
                display: flex;

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

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

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

              .checkcon {
                position: relative;

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

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

                .yulan2 {
                  margin-left: 22px;
                }

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

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

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

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

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

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

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

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

              .choo {
                display: none;
              }

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

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

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

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

                  .chose {
                    position: relative;

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

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

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

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

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

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

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

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

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

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

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

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

        .bi {
          // margin-top: 10px;
          width: 63px;
          height: 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;
          // display: none;
          position: absolute;
          z-index: 998;
          color: #5dc988;
          border-radius: 4px;
        }
      }
    }
  }

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

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

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

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

    .btnbox {
      display: flex;
      margin-right: 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;

        .btnText {
          color: #ffffff;
        }
      }

      .btn2 {
        background-color: #ffffff;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

              .btn2 {
                background-color: #4ea6ff;
                color: #ffffff;
              }
            }
          }
        }
      }
    }
  }
}
</style>