<template>
  <div class="taskadd">
    <div style="display: flex">
      <div class="left clearfix">
        <div class="leftmain">
          <div class="tit">
            阶段<img
              src="../../assets/images/projectadd/right.png"
              style="margin-left: 10px; cursor: pointer"
              @click="showCancel"
            />
          </div>
          <!-- @click="showModal" -->
          <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"
            >
              <template #item="{ element }">
                <div
                  class="items"
                  :class="chooseStageId == 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">
                            {{ element.name ? element.name : "暂无说明" }}
                          </div>
                        </template>
                        <template #title>
                          <span>阶段说明</span>
                        </template>
                        <div class="script">
                          <span style="font-size: 12px; color: #ffffff"
                            >说明</span
                          >
                        </div>
                      </a-popover>

                      <div class="imgIcon" @click="showModal(element)"></div>
                    </div>
                    <div class="boxs_right">
                      <div
                        class="imgIcon"
                        @click="showDeleteStage(element.id)"
                      ></div>
                    </div>
                  </div>
                  <div class="items2">
                    <a-popover
                      placement="topLeft"
                      v-if="element.tit?.length > 10"
                    >
                      <template #content>
                        <div style="width: 130px">
                          {{ element.tit }}
                        </div>
                      </template>
                      <!-- <template #title>
                          <span>关卡说明</span>
                        </template> -->
                      <div class="nname">
                        {{ element.tit }}
                      </div>
                    </a-popover>
                    <div class="nname" v-if="element.tit?.length <= 10">
                      {{ element.tit }}
                    </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>
      <div class="right">
        <div class="addhead">
          <div class="filt">
            <div class="le">
              <div class="leftimg">
                <img class="img" :src="picUrl" />
              </div>
              <div class="imgfor">
                <div class="forz" style="font-weight: 700">
                  {{ projectTitle }}
                </div>
              </div>
            </div>
            <div class="rightt">
              <!-- 2022-11-30注释 后面放开 -->
              <!-- <div class="select">
                <span>学习模式：</span>
                <div class="inputbox">
                  <input type="text" placeholder="按学习时间解锁" />
                  <div class="bottonbox" @click="showModeVisible">
                    <div class="btnText">切换模式</div>
                  </div>
                  <unlock-mode v-model:unlockModeVisible="unlockModeVisible" />
                </div>
              </div> -->
              <div class="line"></div>
              <!-- <img class="img2" src="../../assets/images/projectadd/keep.png" />
              <div class="pub">保存</div>
              <div class="line"></div> -->
              <router-link to="/libraryAdd">
                <div style="display: flex">
                  <img
                    class="img2"
                    src="../../assets/images/leveladd/back.png"
                  />
                  <div class="return">返回</div>
                </div>
              </router-link>
            </div>
          </div>
        </div>
        <div class="mid">
          <div class="item" @click="showDrawerOnline">
            <div class="itcon">
              <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"
                :isLevel="isLevel"
                v-model:edit="edit"
                v-model:projectId="projectId"
                v-model:projectTemplateId="projectTemplateId"
                v-model:chooseStageId="chooseStageId"
                v-model:projectTaskId="projectTaskId"
                v-model:EditOnlineId="EditOnlineId"
              />
            </div>
            <!-- 添加在线侧弹窗 -->
            <div class="lin"></div>
          </div>
          <div class="item" @click="showDrawerFaceteach">
            <div class="itcon">
              <div class="img">
                <img src="../../assets/images/leveladd/mian.png" />
              </div>
              <div class="text">面授</div>
            </div>
            <!-- 添加面授侧弹窗 -->
            <div>
              <add-faceteach
                v-model:addfaceteachVisible="addfaceteachvisible"
                @changeData="updateTableData"
                :isLevel="isLevel"
                v-model:edit="edit"
                v-model:projectId="projectId"
                v-model:projectTemplateId="projectTemplateId"
                v-model:chooseStageId="chooseStageId"
                v-model:projectTaskId="projectTaskId"
                v-model:EditFaceId="EditFaceId"
              />
            </div>
            <!-- 添加面授侧弹窗 -->
            <div class="lin"></div>
          </div>
          <div class="item" @click="showDrawerAddCase">
            <div class="itcon">
              <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"
                :isLevel="isLevel"
                v-model:edit="edit"
                v-model:projectId="projectId"
                v-model:projectTemplateId="projectTemplateId"
                v-model:chooseStageId="chooseStageId"
                v-model:projectTaskId="projectTaskId"
                v-model:EditCaseId="EditCaseId"
              />
            </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"
                @changeData="updateTableData"
                v-model:isLevel="isLevel"
                v-model:edit="edit"
                v-model:projectId="projectId"
                v-model:projectTemplateId="projectTemplateId"
                v-model:chooseStageId="chooseStageId"
                v-model:EditWorkId="EditWorkId"
                v-model:projectTaskId="projectTaskId"
              />
            </div>
            <!-- 添加作业侧弹窗 -->
            <div class="lin"></div>
          </div>
          <div class="item" @click="showDrawerAddTest">
            <div class="itcon">
              <div class="img">
                <img src="../../assets/images/leveladd/kao.png" />
              </div>
              <div class="text">考试</div>
            </div>
            <!-- 添加考试侧弹窗 -->
            <div>
              <add-test
                v-model:addtestVisible="addtestvisible"
                @changeData="updateTableData"
                :isLevel="isLevel"
                v-model:edit="edit"
                v-model:projectId="projectId"
                v-model:projectTemplateId="projectTemplateId"
                v-model:chooseStageId="chooseStageId"
                v-model:EditTestId="EditTestId"
                v-model:projectTaskId="projectTaskId"
              />
            </div>
            <!-- 添加考试侧弹窗 -->
            <div class="lin"></div>
          </div>
          <div class="item" @click="showDrawerAddLive">
            <div class="itcon">
              <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:projectId="projectId"
                v-model:projectTemplateId="projectTemplateId"
                v-model:chooseStageId="chooseStageId"
                v-model:edit="edit"
                v-model:EditLiveId="EditLiveId"
                v-model:projectTaskId="projectTaskId"
              />
            </div>
            <!-- 添加直播侧弹窗 -->
            <div class="lin"></div>
          </div>
          <div class="item" @click="showDrawerAddRef">
            <div class="itcon">
              <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:projectId="projectId"
                v-model:projectTemplateId="projectTemplateId"
                v-model:chooseStageId="chooseStageId"
                v-model:edit="edit"
                v-model:EditRefId="EditRefId"
                v-model:projectTaskId="projectTaskId"
              />
            </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"
                v-model:edit="edit"
                :isLevel="isLevel"
                v-model:projectId="projectId"
                v-model:projectTemplateId="projectTemplateId"
                v-model:chooseStageId="chooseStageId"
                v-model:EditDiscussId="EditDiscussId"
                v-model:projectTaskId="projectTaskId"
                @changeData="updateTableData"
              />
            </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"
                v-model:projectTemplateId="projectTemplateId"
                v-model:projectId="projectId"
                v-model:EditActiveId="EditActiveId"
                v-model:projectTaskId="projectTaskId"
                v-model:edit="edit"
                :isLevel="isLevel"
                v-model:chooseStageId="chooseStageId"
                @changeData="updateTableData"
              />
            </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>
            <!-- 添加测评侧弹窗 -->
            <div>
              <add-eval
                v-model:addevalVisible="addevalvisible"
                @changeData="updateTableData"
                v-model:edit="edit"
                :isLevel="isLevel"
                v-model:projectId="projectId"
                v-model:projectTemplateId="projectTemplateId"
                v-model:chooseStageId="chooseStageId"
                v-model:projectTaskId="projectTaskId"
                v-model:EditEvalId="EditEvalId"
              />
            </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>
            <!-- 添加评估侧弹窗 -->
            <div>
              <add-invist
                v-model:addinvistVisible="addinvistvisible"
                @changeData="updateTableData"
                v-model:edit="edit"
                :isLevel="isLevel"
                v-model:projectId="projectId"
                v-model:projectTemplateId="projectTemplateId"
                v-model:chooseStageId="chooseStageId"
                v-model:projectTaskId="projectTaskId"
                v-model:EditInvistId="EditInvistId"
              />
            </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"
                  @changeData="updateTableData"
                  @getData="changeVData"
                  v-model:edit="edit"
                  :isLevel="isLevel"
                  v-model:projectId="projectId"
                  v-model:projectTemplateId="projectTemplateId"
                  v-model:chooseStageId="chooseStageId"
                  v-model:projectTaskId="projectTaskId"
                  v-model:EditVoteId="EditVoteId"
                  v-model:ballotId="ballotId"
                />
              </div>
              
           
            </div>
          </div>
-->
        </div>
        <div class="boom">
          <div class="boomcen">
            <div class="onerow">
              <div class="taskmain">任务列表</div>
              <button class="btn" @click="showChangeModal">
                移动任务到阶段
              </button>
              <div class="edit" @click="showdeAll">
                <img
                  class="editimg"
                  src="../../assets/images/projectadd/delete.png"
                />
                <span class="editext">批量删除</span>
              </div>
            </div>
            <!-- 无数据样式 -->
            <div class="notable" style="display: none">
              <div class="notablebox">
                <div class="boxbody">
                  <div class="boximg"></div>
                  <div class="boxtitle">
                    <span style="color: #ffb64e; font-size: 20px">无课程</span>
                  </div>
                  <div class="boxtitle2">
                    <span style="color: #878b92">请点击新建开课，创建课程</span>
                  </div>
                </div>
                <div class="smallleft"></div>
                <div class="smallright"></div>
              </div>
            </div>
            <div class="rwbox">
              <!-- <div class="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="tableBox" style="border: 1px solid #f2f6fc">
                <div
                  style="
                    height: 50px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background-color: #eff4fc;
                    font-size: 14px;
                    font-weight: 400;
                    color: #999ba3;
                    line-height: 36px;
                    border-bottom: 1px solid #f2f6fc;
                  "
                >
                  <div
                    style="
                      width: 87px;
                      text-align: center;
                      display: flex;
                      margin-left: 46px;
                    "
                  >
                    <img
                      style="
                        width: 16px;
                        height: 16px;
                        cursor: pointer;
                        margin-top: 12px;
                      "
                      :src="
                        selectAll === 0
                          ? require('../../assets/images/notSelect.png')
                          : selectAll === 1
                          ? require('../../assets/images/selectAll.png')
                          : require('../../assets/images/select.png')
                      "
                      @click="selectRowAll"
                    />
                    <!-- <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: 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.id"
                            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 + "分钟" : "-" }}
                      </div>
                      <div
                        style="
                          width: 120px;
                          text-align: center;
                          margin-right: 20px;
                        "
                      >
                        <div class="opa">
                          <div class="opacation">
                            <span
                              v-if="element.type!==5"
                              style="
                                color: #4ea6ff;
                                margin-right: 25px;
                                cursor: pointer;
                              "
                              @click="
                                decideType(
                                  element.lei,
                                  element.courseId,
                                  element.id
                                )
                              "
                            >
                              编辑
                            </span>
                            <span
															v-else
															style="
															color: #4ea6ff;
															margin-right: 55px;
															cursor: pointer;
															">
														</span>
                            <span
                              style="color: #4ea6ff; cursor: pointer"
                              @click="showDelete(element.id)"
                            >
                              删除
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                </draggable>
                <!-- <a-table
                  style="border: 1px solid #f2f6fe"
                  :columns="tableDataFunc()"
                  :data-source="tableData"
                  :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>
            </div>

            <!-- 编辑在线侧弹窗 -->
            <div>
              <edit-online v-model:editonlineVisible="editonlinevisible" />
            </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> -->

    <!-- 添加阶段弹窗 -->
    <div>
      <a-modal
        v-model:visible="stage"
        :title="null"
        @ok="closeModal"
        :footer="null"
        :closable="false"
        wrapClassName="addstage"
        width="624px"
        height="388px"
        centered="true"
        @cancel="closeModal"
      >
        <div
          class="modalHeader"
          style="
            width: 100%;
            height: 68px;
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div class="headerLeft" style="margin-left: 32px">
            <span class="headerLeftText" style="font-size: 16px"
              >编辑/添加阶段</span
            >
          </div>
          <div style="cursor: pointer; margin-right: 32px" @click="closeModal">
            <img
              style="width: 22px; height: 22px"
              src="../../assets/images/basicinfo/close22.png"
            />
          </div>
        </div>
        <div class="modalMain" style="width: 100%">
          <div class="name">
            <div class="namebox">
              <div>
                <img
                  src="@/assets/images/coursewareManage/asterisk.png"
                  alt=""
                />
              </div>
              <div class="inname">阶段名称：</div>
            </div>
            <div class="in">
              <a-input
                v-model:value="valuesname"
                show-count
                :maxlength="20"
                placeholder="请输入阶段名称"
              />
            </div>
          </div>
          <div class="name" style="display: flex; align-items: flex-start">
            <div class="namebox">
              <div class="inname">阶段说明：</div>
            </div>
            <div class="intext" style="margin-left: 14px">
              <a-textarea
                v-model:value="valuesnotice"
                style="height: 88px"
                show-count
                :maxlength="100"
                placeholder="请输入阶段说明"
              />
            </div>
          </div>
          <div
            style="
              display: flex;
              width: 100%;
              justify-content: center;
              margin-top: 40px;
            "
          >
            <button
              @click="closeModal"
              style="
                cursor: pointer;
                height: 40px;
                width: 100px;
                border: 1px solid #4ea6ff;
                border-radius: 4px;
                color: #4ea6ff;
                background-color: #ffffff;
              "
            >
              取消
            </button>
            <button
              @click="editStage"
              style="
                cursor: pointer;
                margin-left: 16px;
                margin-bottom: 40px;
                height: 40px;
                width: 100px;
                border: 1px solid #4ea6ff;
                border-radius: 4px;
                color: #ffffff;
                background-color: #4ea6ff;
              "
            >
              确定
            </button>
          </div>
        </div>
        <div
          class="aeLoading"
          :style="{ display: addLoading ? 'flex' : 'none' }"
        >
          <a-spin
            :spinning="addLoading"
            :tip="updateStageID ? '修改中...' : ''"
          />
        </div>
      </a-modal>
    </div>
    <!-- 确认添加阶段弹窗 -->
    <a-modal
      v-model:visible="confirmModal"
      :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="showModal">
              <div class="btnText">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 确认取消阶段弹窗 -->
    <a-modal
      v-model:visible="cancelModal"
      :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="closeCancel"></div>
          </div>
          <div class="body">
            <span>您确定要取消阶段吗</span>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn1">
              <div class="btnText" @click="closeCancel">取消</div>
            </div>
            <div class="del_btn btn2">
              <div class="btnText" @click="removeAllLevel">确定</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="closeDelete"></div>
          </div>
          <div class="body">
            <span>您确定要删除此任务吗</span>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn1">
              <div class="btnText" @click="delete_exit">取消</div>
            </div>
            <div class="del_btn btn2">
              <div class="btnText" @click="showModal1">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <a-modal
      v-model:visible="deAll"
      :footer="null"
      :closable="cC"
      wrapClassName="ConfirmModal"
      centered="true"
    >
      <div class="delete">
        <div class="del_header"></div>
        <div class="del_main">
          <div class="header">
            <div class="icon"></div>
            <span>提示</span>
            <div class="close_exit" @click="closeDeAll"></div>
          </div>
          <div class="body">
            <span>您确定要批量删除任务吗</span>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn1">
              <div class="btnText" @click="closeDeAll">取消</div>
            </div>
            <div class="del_btn btn2">
              <div class="btnText" @click="deleteTaskAll">确定</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="deleteStageModal"
      :footer="null"
      :closable="cC"
      wrapClassName="ConfirmModal"
      centered="true"
    >
      <div class="delete">
        <div class="del_header"></div>
        <div class="del_main">
          <div class="header">
            <div class="icon"></div>
            <span>提示</span>
            <div class="close_exit" @click="closeDeleteStage"></div>
          </div>
          <div class="body">
            <span>您确定要删除此阶段</span>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn1" @click="closeDeleteStage">
              <div class="btnText">取消</div>
            </div>
            <div class="del_btn btn2" @click="deleteStage">
              <div class="btnText">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>
  
  <script>
import { reactive, toRefs, onMounted, onUnmounted, onUpdated } from "vue";
import AddOnline from "../../components/drawers/AddOnline.vue";
import EditOnline from "../../components/drawers/EditOnline.vue";
import AddFaceteach from "../../components/drawers/AddFaceteach.vue";
import AddCase from "../../components/drawers/AddCase.vue";
import AddHomework from "../../components/drawers/AddHomework.vue";
import AddTest from "../../components/drawers/AddTest.vue";
import AddLive from "../../components/drawers/AddLive.vue";
import AddRef from "../../components/drawers/AddRef.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 { message } from "ant-design-vue";
import * as api from "../../api/indexTemplate";
import draggable from "vuedraggable";
import { storage } from "../../api/storage";
// import UnlockMode from "../../components/drawers/UnlockMode.vue";
// import * as api1 from "../../api/index1";
import { useRouter, useRoute } from "vue-router";
const drawercolumns = [
  {
    title: "项目名称",
    dataIndex: "projectName",
    key: "projectName",
    width: 200,
    // align: "center",
    ellipsis: true,
    // scopedSlots: { customRender: "action" }, //引入的插槽
    // customRender: (text, record) => {
    //   console.log(text, record);
    //   return <span>{text.text}</span>;
    // },
  },
  {
    title: "项目经理",
    dataIndex: "manager",
    key: "manager",
    width: 100,
    align: "center",
  },

  {
    title: "创建人",
    dataIndex: "creater",
    // width: "30%",
    key: "creater",
    width: 100,
    align: "center",
  },
  {
    title: "创建时间",
    dataIndex: "time",
    key: "time",
    width: 180,
    align: "center",
  },
];
export default {
  name: "TaskAdd",
  components: {
    draggable,
    AddOnline,
    EditOnline,
    AddFaceteach,
    AddCase,
    AddHomework,
    AddTest,
    AddLive,
    AddRef,
    //AddDiscuss,
    AddActive,
    AddEval,
    AddInvist,
    //AddVote,
    // UnlockMode,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      projectId: route.query.projectId,
      projectTemplateId: storage.get("projectTemplateId")
        ? JSON.parse(storage.get("projectTemplateId"))
        : null,
      chooseStageId: null,
      removeStageId: null,
      edit: false,
      isLevel: 3, //学习路径1项目2模板库3
      // isRefEdit: 1, //外链编辑
      // isLiveEdit: 1, //直播编辑
      isRefEdit: false, //外链编辑
      isLiveEdit: false, //直播编辑
      EditRefId: null, //要编辑的外链的id
      EditLiveId: null, //要编辑的直播的ids
      deAll: false,
      EditDiscussId: null, //要编辑的讨论的id
      EditActiveId: null, //要编辑的活动id
      EditWorkId: null, // 要编辑的作业id
      EditTestId: null, // 要编辑的考试id
      EditCaseId: null, //要编辑的案例id
      EditOnlineId: null, //要编辑的在线id
      EditFaceId: null,
      EditEvalId: null,
      EditInvistId: null,
      EditVoteId: null, //编辑需要投票的id
      ballotId: "", //编辑需要的题干id
      projectTaskId: null, // 要编辑的具体任务id
      projectNameList: [
        {
          id: 1,
          value: "项目一",
          label: "项目一",
        },
        {
          id: 2,
          value: "项目二",
          label: "项目二",
        },
        {
          id: 3,
          value: "项目三",
          label: "项目三",
        },
        {
          id: 4,
          value: "项目四",
          label: "项目四",
        },
      ],
      projectNameList2: [
        {
          id: 1,
          value: "删除任务",
          label: "删除任务",
        },
        {
          id: 2,
          value: "移动任务到关卡",
          label: "移动任务到关卡",
        },
      ],
      //阶段数据
      level: [],

      projectTitle: null,
      picUrl: null,
      //任务数据
      tableData: [],
      drawertableData: [
        {
          key: 1,
          projectName: "管理者进阶",
          manager: "黄华  刘俊",
          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
          children: [
            {
              key: "1-1",
              projectName: "管理者进阶-腾飞班",
              manager: "黄华  刘俊",
              creater: "毛继禹",
              time: "2022-07-20 14:00:03",
              children: [
                {
                  key: "1-1-1",
                  projectName: "管理者进阶-腾飞班K1",
                  manager: "黄华  刘俊",
                  creater: "毛继禹",
                  time: "2022-07-20 14:00:03",
                },
              ],
            },
          ],
        },
        {
          key: 2,
          projectName: "管理者进阶",
          manager: "黄华  刘俊",
          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
          children: [
            {
              key: "2-1",
              projectName: "管理者进阶-腾飞班",
              manager: "黄华  刘俊",
              creater: "毛继禹",
              time: "2022-07-20 14:00:03",
              children: [
                {
                  key: "2-1-1",
                  projectName: "管理者进阶-腾飞班K1",
                  manager: "黄华  刘俊",
                  creater: "毛继禹",
                  time: "2022-07-20 14:00:03",
                },
              ],
            },
          ],
        },
        {
          key: 3,
          projectName: "管理者进阶-腾飞班K1",
          manager: "黄华  刘俊",
          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
        },
        {
          key: 4,
          projectName: "管理者进阶-腾飞班K1",
          manager: "黄华  刘俊",
          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
        },
        {
          key: 5,
          projectName: "管理者进阶-腾飞班K1",
          manager: "黄华  刘俊",
          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
        },
        {
          key: "1-1-1",
          projectName: "管理者进阶-腾飞班K1",
          manager: "黄华  刘俊",
          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
        },
      ],
      currentPage: 1,
      tableDataTotal: 100,
      pageSize: 10,
      addonlinevisible: false,
      addfaceteachvisible: false,
      addcasevisible: false,
      editonlinevisible: false,
      addhomeworkvisible: false,
      addtestvisible: false,
      addlivevisible: false,
      addrefvisible: false,
      adddiscussvisible: false,
      addactivevisible: false,
      addevalvisible: false,
      addinvistvisible: false,
      addvotevisible: false,
      stage: false,
      selectedRowKeys: [],
      valuesname: "",
      valuesnotice: "",
      visiblene: false, //移动任务弹窗
      confirmModal: false, //确认添加阶段弹窗
      cC: false,
      cancelModal: false, //确认取消阶段弹窗
      deleteModal: false, //确认删除弹窗
      isActive: false,
      deleteLiveID: null, //删除直播id
      deleteExternalID: null, //删除外链id
      deleteEvalID: null, //测评
      deleteInvistID: 4, //评估
      deleteDiscussID: null, //删除讨论id
      deleteActivityID: null, //删除活动id
      voteId: "", //删除投票id
      deleteID: "",
      selectRow: [], //选择行
      curLevel: [], //阶段名称
      selectAll: 0, //0：未选择，1：全选，2：部分选择

      updateStageID: null, //编辑阶段id
      deleteStageId: null, //删除阶段的id
      deleteStageModal: false, //删除阶段弹窗

      unlockModeVisible: false, //切换模式抽屉

      addLoading: false, //添加、编辑阶段动画
    });
    console.log("projectTemplateId", state.projectTemplateId);
    const selectProjectName = (value, index) => {
      console.log("value", value, index);
    };
    const selectProjectName2 = (value, index) => {
      console.log("value", value, index);
    };
    const afterVisibleChange = (bool) => {
      console.log("visible", bool);
    };

    // 把数据放到state里
    const getTableData = (tableData) => {
      let data = tableData;
      let array = [];
      console.log("data", data);
      data.map((value) => {
        let obj = {
          id: value.templateTaskId,
          key: value.templateTaskId,
          lei:
            value.type == 1
              ? "在线"
              : value.type == 2
              ? "面授"
              : value.type == 3
              ? "案例"
              : value.type == 4
              ? "作业"
              : value.type == 5
              ? "考试"
              : value.type == 6
              ? "直播"
              : value.type == 7
              ? "外链"
              : value.type == 8
              ? "讨论"
              : value.type == 9
              ? "活动"
              : value.type == 10
              ? "测评"
              : value.type == 11
              ? "评估"
              : value.type == 12
              ? "投票"
              : "-",
          creater: value.name,
          cretime: value.duration || value.duration == 0 ? value.duration : "-",
          checked1: value.flag ? true : false,
          checked: false, //是否选中类型
          courseId: value.courseId,
          projectTemplateId: value.projectTemplateId,
          stageId: value.templateStageId,
          type: value.type,
        };
        array.push(obj);
      });
      state.tableData = array;
      console.log("state.tableData", state.tableData);
    };
    //把阶段放到level里
    const getStageData = (tableData) => {
      let data = tableData;
      let array = [];
      data.map((value) => {
        console.log(
          "dd",
          Number(value.templateStageId),
          Number(value.templateStageId) > 0
        );
        if (Number(value.templateStageId) > 0) {
          let obj = {
            id: value.templateStageId,
            tit: value.name,
            name: value.remark,
            taskList: value.taskList,
            value: value.templateStageId,
            label: value.name,
            courseId: value.courseId ? value.courseId : null,
          };
          array.push(obj);
        }
      });
      state.level = array;
    };

    const tableDataFunc = () => {
      const columns = [
        {
          title: "类型",
          dataIndex: "state",
          // width: "30%",
          key: "state",
          width: 60,
          align: "left",
          className: "classify",
          scopedSlots: { customRender: "action" },
          customRender: (text) => {
            // console.log(text.record.checked1);
            return (
              <div class="racona">
                <div
                  class="img"
                  style={{ cursor: "pointer" }}
                  onClick={() => {
                    console.log("点击了");
                  }}
                ></div>
                <span> {text.record.lei}</span>

                {/**
                                              <div class="img"></div>
                              <a-checkbox class="ch" checked={text.record.checkedd}>
                                {text.record.lei}
                              </a-checkbox>
              */}
              </div>
            );
          },
        },
        {
          title: "任务名称",
          dataIndex: "creater",
          // width: "30%",
          key: "creater",
          width: 200,
          align: "center",
          className: "h",
        },
        {
          title: "必修/选修",
          dataIndex: "pubtime",
          key: "pubtime",
          // width: 100,
          align: "center",
          className: "h",
          scopedSlots: { customRender: "action" },
          customRender: (text) => {
            // console.log(text.record.checked1);
            return (
              <div class="opat">
                <div class="opacationt clearfix">
                  <a-switch
                    style="margin-left:-50px;margin-top:3px"
                    checked={text.record.checked1}
                    size="small"
                    active-color="red"
                    onClick={() => {
                      console.log("点击了");
                      text.record.checked1 = !text.record.checked1;
                    }}
                  />
                  <div class="showt clearfix">
                    <div
                      class="bi"
                      style={
                        text.record.checked1 ? "z-index:999" : "z-index:998"
                      }
                    >
                      必修
                    </div>
                    <div class="xuan">选修</div>
                  </div>
                </div>
              </div>
            );
          },
        },
        {
          title: "时长",
          dataIndex: "cretime",
          key: "cretime",
          // width: 100,
          align: "center",
          className: "h",
        },
        {
          title: "操作",
          className: "h",
          dataIndex: "opacation",
          key: "opacation",
          // width: 100,
          align: "center",
          scopedSlots: { customRender: "action" },
          customRender: (text) => {
            return (
              <div class="opa">
                <div class="opacation">
                  <span
                    onClick={() => {
                      state.editonlinevisible = true;
                      console.log(text, "编辑text");
                    }}
                    style="color:#4EA6FF;margin-right:25px;cursor:pointer"
                  >
                    编辑
                  </span>
                  <span
                    style="color:#4EA6FF;cursor:pointer"
                    onClick={() => {
                      showDelete(text.record.id);
                    }}
                  >
                    删除
                  </span>
                </div>
              </div>
            );
          },
        },
      ];
      return columns;
    };

    //获取任务列表
    /** 
    const getTask = () => {
      state.tableData = [];
      api
        .templateDetail(localStorage.getItem("projectTemplateId"))
        .then((res) => {
          console.log("获取的任务列表信息", res);
          if (res.status == 200) {
            console.log("22222", res.data.data.stageList);
            state.projectTitle = res.data.data.projectTemplateInfo.name;
            state.picUrl = res.data.data.projectTemplateInfo.picUrl;
            let leng =
              res.data.data.stageList[0].name !== null
                ? res.data.data.stageList.length
                : 0;
            if (leng > 0) {
              let stage = localStorage.getItem("templateStageId")
                ? localStorage.getItem("templateStageId")
                : null;
              console.log("zhaodaole", stage);
              // console.log("stage",Object.prototype.toString.call(stage))
              getStageData(res.data.data.stageList);
              if (stage !== null) {
                console.log(stage);
                let stageList = res.data.data.stageList; //阶段数组
                let result = stageList.find(
                  (item) => item.templateStageId == stage
                );
                console.log("又找到了", result);
                if(result !=null ){
                  changebgc(res.data.data.stageList[0].templateStageId);
                  getTableData(result.taskList);
                }
               
              } else {
                let arr = res.data.data.stageList[0].taskList;
                console.log("任务列表", arr);
                changebgc(res.data.data.stageList[0].templateStageId);
                getTableData(arr);
                // state.isActive = true;
              }

            
            }
            let stagearr = res.data.data.stageList;
            let arrlist = state.curLevel;
            console.log(stagearr, 111111);
            if (stagearr.length > 0) {
              getStageData(stagearr);
              stagearr.map((value) => {
                console.log(value);
                arrlist.push();
              });
            }
            //给阶段id赋初始值
            let stageid = localStorage.getItem("templateStageId")
              ? localStorage.getItem("templateStageId")
              : null;
            if (stageid !== "null") {
              state.chooseStageId = stageid;
            } else {
              state.chooseStageId =
                leng > 0 ? stagearr[0].templateStageId : null;
            }
          }
        })
        .catch((err) => {
          console.log("获取任务列表失败", err);
        });
    };*/
    // 删除所有阶段
    const removeAllLevel = () => {
      // state.cancelModal = false;
      console.log(state.level);
      let removeArr = state.level;
      for (let i = 0; i < removeArr.length; i++) {
      
        api
        .deleteStage(removeArr[i].id)
          .then((res) => {
            console.log("删除阶段成功", res);
            if (removeArr.length - 1 == i) {
              message.destroy();
              message.success("删除全部阶段成功");
              closeDeleteStage();
              localStorage.setItem("stageId", "");
              getTask();
              state.cancelModal = false;
            }
          })
          .catch((err) => {
            if (removeArr.length - 1 == i) {
              console.log("删除阶段失败", err);
              message.destroy();
              message.success("删除全部阶段失败");
              state.cancelModal = false;
            }
          });
      }
    };
    //获取任务列表
    const getTask = async () => {
      await api
        .templateDetail(localStorage.getItem("projectTemplateId"))
        .then((res) => {
          console.log("22222", res.data.data.stageList);
          state.projectTitle = res.data.data.projectTemplateInfo.name;
          state.picUrl = res.data.data.projectTemplateInfo.picUrl;
          state.stageList = res.data.data.stageList;
          getStageData(res.data.data.stageList);
          updateStageChoosd();
        });
    };

    function updateStageChoosd() {
      console.log("updateStageChoosd");
      console.log(state.chooseStageId);
      if (
        state.chooseStageId &&
        state.stageList.find((e) => e.templateStageId == state.chooseStageId)
      ) {
        getTableData(
          state.stageList.find((e) => e.templateStageId == state.chooseStageId)
            ?.taskList
        );
        return;
      }
      state.chooseStageId = "";
      const arr = state.stageList.filter((e) => e.name);
      arr && arr.length && (state.chooseStageId = arr[0].templateStageId);
      if (!state.chooseStageId) {
        getTableData(state.stageList[0].taskList);
        return;
      }
      console.log(
        state.chooseStageId,
        state.stageList.find((e) => e.templateStageId == state.chooseStageId)
          ?.taskList,
        state.stageList
      );
      getTableData(
        state.stageList.find((e) => e.templateStageId == state.chooseStageId)
          ?.taskList
      );
    }

    //获取修改、删除id（投票)
    const changeVData = (data) => {
      console.log("获取修改、删除id投票", data);
      state.voteId = data.voteId;
      state.ballotId = data.ballotId;
    };
    //数据变化
    const updateTableData = (data) => {
      console.log("添加数据", data);
      getTask(data);
    };

    //删除任务
    const deleteTask = () => {
      api
        .deleteTask(state.deleteID)
        .then((res) => {
          console.log(res, "gggggggggggggggg");
          getTask();
        })
        .catch((err) => {
          console.log(err);
        });
    };

    const showChangeModal = () => {
      if (state.selectRow.length == 0) {
        message.destroy();
        return message.warning("请选择要移动的任务");
      } else {
        state.visiblene = true;
      }
    };
    const closeChangeModal = () => {
      state.visiblene = false;
    };
    //移动任务到阶段
    const moveTask = () => {
      if (state.chooseStageId == state.removeStageId) {
        console.log("buneng");
        message.destroy();
        message.warning("选择的任务已在当前阶段");
      } else if (state.removeStageId == null) {
        message.destroy();
        message.warning("请选择阶段");
      } else {
        {
          let obj = {
            templateStageId: state.removeStageId,
            projectTemplateTaskId: state.selectRow,
          };
          api
            .moveTask(obj)
            .then((res) => {
              console.log("移动成功", res);
              message.destroy();
              message.success("移动成功");
              console.log(state.removeStageId);
              getTask();
              localStorage.setItem("stageId", state.chooseStageId);
            })
            .catch((err) => {
              console.log("移动失败", err);
            });
          state.visiblene = false;
        }
      }
    };
    //批量删除
    const deleteTaskAll = () => {
      let arr = state.selectRow;
      console.log("选择的行信息", arr);
      arr.map(() => {
        api
          .deleteTask(arr)
          .then((res) => {
            console.log(res);
            message.destroy();
            message.success("批量删除成功");
            getTask();
          })
          .catch((err) => {
            console.log(err);
            message.destroy();
            message.warning("批量删除失败");
          });
      });
      state.deAll = false;
    };
    const onSelectChange = (selectedRowKeys) => {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      state.selectedRowKeys = selectedRowKeys;
    };
    // const getClientHeight = () => {
    //   state.rightheight =
    //     document.getElementsByClassName("addhead")[0].offsetHeight +
    //     document.getElementsByClassName("mid")[0].offsetHeight +
    //     document.getElementsByClassName("boom")[0].offsetHeight +
    //     40 +
    //     "px";
    // };

    const showModal1 = () => {
      //关闭确认框
      state.deleteModal = false;
      deleteTask();
      message.success("删除成功");
      getTask();
    };
    //关闭添加阶段弹窗
    const closeModal = () => {
      state.stage = false;
      state.valuesname = "";
      state.valuesnotice = "";
      state.updateStageID = null;
    };
    //显示添加阶段弹窗
    const showModal = (element) => {
      state.stage = true;
      //关闭确认框
      closeConfirm();

      if (element) {
        state.valuesname = element.tit;
        state.valuesnotice = element.name;
        state.updateStageID = element.id;
      }
    };
    //添加阶段
    const editStage = () => {
      if (!state.valuesname) {
        message.destroy();
        return message.warning("请输入阶段名称");
      }
      state.addLoading = true;
      let obj = {
        name: state.valuesname,
        projectTemplateId: localStorage.getItem("projectTemplateId"),
        remark: state.valuesnotice,
        stageId: state.updateStageID || 0,
      };
      api
        .editStage(obj)
        .then((res) => {
          console.log("操作成功", res);
          state.valuesname = "";
          state.valuesnotice = "";
          closeModal();
          state.updateStageID = null;
          message.destroy();
          message.success("操作成功");
          getTask();
          state.addLoading = false;
        })
        .catch((err) => {
          console.log("操作失败", err);
        });
    };

    //打开删除阶段弹窗
    const showDeleteStage = (id) => {
      state.deleteStageId = id;
      state.deleteStageModal = true;
    };
    //关闭删除阶段弹窗
    const closeDeleteStage = () => {
      state.deleteStageId = null;
      state.deleteStageModal = false;
    };
    //删除阶段
    const deleteStage = () => {
      console.log("chapterId", state.deleteStageId);
      api
        .deleteStage(state.deleteStageId)
        .then((res) => {
          console.log("删除阶段成功", res);
          message.success("删除阶段成功");
          closeDeleteStage();
          getTask();
        })
        .catch((err) => {
          console.log("删除阶段失败", err);
        });
    };
    onMounted(() => {
      document.getElementsByTagName("main")[0].style.background =
        "rgb(245, 247, 250,1)";
      document.getElementsByTagName("main")[0].style.boxShadow = "none";
      getTask();
    });
    onUpdated(() => {});
    onUnmounted(() => {
      document.getElementsByTagName("main")[0].style.background = "#ffffff";
      document.getElementsByTagName("main")[0].style.boxShadow =
        "0px 1px 35px 0px rgba(118, 136, 166, 0.07)";
    });
    const showDrawerOnline = (id, eleId) => {
      console.log(id, eleId);
      state.addonlinevisible = true;
      state.EditOnlineId = id;
      state.projectTaskId = eleId;
    };
    const showDrawerFaceteach = (id, eleId) => {
      state.addfaceteachvisible = true;
      console.log("id==========", id);
      state.EditFaceId = id;
      state.projectTaskId = eleId;
    };
    const showDrawerAddCase = (id, eleId) => {
      state.addcasevisible = true;
      state.EditCaseId = id;
      state.projectTaskId = eleId;
    };
    const showDrawerAddHomework = (id, eleId) => {
      state.EditWorkId = id;
      state.projectTaskId = eleId;
      state.addhomeworkvisible = true;
    };
    const showDrawerAddTest = (id, eleId) => {
      state.EditTestId = id;
      state.projectTaskId = eleId;
      state.addtestvisible = true;
    };
    const showDrawerAddLive = (id, eleId) => {
      state.addlivevisible = true;
      state.EditLiveId = id;
      state.projectTaskId = eleId;
    };
    const showDrawerAddRef = (id, eleId) => {
      state.EditRefId = id;
      state.projectTaskId = eleId;
      state.addrefvisible = true;
    };
    const showDrawerAddDiscuss = (id, eleId) => {
      console.log("projectTemplateId========", state.projectTemplateId);
      state.EditDiscussId = id;
      state.projectTaskId = eleId;
      state.adddiscussvisible = true;
    };

    const showDrawerAddActive = (id, eleId) => {
      state.addactivevisible = true;
      state.EditActiveId = id;
      state.projectTaskId = eleId;
      console.log("active=======", id);
    };
    const showDrawerAddEval = (id, eleId) => {
      state.addevalvisible = true;
      // state.EditEvalId = id;
      state.evaluationId = id;
      state.projectTaskId = eleId;
    };
    const showDrawerAddInvist = (id, eleId) => {
      console.log(id, eleId, "213312");
      state.addinvistvisible = true;
      state.projectTaskId = eleId;
    };
    const showDrawerAddVote = (id, eleId) => {
      console.log(id, eleId, "95835325932953295325");
      state.addvotevisible = true;
      state.EditVoteId = id;
      state.projectTaskId = eleId;
      // voteId = state.voteId;
      // ballotId = state.ballotId;
    };
    const showConfirm = () => {
      state.confirmModal = true;
    };
    const closeConfirm = () => {
      state.confirmModal = false;
    };
    const showCancel = () => {
      state.cancelModal = true;
    };
    const closeCancel = () => {
      state.cancelModal = false;
    };
    const showDelete = (id) => {
      state.deleteModal = true;
      state.deleteID = id;
    };
    const closeDelete = () => {
      state.deleteModal = false;
    };
    const changebgc = (id) => {
      state.isActive = !state.isActive;
      state.selectRow = []; //选择行
      state.selectAll = 0; //0：未选择，1：全选，2：部分选择
      console.log("state.level", id, state.level);
      state.chooseStageId = id;
      let final = state.level.find((item) => item.id === id);
      if (final != null) {
        getTableData(final.taskList);
      }
    };

    //选择单个任务
    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;
      console.log(state.selectRow, "xuanzhong");
      console.log(Object.prototype.toString.call(state.selectRow));
      //判断是否是全部选择或者是全部未选择来修改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;
    };
    //修改任务的课程类型 id为任务id
    const changeCourseType = (ele) => {
      console.log("任务id", ele.id);
      console.log("flag", ele.checked1);
      console.log("ele", ele);
      let obj = {
        courseId: ele.courseId,
        duration: ele.cretime == "-" ? 0 : ele.cretime,
        flag: ele.checked1,
        name: ele.creater,
        projectTemplateId: ele.projectTemplateId,
        projectTaskId: ele.id,
        stageId: ele.stageId,
        type: ele.type,
      };
      api
        .editTask(obj)
        .then((res) => {
          console.log(`修改状态成功${res.data}`);
          message.destroy();
          message.success("修改成功");
        })
        .catch((err) => {
          console.log(`修改状态失败${err.data}`);
          message.destroy();
          message.warning("修改失败");
        });
    };

    //打开测评的弹窗
    const showEditEvalDrawer = (id, eleId) => {
      state.addevalvisible = true;
      state.projectTaskId = eleId;
      state.EditRefId = id;
      console.log(state.EditRefId);
    };
    //编辑的按钮
    const decideType = (type, id, eleId) => {
      state.edit = true;
      console.log(type, id);
      if (type == "外链") {
        showDrawerAddRef(id, eleId);
      } else if (type == "直播") {
        showDrawerAddLive(id, eleId);
      } else if (type == "测评") {
        showEditEvalDrawer(id, eleId);
      } else if (type == "评估") {
        showDrawerAddInvist(id, eleId);
      } else if (type == "投票") {
        showDrawerAddVote(id, eleId);
      } else if (type == "讨论") {
        showDrawerAddDiscuss(id, eleId);
      } else if (type == "活动") {
        showDrawerAddActive(id, eleId);
      } else if (type == "作业") {
        showDrawerAddHomework(id, eleId);
      } else if (type == "考试") {
        showDrawerAddTest(id, eleId);
      } else if (type == "在线") {
        showDrawerOnline(id, eleId);
      } else if (type == "面授") {
        showDrawerFaceteach(id, eleId);
      }
    };
    const showdeAll = () => {
      if (state.selectRow.length == 0) {
        message.destroy();
        return message.warning("请选择要删除的任务");
      } else {
        state.deAll = true;
      }
    };
    const closeDeAll = () => {
      state.deAll = false;
    };
    const handleChangeStage = (value, option) => {
      console.log("阶段改变", value, option);
      state.removeStageId = option.id;
    };

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

    //暂存
    const temporaryStorage = () => {
      message.success("暂存成功");
    };
    //确定
    const submitStorage = () => {
      router.push({
        path: "/leveladd",
      });
    };
    //取消
    const cancelStorage = () => {
      router.push({
        path: "/leveladd",
      });
    };
    return {
      ...toRefs(state),
      selectProjectName,
      selectProjectName2,
      tableDataFunc,
      showModal,
      closeModal,
      // showDrawer,
      afterVisibleChange,
      drawercolumns,
      onSelectChange,
      showDrawerOnline,
      showDrawerFaceteach,
      showDrawerAddCase,
      showDrawerAddHomework,
      showDrawerAddTest,
      showDrawerAddLive,
      showDrawerAddRef,
      showDrawerAddDiscuss,
      showDrawerAddActive,
      showDrawerAddEval,
      showEditEvalDrawer,
      showDrawerAddInvist,
      showDrawerAddVote,
      showConfirm,
      closeConfirm,
      showCancel,
      showModal1,
      closeCancel,
      showDelete,
      closeDelete,
      showChangeModal,
      closeChangeModal,
      changebgc,
      getTask,
      getTableData,
      deleteTask,
      editStage,
      removeAllLevel,
      updateTableData,
      changeVData,
      changeRow,
      selectRowAll,
      changeCourseType,
      getStageData,
      moveTask,
      deleteTaskAll,
      decideType,
      showdeAll,
      closeDeAll,
      handleChangeStage,

      showDeleteStage,
      closeDeleteStage,
      deleteStage,

      showModeVisible,

      temporaryStorage,
      submitStorage,
      cancelStorage,
    };
  },
};
</script>
  
  <style lang="scss">
// .ant-input {
//   border-radius: 8px;
//   // height: 120%;
//   width: 384px;
//   height: 88px;
// }
.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;
          // 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;
              }
            }
          }
        }
      }
    }
  }
}
.addstage {
  .ant-modal {
    .ant-modal-body {
      padding: 0 !important;
      .modalHeader {
        background: linear-gradient(
          0deg,
          rgba(78, 166, 255, 0) 0%,
          rgba(78, 166, 255, 0.2) 100%
        );
      }
      .modalMain {
        .ant-input-textarea-show-count {
          position: relative;
          height: 88px;
        }
        .ant-input-textarea-show-count::after {
          position: absolute;
          right: 10px;
          bottom: 5px;
        }
      }
    }
  }

  .name {
    width: 78%;
    // background-color: lightcoral;
    display: flex;
    margin-top: 20px;
    align-items: center;
    //height: 40px;
    // border: 1px solid black;
    .namebox {
      width: 120px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-shrink: 0;
      .nameimg {
        width: 10px;
        height: 10px;
      }
    }
    .d {
      margin-top: 8px;
      font-size: 25px;
      color: #ff4e4e;
    }
    .box {
      position: relative;
      margin-left: 14px;
      .box1 {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 50px;
        margin-left: -25px;
        margin-top: -5px;
        border-top: 2px solid rgba(78, 166, 255, 1);
      }
      .box2 {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 50px;
        //margin-left: -5px;
        margin-top: -25px;
        border-left: 2px solid rgba(78, 166, 255, 1);
      }
    }
    .inname {
      color: #000000;
      font-size: 14px;
      margin-left: 7px;
    }
    .in {
      margin-left: 14px;
      flex: 1;
      // .ant-radio-wrapper {
      // }
      .ant-input-affix-wrapper {
        width: 384px;
        border-radius: 8px;
      }
      .ant-input {
        border-radius: 8px;
        // height: 120%;
        //width: 384px;
        height: 30px;
      }
    }
  }
}
.moveModal {
  .ant-modal {
    width: 549px !important;
    height: 245px !important;
    .ant-modal-content {
      width: 549px !important;
      height: 245px !important;
      .ant-modal-body {
        padding: 0 !important;
        width: 549px !important;
        height: 245px !important;
        .con {
          // background-color: #bfa;
          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;
                }
              }
            }
          }
        }
      }
    }
  }
}
// .info {
//   width: 78%;
//   // background-color: lightcoral;
//   display: flex;
//   margin-top: 30px;
//   // align-items: center;
//   // height: 40px;
//   // border: 1px solid black;

//   .inname {
//     color: #6f6f6f;
//     font-size: 14px;
//     margin-left: 26px;
//     margin-top: 15px;
//   }
//   .in {
//     margin-left: 14px;
//     width: 81%;
//     position: relative;
//     .ant-input {
//       border-radius: 5px;
//       // height: 120%;
//       width: 100%;
//       height: 130px;
//       resize: none;
//     }
//   }
// }

// .drawerStyle {
//   .ant-drawer-content-wrapper {
//     // max-width: 1000px;
//     .ant-drawer-header {
//       display: none !important;
//     }
//     .ant-drawer-body {
//       padding: 0;
//     }
//   }
//   .drawerMain {
//     min-width: 600px;
//     margin: 0px 32px 0px 32px;
//     overflow-x: auto;
//     display: flex;
//     flex-direction: column;
//     .header {
//       height: 73px;
//       border-bottom: 1px solid #e8e8e8;
//       display: flex;
//       justify-content: space-between;
//       align-items: center;
//       // background-color: red;
//       margin-bottom: 20px;
//       .headerTitle {
//         font-size: 18px;
//         font-weight: 600;
//         color: #333333;
//         line-height: 25px;
//         // margin-left: 24px;
//       }
//     }
//     .drawerbox {
//       margin: 20px 38px 30px;
//       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);
//       .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;
//       }
//     }
//   }
// }
.taskadd {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-width: 933px;
  // min-width: 1200px;
  // overflow-x: hidden;
  // min-width: 1400px;
  // overflow: scroll;
  background-color: rgba(245, 247, 250, 1);
  .left {
    margin-right: 20px;
    width: 208px;
    // height: 100%;
    // flex: 1;
    // height: 100%;
    background: #ffffff;
    box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
    display: flex;
    justify-content: center;
    .leftmain {
      // width: 86%;
      min-height: 800px;
      margin-top: 20px;
      .tit {
        margin-left: 20px;
        font-size: 18px;
        color: #363636;
      }

      // flex-wrap: wrap;
      .btn {
        margin-top: 20px;
        // padding: 0px 26px 0px 26px;
        height: 38px;
        background: #fff6e8;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        // margin-right: 14px;
        flex-shrink: 0;
        cursor: pointer;
        .search {
          background-size: 100%;
        }
        .btnText {
          font-size: 14px;
          font-weight: 400;
          color: #ffb64e;
          // line-height: 38px;
          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: 56px;
                height: 24px;
                background: #ffb64e;
                border-radius: 6px;
                margin-right: 12px;
                white-space: nowrap;
              }
              .imgIcon {
                width: 16px;
                height: 16px;
                background-image: url(@/assets/images/leveladd/edit1.png);
                background-size: 100% 100%;
              }
            }
            .boxs_right {
              .imgIcon {
                width: 16px;
                height: 16px;
                background-image: url(@/assets/images/leveladd/delete.png);
                background-size: 100% 100%;
              }
            }
          }
          .items2 {
            .nname {
              width: 140px;
              // 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 {
          // width: 500px;
          height: 100%;
          // background-color: red;
          // position: absolute;
          // right: 0;
          display: flex;
          align-items: center;
          .select {
            display: flex;
            align-items: center;
            white-space: nowrap;
            margin-right: 56px;
            .inputbox {
              display: flex;
              align-items: center;
              border: 1px solid #c7cbd2;
              width: 238px;
              height: 40px;
              border-radius: 8px;
              input {
                border: none;
                outline: none;
              }
              .bottonbox {
                width: 100px;
                height: 40px;
                background: #4ea6ff;
                border-radius: 8px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                flex-shrink: 0;
                .btnText {
                  font-size: 14px;
                  font-weight: 400;
                  color: #ffffff;
                  line-height: 36px;
                  margin-left: 5px;
                }
              }
            }
          }
          .line {
            height: 60px;
            width: 1px;
            background-color: #e8effa;
            margin-right: 18px;
          }
          .img2 {
            width: 42px;
            height: 42px;
            margin-right: 18px;
          }
          .pub {
            color: #57c887;
            font-size: 14px;
            margin-top: 5px;
            margin-right: 30px;
            cursor: pointer;
            white-space: nowrap;
          }
          @media screen and (max-width: 1050px) {
            .pub {
              margin-right: 10px;
            }
            .line {
              margin-right: 10px;
            }
          }
          .return {
            color: #4ea6ff;
            font-size: 14px;
            margin-top: 13px;
            margin-right: 20px;
            white-space: nowrap;
          }

          .role {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: 400;
            color: #333330;
            line-height: 36px;
            cursor: pointer;
            position: relative;
            margin-right: 20px;
            .roleArrow {
              width: 13px;
              height: 7px;
              margin-left: 8px;
              background-image: url(../../assets/images/navtop/down.png);
              background-size: 100%;
            }
            .roleItems {
              width: 109px;
              height: 90px;
              padding-top: 10px;
              background: #ffffff;
              box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
              position: absolute;
              top: 35px;
              right: 0px;
              text-align: center;
              display: none;
              z-index: 100;
            }
            .roleItem {
              font-size: 14px;
              font-weight: 400;
              color: rgba(79, 81, 86, 1);
              line-height: 36px;
            }
            .roleItem:hover {
              color: #4ea6ff;
            }
          }
          .role:hover .roleItems {
            display: block;
          }
          .role:hover .roleArrow {
            background-image: url(../../assets/images/navtop/up.png);
          }
        }
      }
    }

    .mid {
      width: 100%;
      // height: 130px;
      margin-top: 20px;
      margin-bottom: 20px;
      background-color: #fff;
      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .item {
        height: 115px;
        // 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%;
      flex: 1;
      background-color: #fff;
      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
      display: flex;
      justify-content: center;
      .boomcen {
        width: 95%;
        // height: 100%;
        // background-color: #bfa;
        .onerow {
          width: 100%;
          display: flex;
          height: 40px;
          position: relative;
          margin-top: 20px;
          .taskmain {
            font-size: 18px;
            color: #000000;
            margin-top: 10px;
          }
          .btn {
            position: absolute;
            top: 0;
            right: 130px;
            background-color: #4ea6ff;
            width: 130px;
            height: 40px;
            border-radius: 8px;
            border: 1px solid #4ea6ff;
            color: #ffffff;
            cursor: pointer;
          }
          .edit {
            position: absolute;
            right: 0;
            top: 0;
            color: #4ea6ff;
            width: 120px;
            height: 40px;
            border: 1px solid #4ea6ff;
            border-radius: 8px;
            .editimg {
              width: 15px;
              height: 15px;
              margin-top: -2px;
              margin-left: 25px;
              margin-right: 5px;
            }
            .editext {
              line-height: 40px;
            }
          }
          .edit:hover {
            color: #ffffff;
            background-color: #4ea6ff;
            cursor: pointer;
            .editimg {
              background-image: url("../../assets/images/projectadd/delete1.png");
            }
          }
        }
        .notable {
          width: 100%;
          display: flex;
          justify-content: center;
          .notablebox {
            width: 412px;
            height: 212px;
            background: linear-gradient(180deg, #fef3dd 0%, #fffaf0 100%);
            border-radius: 10px;
            display: flex;
            justify-content: center;
            text-align: center;
            margin-top: 77px;
            margin-bottom: 109px;
            cursor: pointer;
            position: relative;
            .smallleft {
              position: absolute;
              top: 18px;
              left: 0px;
              width: 8px;
              height: 21px;
              border-radius: 0px 4px 4px 0px;
              background-color: #ffb64e;
            }
            .smallright {
              position: absolute;
              bottom: 18px;
              right: 0px;
              width: 8px;
              height: 21px;
              border-radius: 4px 0px 0px 4px;
              background-color: #ffb64e;
            }
            .boxbody {
              .boximg {
                width: 72px;
                height: 72px;
                margin: 32px auto 20px auto;
                background-image: url(@/assets/images/coursewareManage/nostate.png);
                background-size: 100% 100%;
              }
              .boxtitle {
                margin-bottom: 4px;
              }
            }
          }
        }
        .rwbox {
          position: relative;
          .talk {
            margin-top: 24px;
            margin-bottom: 11px;
            width: 100%;
            height: 50px;
            background: #f5faff;
            border: 1px solid #4ea6ff;
            // opacity: 0.22;
            display: flex;
            align-items: center;
            .im {
              width: 14px;
              height: 15px;
              margin-left: 27px;
            }
            .xu {
              height: 100%;
              line-height: 50px;
              margin-left: 13px;
              .yi {
                color: #4f5156;
                font-size: 14px;
              }
              .zon {
                color: #999ba3;
                font-size: 14px;
                margin-left: 34px;
              }
              .th {
                color: #4ea6ff;
              }
            }
          }
          .tableBox {
            margin-bottom: 20px;
            margin-top: 20px;
            .chosen {
              background-color: #f2f6fc;
              opacity: 1;
            }
            .ghost {
              // background-color: red;
              opacity: 0;
            }
            .tableRow:hover {
              background-color: #f2f6fc;
            }
            //  .tableRow: {
            //     background-color: #f2f6fc;
            //   }
            .classify {
              margin-left: 10px !important;
              padding-left: 9px !important;
            }
            .ant-checkbox-wrapper {
              align-items: center;
              margin-top: -2px;
            }
            .ant-table-selection-column {
              padding: 0px !important;
              padding-left: 60px !important;
            }
            .ant-table-thead > tr > th {
              background-color: rgba(239, 244, 252, 1);
            }
            th.h {
              background-color: #eff4fc !important;
            }

            .ant-table-tbody
              > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
              > td {
              background: #f6f9fd;
            }
            .pa {
              left: 0;
              width: 100%;
              // height: 20px;
              // background-color: red;
              display: flex;
              justify-content: center;
              position: absolute;
              bottom: 20px;
            }
          }
        }
      }
    }
    // .drawerbox {
    //   // margin: 20px 38px 30px;
    //   th.h {
    //     background-color: #eff4fc !important;
    //   }

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

  .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 {
    display: flex;
    align-items: center;
    height: 100%;
    .img {
      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;
        }
      }
    }
  }
}
</style>
  