<template>
  <div class="addwrapper">
    <div class="addhead">
      <div class="leftimg">
        <!-- <img class="img" :src="picUrl" /> -->
        <img class="img" :src="picUrl" />
      </div>
      <div class="imgfor">
        <div class="forz">{{ styTitle }}</div>
        <div class="fort">创建时间：{{ cretime }}</div>
      </div>
      <div class="right">
        <img class="img1" src="../../assets/images/leveladd/ma.png" />
        <div v-if="action == 1 || action == 0" class="line"></div>
        <img
          v-if="action == 1 || action == 0"
          class="img2"
          src="../../assets/images/leveladd/pub.png"
        />
        <!-- 已发布的显示 -->
        <div
          class="pub"
          style="width: 28px"
          v-if="action == 1"
          @click="showBackModal"
        >
          {{ act }}
        </div>
        <!-- 未发布/草稿的显示 -->
        <div
          class="pub"
          style="width: 28px"
          v-if="action == 0"
          @click="showPub"
        >
          {{ act }}
        </div>
        <!-- 已结束的显示 -->
        <!-- <div class="pub" style="width: 28px" v-if="action == -1">
          {{ act }}
        </div> -->
        <div class="line"></div>
        <img
          style="margin-right: 15px"
          class="img2"
          src="../../assets/images/leveladd/more.png"
        />
        <!-- 草稿/未发布的显示 -->
        <div class="more" v-if="action == 0">
          <span style="color: #7096e3; cursor: pointer">更多</span>
          <div class="moreArrow"></div>
          <div class="moreItems">
            <!-- <div class="sammo">撤回</div> -->
            <div class="sammo" @click="showCopy">复制</div>
          </div>
        </div>
        <!-- 已发布的显示 -->
        <div class="more" v-if="action == 1">
          <span style="color: #7096e3; cursor: pointer">更多</span>
          <div class="moreArrow"></div>
          <div class="moreItems">
            <div class="sammo" @click="showStop">结束</div>
            <div class="sammo" @click="showCopy">复制</div>
          </div>
        </div>
        <!-- 已结束的显示 -->
        <div class="more" v-if="action == -1">
          <span style="color: #7096e3; cursor: pointer">更多</span>
          <div class="moreArrow"></div>
          <div class="moreItems">
            <!-- <div class="sammo">结束</div> -->
            <div class="sammo" @click="showCopy">复制</div>
          </div>
        </div>
        <div class="line"></div>
        <router-link to="/learningpath"
          ><div style="display: flex">
            <img class="img2" src="../../assets/images/leveladd/back.png" />
            <div class="return">返回</div>
          </div>
        </router-link>
      </div>
    </div>
    <div class="split"></div>
    <div class="bom clearfix">
      <a-tabs
        class="tab"
        v-model:activeKey="activeKey"
        size="large"
        @change="changeTabs"
        :tabBarStyle="{ marginLeft: '10px' }"
      >
        <a-tab-pane key="1" tab="概览">
          <div class="split"></div>
          <!-- 概览（无数据） -->
          <div :style="{ display: 'block' }">
            <div class="onerow">
              <div class="taskmain">快速创建项目详情</div>
            </div>
            <div class="second">
              <router-link :to="{ path: '/leveladddetail' }">
                <div
                  class="taskbox"
                  style="background: linear-gradient(180deg, #fef3dd, #fffaf0)"
                >
                  <div class="leftt">
                    <img src="../../assets/images/taskpage/left1.png" />
                  </div>
                  <div class="photo">
                    <img src="../../assets/images/taskpage/picture1.png" />
                  </div>
                  <div class="rightt">
                    <img src="../../assets/images/taskpage/right1.png" />
                  </div>
                  <div class="centerbox" style="color: rgba(255, 182, 78, 1)">
                    添加任务
                  </div>
                  <div class="centermain">快速添加任务/关卡</div>
                </div>
              </router-link>
              <div
                class="taskbox"
                @click="showAddStu"
                style="background: linear-gradient(180deg, #ddeaff, #f0f8fe)"
              >
                <div class="leftt">
                  <img src="../../assets/images/taskpage/left2.png" />
                </div>
                <div class="photo">
                  <img src="../../assets/images/taskpage/picture2.png" />
                </div>
                <div class="rightt">
                  <img src="../../assets/images/taskpage/right2.png" />
                </div>
                <div class="centerbox" style="color: rgba(78, 166, 255, 1)">
                  添加学员
                </div>
                <div class="centermain">快速添加学员</div>
              </div>
              <!-- 2022-12-2注释 后面放开 -->
              <!-- <div
                class="taskbox"
                @click="showPub"
                style="background: linear-gradient(180deg, #e5f6ec, #eef9f3)"
              >
                <div class="leftt">
                  <img src="../../assets/images/taskpage/left3.png" />
                </div>
                <div class="photo">
                  <img src="../../assets/images/taskpage/picture3.png" />
                </div>
                <div class="rightt">
                  <img src="../../assets/images/taskpage/right3.png" />
                </div>
                <div class="centerbox" style="color: rgba(93, 201, 136, 1)">
                  发布
                </div>
                <div class="centermain">快速发布项目</div>
              </div> -->
            </div>
          </div>
          <!-- 概览（有数据） -->
          <div :style="{ display: 'none' }">
            <div class="onerow">
              <div class="taskmain">关卡概览</div>
            </div>
            <div class="second" style="margin-top: 0">
              <div class="nubbox">
                <span class="nub1">{{
                  routerInfoOverview.totalStudentCnt
                }}</span>
                <div class="nub2">总人数</div>
              </div>
              <div class="nubbox">
                <span class="nub1" style="color: #ff90ae">{{
                  routerInfoOverview.studyStudentCnt
                }}</span>
                <div class="nub2">学习人数</div>
              </div>
              <div class="nubbox">
                <span class="nub1" style="color: #a497ff">{{
                  routerInfoOverview.completeStudentCnt
                }}</span>
                <div class="nub2">完成人数</div>
              </div>
              <div class="nubbox">
                <div>
                  <span class="nub1" style="color: #5dc988">{{
                    routerInfoOverview.onlineCourseCnt
                  }}</span
                  ><span style="color: #5dc988; font-size: 14px">%</span>
                </div>
                <div class="nub2">在线课程数</div>
              </div>
              <div class="nubbox">
                <div>
                  <span class="nub1" style="color: #ff90ae">{{
                    routerInfoOverview.offLineCourseCnt
                  }}</span
                  ><span style="color: #ff90ae; font-size: 14px">%</span>
                </div>
                <div class="nub2">面授课程数</div>
              </div>
              <div class="nubbox">
                <div>
                  <span class="nub1" style="color: #a497ff">{{
                    routerInfoOverview.completeRatio
                  }}</span
                  ><span style="color: #a497ff; font-size: 14px">%</span>
                </div>
                <div class="nub2">总完成率</div>
              </div>
            </div>
            <div class="onerow">
              <div class="taskmain">关卡信息</div>
            </div>
            <div class="stagemess">
              <div
                v-for="item in stageList"
                :class="{
                  stage1: item.stageId == choosedStageId,
                  stage2: item.stageId != choosedStageId,
                }"
                :key="item.stageId"
                @click="stageChange(item.name, item.stageId)"
              >
                关卡{{ item.stageId }}
              </div>
              <!-- <div class="stage1">阶段1</div>
              <div class="stage2">阶段2</div> -->
            </div>
            <div class="stagesecond">
              <div class="staname">关卡名称：</div>
              <div class="stamess">{{ stateName }}</div>
            </div>
            <div class="stagelast">
              <div class="stagepro">
                <a-progress
                  type="dashboard"
                  gapDegree="0"
                  :percent="chapterOverviewList.completeCourseRatio"
                  :width="140"
                />
                <div class="protext">课程完成率</div>
              </div>
              <div class="stagepro">
                <a-progress
                  type="dashboard"
                  gapDegree="0"
                  :percent="chapterOverviewList.completeExamRatio"
                  :width="140"
                />
                <div class="protext">考试通过率</div>
              </div>
              <div class="stagepro" style="margin-right: 0">
                <a-progress
                  type="dashboard"
                  gapDegree="0"
                  :percent="chapterOverviewList.completeRatio"
                  :width="140"
                />
                <div class="protext">作业完成率</div>
              </div>
              <div class="proright">
                <div class="pronub" style="margin-left: 280px">
                  {{ chapterOverviewList.totalTaskCnt }}
                </div>
                <div class="proright1">
                  <span class="textpro">关卡任务总数</span>
                  <a-progress
                    :percent="chapterOverviewList.totalTaskCnt"
                    style="width: 369px"
                  />
                </div>
                <div class="pronub" style="margin-left: 206px">
                  {{ chapterOverviewList.totalReqCnt }}
                </div>
                <div class="proright1">
                  <span class="textpro">必修课</span>
                  <a-progress
                    :percent="chapterOverviewList.totalReqCnt"
                    style="width: 369px"
                  />
                </div>
                <div class="pronub" style="margin-left: 142px">
                  {{ chapterOverviewList.totalOptCnt }}
                </div>
                <div class="proright1">
                  <span class="textpro">选修课</span>
                  <a-progress
                    :percent="chapterOverviewList.totalOptCnt"
                    style="width: 369px"
                  />
                </div>
              </div>
            </div>
          </div>
          <!-- 概览（有数据） -->
        </a-tab-pane>
        <a-tab-pane key="2" tab="路径管理">
          <div class="split"></div>
          <!-- <div class="cont">
            <div class="pad"></div>
            <div class="sametab">
              <div class="Lhead">
                <a-input
                  v-model:value="gatename"
                  style="width: 270px; height: 40px; border-radius: 8px"
                  placeholder="关卡名称"
                />
                <div class="btns">
                  <div class="btn btn1">
                    <div class="search"></div>
                    <div class="btnText">搜索</div>
                  </div>
                  <div class="btn btn2">
                    <div class="search"></div>
                    <div class="btnText">重置</div>
                  </div>
                  <router-link to="/leveladddetail">
                    <div class="btn btn3" @click="handleOut">
                      <div class="search"></div>
                      <div class="btnText">创建关卡</div>
                    </div>
                  </router-link>
                </div>
              </div>
              <div class="Lbom">
                <div>
                  <div class="create"></div>
                </div>
              </div>
            </div>
            <div class="pad"></div>
          </div> -->

          <!-- 路径管理 -->
          <div style="flex: 1">
            <div class="onerow">
              <div class="taskmain">任务大纲</div>

              <router-link to="/leveladddetail" class="editright">
                <img
                  class="editimg"
                  src="../../assets/images/leveladd/edit.png"
                />
                <span class="editextb">编辑</span>
              </router-link>
            </div>
            <!-- 无数据显示快速创建 -->
            <div v-show="!taskSyllabus.length">
              <router-link :to="{ path: '/leveladddetail' }">
                <div
                  class="taskbox"
                  style="background: linear-gradient(180deg, #fef3dd, #fffaf0)"
                >
                  <div class="leftt">
                    <img src="../../assets/images/taskpage/left1.png" />
                  </div>
                  <div class="photo">
                    <img src="../../assets/images/taskpage/picture1.png" />
                  </div>
                  <div class="rightt">
                    <img src="../../assets/images/taskpage/right1.png" />
                  </div>
                  <div class="centerbox" style="color: rgba(255, 182, 78, 1)">
                    添加关卡
                  </div>
                  <div class="centermain">快速创建关卡任务</div>
                </div>
              </router-link>
            </div>
            <!-- 无数据显示快速创建 -->

            <!-- 有数据-->
            <div class="taskSyllabus">
              <a-collapse v-model:activeKey="taskSyllabusActive" accordion>
                <template #expandIcon="{ isActive }">
                  <img
                    :style="{
                      width: isActive ? 9.1 : 8.1,
                      height: isActive ? 8.1 : 9.1,
                      'margin-right': isActive ? '12px' : '13px',
                    }"
                    :src="
                      isActive
                        ? require('../../assets/images/projectadd/open.png')
                        : require('../../assets/images/projectadd/close.png')
                    "
                  />
                  <div></div>
                </template>
                <a-collapse-panel
                  v-for="(value, index) in taskSyllabus"
                  :key="index"
                  :header="value.name"
                >
                  <div
                    class="course"
                    v-for="(item, key) in value.taskList"
                    :key="key"
                  >
                    <!-- :style="{width:item.course==='在线'?'28px':
												height:item.course==='在线'?'27px':}" -->
                    <div class="first">
                      <div class="icon">
                        <div
                          style="
                            width: 31px;
                            height: 28px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                          "
                        >
                          <img
                            :src="
                              item.type == 1
                                ? require('../../assets/images/leveladd/zai.png')
                                : item.type == 2
                                ? require('../../assets/images/leveladd/mian.png')
                                : item.type == 3
                                ? require('../../assets/images/leveladd/an.png')
                                : item.type == 4
                                ? require('../../assets/images/leveladd/zuo.png')
                                : item.type == 5
                                ? require('../../assets/images/leveladd/kao.png')
                                : item.type == 6
                                ? require('../../assets/images/leveladd/zhi.png')
                                : item.type == 7
                                ? require('../../assets/images/leveladd/wai.png')
                                : item.type == 8
                                ? require('../../assets/images/leveladd/tao.png')
                                : item.type == 9
                                ? require('../../assets/images/leveladd/huo.png')
                                : item.type == 10
                                ? require('../../assets/images/leveladd/ce.png')
                                : item.type == 11
                                ? require('../../assets/images/leveladd/pinggu.png')
                                : item.type == 12
                                ? require('../../assets/images/leveladd/tou.png')
                                : item.type == 13
                                ? require('../../assets/images/leveladd/tou.png')
                                : require('../../assets/images/leveladd/xiangmu.png')
                            "
                          />
                        </div>
                      </div>
                      <div>
                        <div class="iconame">
                          「{{ checkType(item.type) }}」
                        </div>
                        <div class="icontext">{{ item.name }}</div>
                      </div>
                    </div>
                    <div class="type">
                      <div :class="item.flag ? 'typename1' : 'typename'">
                        {{ item.flag ? "必修" : "选修" }}
                      </div>
                    </div>
                    <div class="time">
                      <div class="timetext">开始时间</div>
                      <div class="timetext">{{ item.beginTime }}</div>
                    </div>
                    <div class="progress">
                      <div class="progresstext">
                        {{ item.complete?item.complete:0 }}/{{ item.total?item.total:0 }}人
                      </div>
                      <div style="display: flex">
                        <a-progress
                          :showInfo="false"
                          :percent="item.percent"
                          strokeColor="#FFC067"
                          trailColor="rgba(253, 209, 98, 0.2)"
                        />
                        <span class="progresstext" style="margin-left: 10px"
                          >{{ item.percent?item.percent:0 }}%</span
                        >
                      </div>
                    </div>
                    <div class="operations">
                      <!-- <div
                        class="operation"
                        style="cursor: pointer"
                        :style="{
                          display: item.type === 2 ? 'flex' : 'none',
                        }"
                        @click="showFS"
                      >
                        学员
                      </div> -->
                      <!-- <div
                        class="operation"
                        style="cursor: pointer"
                        @click="showAA(item.type, item.name)"
                        :style="{
                          display:
                            item.type === 6 || item.type === 9
                              ? 'flex'
                              : 'none',
                        }"
                      >
                        考勤
                      </div> -->
                      <div
                        class="operation"
                        style="cursor: pointer"
                        @click="
                          item.type === 2
                            ? showCopyModal(item.type)
                            : item.type === 6
                            ? showzhibModal(item.type)
                            : item.type === 9
                            ? showhuodModal(item.type)
                            : null
                        "
                      >
                        二维码
                      </div>
                      <!-- <div
                        class="operation"
                        style="cursor: pointer; margin-right: 35px"
                        @click="
                          item.type === 1 ||
                          item.type === 3 ||
                          item.type === 7 ||
                          item.type === 8 ||
                          item.type === 6 ||
                          item.type === 11 ||
                          item.type === 12 ||
                          item.type === 9
                            ? showTime(item.type, item.name)
                            : item.type === 5 || item.type === 10
                            ? showTest(item.type, item.name)
                            : item.type === 2
                            ? showFace(item.type)
                            : item.type === 4
                            ? showWork(item.type)
                            : null
                        "
                      >
                        管理
                      </div> -->
                    </div>
                  </div>
                </a-collapse-panel>
              </a-collapse>
            </div>
            <!-- 有数据-->
            <div style="display: flex; height: 20px"></div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="3" tab="学员管理" force-render>
          <div class="split"></div>
          <div class="xwid">
            <div class="pad"></div>
            <div class="xin" style="overflow-x: auto">
              <div class="xhead">
                <a-input
                  v-model:value="gatenamee"
                  style="width: 270px; height: 40px; border-radius: 8px"
                  placeholder="请输入姓名"
                />
                <div class="btns" @click="searchLevel">
                  <div class="btn btn1">
                    <div class="search"></div>
                    <a-button
                      class="btnText"
                      style="
                        border: none;
                        background: none;
                        transform: translateY(-20%);
                      "
                      >搜索
                    </a-button>
                  </div>
                  <div class="btn btn2" @click="resetLevel">
                    <div class="search"></div>
                    <a-button
                      style="
                        border: none;
                        background: none;
                        transform: translateY(-20%);
                        width: 100%;
                      "
                      class="btnText"
                      >重置</a-button
                    >
                  </div>
                </div>
              </div>
              <div class="xheadb">
                <button class="addx" @click="showAddStu">添加学员</button>
                <!-- 2022-11-30注释 后面放开 -->
                <!-- <button class="addd" @click="showImpStu">导入学员</button> -->
                <div class="select">
                  <a-button
                    style="
                      border: 1px solid rgba(64, 158, 255, 1);
                      background: none;
                      width: 130px;
                      height: 40px;
                      font-size: 14px;
                      font-weight: 400;
                      color: rgba(64, 158, 255, 1);
                      margin-left: 5px;
                      border-radius: 8px;
                      cursor: pointer;
                    "
                    class="btnText"
                    @click="deleteStu()"
                    >批量删除</a-button
                  >
                  <!-- <a-select
                    style="width: 130px"
                    value="更多操作"
                    @change="handleStuChange"
                    :options="projectNameList"
                  >
                  </a-select> -->
                </div>
              </div>
              <div class="talk">
                <img class="im" src="../../assets/images/leveladd/gan.png" />
                <div class="xu">
                  <span class="yi">已选择</span>
                  <div style="width: 5px; display: inline-block"></div>
                  <span class="th">{{ selectedRowKeys.length }}</span>
                  <div style="width: 5px; display: inline-block"></div>
                  <span class="yi">项</span>
                  <span class="zon">列表选项总数：</span>
                  <span class="th">{{ tableDataTotal }}</span>
                  <span class="yi"> 条</span>
                </div>
              </div>
              <div class="tableBox" style="margin-top: 30px">
                <a-table
                  style="border: 1px solid #f2f6fe"
                  :columns="tableDataFunc()"
                  :scroll="{ x: 1500, y: 235 }"
                  :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="true"
                    showQuickJumper="true"
                    hideOnSinglePage="true"
                    :pageSize="pageSize"
                    :current="currentPage"
                    :total="tableDataTotal"
                    @change="pageChange"
                    class="pagination"
                    style="display: block"
                    v-if="tableDataTotal > 10"
                  />
                </div>
              </div>
            </div>
            <div class="pad"></div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="4" tab="设置">
          <div class="split"></div>

          <a-tabs>
            <a-tab-pane key="1" tab="基本信息">
              <div class="sametab">
                <div class="Gcon">
                  <div class="pad"></div>
                  <div class="Gin">
                    <div class="headone">
                      <div class="box"></div>
                      <div class="onetitle">关卡内容可见可学设置</div>
                      <div class="oneedi" @click="showbtn" v-show="twobtn">
                        编辑
                      </div>
                      <div v-show="twobtnn" class="twobtn">
                        <div class="btnone" @click="closebtn">取消</div>
                        <div class="btntwo" @click="closebtn">确定</div>
                      </div>
                    </div>
                    <div class="onemain clearfix">
                      <div class="checkcon">
                        <input
                          type="checkbox"
                          name="cb1"
                          value="yulan"
                          class="in"
                        />
                        <span class="yulan">预览其他关卡</span><br />
                        <div style="width: 10px; height: 4px"></div>
                        <div style="display: flex; align-items: center">
                          <span class="yulan2">学员可预览第</span>
                          <span style="color: #4ea6ff" v-show="number">1</span>
                          <a-input-number
                            v-model:value="nubvalue"
                            v-show="inputbox"
                            :controls="false"
                            :autofocus="true"
                            :min="1"
                          />
                          <span>关-第</span
                          ><span style="color: #4ea6ff" v-show="number">4</span>
                          <a-input-number
                            v-model:value="nubvalue1"
                            v-show="inputbox"
                            :controls="false"
                            :autofocus="true"
                            :min="1"
                          />
                          <span>关内容</span>
                        </div>
                      </div>
                      <div class="checkcon" style="margin-top: 20px">
                        <input
                          type="checkbox"
                          name="cb1"
                          value="xuexi"
                          class="in"
                        />
                        <span class="yulan">学习其他关卡</span><br />
                        <div style="width: 10px; height: 4px"></div>
                        <div style="display: flex; align-items: center">
                          <span class="yulan2">学员可预览第</span>
                          <span style="color: #4ea6ff" v-show="number">1</span>
                          <a-input-number
                            v-model:value="nubvalue2"
                            v-show="inputbox"
                            :controls="false"
                            :autofocus="true"
                            :min="1"
                          />
                          <span>关-第</span
                          ><span style="color: #4ea6ff" v-show="number">4</span>
                          <a-input-number
                            v-model:value="nubvalue3"
                            v-show="inputbox"
                            :controls="false"
                            :autofocus="true"
                            :min="1"
                          />
                          <span>关内容</span>
                        </div>
                      </div>
                      <br />
                    </div>
                  </div>
                </div>
              </div>
            </a-tab-pane>

            <a-tab-pane key="2" tab="共享文档">
              <div class="sametab">
                <div class="Gcon">
                  <div class="pad"></div>
                  <div class="Gin">
                    <div class="headone">
                      <div class="box"></div>
                      <div class="onetitle">上传共享文档</div>
                      <div class="oneedi">
                        <a-switch v-model:checked="docChecked"></a-switch>
                      </div>
                    </div>
                    <div class="btnbox" style="margin: 20px">
                      <a-upload
                        v-if="(docChecked==true)"
                        v-model:file-list="fileList"
                        name="file"
                        action="/manageApi/file/upload"
                        @change="handleChange"
                      >
                        <span
                          class="xkbtn"
                          style="cursor: pointer; font-size: 17px"
                          >上传</span
                        >
                        <img
                          src="@/assets/images/basicinfo/cloud.png"
                          style="cursor: pointer; width: 34px; height: 34px"
                          alt=""
                        />
                      </a-upload>
                      <div v-if="(docChecked==true)" class="btnbox" style="margin: 20px">
                        <span style="color: #999999">
                          支持：pdf.ppt.pptx.doc.docx.xls.xlsx.jpeg.png.gif.zip
                        </span>
                      </div>
                      <!-- <div
                        v-for="item in fileList"
                        :key="item.src"
                        style="margin-top: 20px"
                        class="docListStyle"
                      >
                        <img
                          src="@/assets/images/doc.png"
                          style="
                            cursor: pointer;
                            width: 30px;
                            height: 25px;
                            margin-right: 10px;
                          "
                          alt=""
                        />
                        <span style="font: oblique bolder 16px 宋体">{{
                          item.name
                        }}</span>
                        <span style="color: #4ea6ff; float: right">删除</span>
                      </div> -->
                      <div
                        v-for="item in fileList"
                        :key="item.uid"
                        class="docListStyle"
                      >
                        <img
                          src="@/assets/images/basicinfo/download.png"
                          style="
                            cursor: pointer;
                            width: 40px;
                            height: 40px;
                            margin-right: 40px;
                          "
                          alt=""
                        />
                        <span style="font: oblique bold 16px Sans-serif">{{
                          item.name
                        }}</span>
                        <span
                          style="color: #4ea6ff; float: right; cursor: pointer"
                          @click="deFile(item.uid)"
                          >删除</span
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a-tab-pane>
          </a-tabs>
        </a-tab-pane>
      </a-tabs>
      <a-modal
        style="padding: 0"
        :closable="sh"
        v-model:visible="visiblene"
        :footer="null"
        centered="true"
        wrapClassName="changeModal"
      >
        <div class="con">
          <div class="header">
            <div class="inhe">
              <div class="mod"></div>
              <div class="tz">调整关卡</div>
              <div class="mg" @click="closeChangeModal"></div>
            </div>
          </div>
          <div class="mid">
            <div class="inher">
              <div class="cur">当前关卡：关卡2</div>
              <div class="select">
                <a-select
                  v-model:value="curLevel"
                  style="width: 100%"
                  placeholder="请选择关卡"
                  :options="projectNameList4"
                  @change="selectProjectName4"
                  allowClear
                  showSearch
                ></a-select>
              </div>
              <div class="btn">
                <button class="sameb btn1">取消</button>
                <button class="sameb btn2">确定</button>
              </div>
            </div>
          </div>
        </div>
      </a-modal>

      <!-- 查看学员 传入查看学员的id-->
      <see-stu
        v-model:Seevisible="Seevisible"
        v-model:checkStuId="checkStuId"
        v-model:projectId="projectId"
      />

      <!-- 批量删除学员弹窗 -->
      <a-modal
        v-model:visible="deleteAll"
        :footer="null"
        :closable="closeDeleteAll"
        wrapClassName="CopyModal"
        centered="true"
      >
        <div class="delete">
          <div class="del_header"></div>
          <div class="del_main">
            <div class="header">
              <div class="icon"></div>
              <span>提示</span>
              <div class="close_exit" @click="closeDeleteALLModal"></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="delete_exit">确定</div>
              </div>
            </div>
          </div>
        </div>
      </a-modal>
      <!-- 面授管理二维码 -->
      <a-modal
        v-model:visible="copyModal"
        :footer="null"
        :closable="closeCopy"
        wrapClassName="facemanageModal"
        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="closeCopyModal"></div>
            </div>
            <div class="body">
              <div><img src="../../assets/images/taskpage/erweima.png" /></div>
            </div>
            <div class="footerr">
              <div class="onload">下载二维码</div>
              <div class="onloadpx">200*200</div>
              <div class="onloadpx">400*400</div>
              <div class="onloadpx">800*800</div>
            </div>
          </div>
        </div>
      </a-modal>
      <!-- 直播管理二维码 -->
      <a-modal
        v-model:visible="zhibModal"
        :footer="null"
        :closable="closeCopy"
        wrapClassName="facemanageModal"
        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="closezhibModal"></div>
            </div>
            <div class="body">
              <div><img src="../../assets/images/taskpage/erweima.png" /></div>
            </div>
            <div class="footerr">
              <div class="onload">下载二维码</div>
              <div class="onloadpx">200*200</div>
              <div class="onloadpx">400*400</div>
              <div class="onloadpx">800*800</div>
            </div>
          </div>
        </div>
      </a-modal>
      <!-- 活动管理二维码 -->
      <a-modal
        v-model:visible="huodModal"
        :footer="null"
        :closable="closeCopy"
        wrapClassName="facemanageModal"
        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="closehuodModal"></div> -->
            </div>
            <div class="body">
              <div><img src="../../assets/images/taskpage/erweima.png" /></div>
            </div>
            <div class="footerr">
              <div class="onload">下载二维码</div>
              <div class="onloadpx">200*200</div>
              <div class="onloadpx">400*400</div>
              <div class="onloadpx">800*800</div>
            </div>
          </div>
        </div>
      </a-modal>
      <!-- 添加学员抽屉 -->
      <!-- <path-add-stu v-model:Stuvisible="Stuvisible" /> -->
      <!-- 添加学员抽屉 -->
      <proj-check-ship
        v-model:ProjCheckvisible="Stuvisible"
        :selectProjectId="routerId"
        v-model:addAuthList="addAuthList"
        :authClassify="authClassify"
        classify="addstudent"
      />
      <!-- 导入学员抽屉 -->
      <imp-stu v-model:AddImpStuvisible="AddImpStuvisible" />
      <!-- 学员管理查看抽屉 -->
      <check-stu
        v-model:CheckStuvisible="CheckStuvisible"
        v-model:studentId="studentId"
      />
      <!-- 面授学员抽屉 -->
      <face-stu v-model:FSvisible="FSvisible" />
      <!-- 活动考勤抽屉 -->
      <active-attendance
        v-model:AAvisible="AAvisible"
        :title="showKaoqinText"
      />
      <!-- 时间管理抽屉 -->
      <time-manage v-model:Tvisible="visible" :title="showTimeText" />
      <!-- 考试管理抽屉 -->
      <test-manage v-model:TMvisible="TMvisible" :title="showTestText" />
      <!-- 面授管理抽屉 -->
      <face-manage v-model:Fvisible="FaceVisivle" />
      <!-- 作业管理抽屉 -->
      <work-manage v-model:Wvisible="Wvisible" />
    </div>
    <!--  加载动画 -->
    <div class="aeLoading" :style="{ display: addLoading ? 'flex' : 'none' }">
      <a-spin :spinning="addLoading" tip="添加中..." />
    </div>
    <!-- 发布弹窗 -->
    <a-modal
      v-model:visible="pub"
      :title="null"
      :footer="null"
      :closable="false"
      wrapClassName="pub"
      width="679px"
      height="437px"
    >
      <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 style="width: 15px; height: 15px"
            ><img src="../../assets/images/taskpage/pub.png"
          /></span>
          <span
            class="headerLeftText"
            style="font-size: 16px; margin-left: 10px"
            >路径发布</span
          >
        </div>
        <div style="cursor: pointer; margin-right: 32px" @click="closePub">
          <img
            style="width: 22px; height: 22px"
            src="../../assets/images/basicinfo/close22.png"
          />
        </div>
      </div>
      <div class="modalMain">
        <div class="projectname">产品经理上升路径</div>
        <!-- <div class="projecttime">
          <span class="timeti">路径时间：</span
          ><span class="timeme">2022/08/01-2022/08/30</span>
        </div> -->
        <div class="projectbox">
          <div class="promessage">
            <div class="messageme">路径信息</div>
            <div class="messagege">
              当前路径共{{ routeChapters }}个关卡，{{ routeTasks }}个任务
            </div>
          </div>
          <div class="stumessage">
            <div class="messageme1">学员信息</div>
            <div class="messagege1">路径共{{ routeStudentsNum }}名学员</div>
          </div>
        </div>
        <!-- <div class="send">
          <a-switch v-model:checked="checked" size="small" />
          <span class="sendtext">发送路径通知</span>
        </div>
        <div class="ckb">
          <a-checkbox v-model:checked="checkedTeacher"
            ><span class="sendpeo">发给老师</span></a-checkbox
          >
          <a-checkbox v-model:checked="checkStu"
            ><span class="sendpeo">发给学员</span></a-checkbox
          >
        </div> -->
        <div class="pubtn">
          <a-button class="pubtn1" @click="closePub">取消</a-button>
          <a-button class="pubtn2" @click="releaseLearnPath">发布</a-button>
        </div>
      </div>
    </a-modal>
    <!-- 撤回路径弹窗 -->
    <a-modal
      v-model:visible="backModal"
      :footer="null"
      :closable="closeBack"
      wrapClassName="CopyModal"
      centered="true"
    >
      <div class="delete">
        <div class="del_header"></div>
        <div class="del_main">
          <div class="header">
            <div class="icon"></div>
            <span>提示</span>
            <div class="close_exit" @click="closeBackModal"></div>
          </div>
          <div class="body">
            <span>是否撤回路径</span>
            <div class="back">（路径撤回后学员进度保留，发布后可继续学习）</div>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn1" @click="closeBackModal">
              <div class="btnText">取消</div>
            </div>
            <div class="del_btn btn2" @click="recallPath">
              <div class="btnText">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 复制路径弹窗 -->
    <a-modal
      v-model:visible="dcopyModal"
      :footer="null"
      :closable="dcloseCopy"
      wrapClassName="CopyModal"
      centered="true"
    >
      <div class="delete">
        <div class="del_header"></div>
        <div class="del_main">
          <div class="header">
            <div class="icon"></div>
            <span>提示</span>
            <div class="close_exit" @click="closeCopy"></div>
          </div>
          <div class="body">
            <span>您确定要复制此路径吗</span>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn1" @click="closeCopy">
              <div class="btnText">取消</div>
            </div>
            <div class="del_btn btn2" @click="sureCopy">
              <div class="btnText">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 结束路径弹窗 -->
    <a-modal
      v-model:visible="stopModal"
      :footer="null"
      :closable="dicloseStop"
      wrapClassName="CopyModal"
      centered="true"
    >
      <div class="delete">
        <div class="del_header"></div>
        <div class="del_main">
          <div class="header">
            <div class="icon"></div>
            <span>提示</span>
            <div class="close_exit" @click="closeStopModal"></div>
          </div>
          <div class="body">
            <!-- <span>您确定要停用此路径吗</span> -->
            <span>是否结束项目</span>
            <div class="back">
              （项目结束后学员将无法继续学习，此操作不可逆）
            </div>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn1" @click="closeStopModal">
              <div class="btnText">取消</div>
            </div>
            <div class="del_btn btn2" @click="stopLearnPath">
              <div class="btnText">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script>
import { ref, reactive, toRefs, onMounted, createVNode, watch } from "vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { message, Modal } from "ant-design-vue";
// import PathAddStu from "../../components/drawers/pathStuAdd";
import ProjCheckShip from "../../components/drawers/ProjCheckPower";
import ImpStu from "../../components/drawers/AddLevelImportStu";
import CheckStu from "../../components/drawers/CheckStu";
import FaceStu from "../../components/drawers/FaceStu";
import ActiveAttendance from "../../components/drawers/ActiveAttendance";
import TimeManage from "../../components/drawers/TimeManage";
import TestManage from "../../components/drawers/TestManage";
import FaceManage from "../../components/drawers/FaceManage";
import WorkManage from "../../components/drawers/WorkManage";
import SeeStu from "../../components/drawers/SeeStu";
// import { useRoute } from "vue-router";
// import { useStore } from "vuex";
import { storage } from "../../api/storage";
import { getRouterOverview } from "@/api/indexLearningPath";
import { handleLearnPath } from "../../api/index1";
import { GetRouterDetail } from "@/api/indexTask";
import * as api from "../../api/index1";
import { toDate } from "../../api/method";
import { editRoutered } from "../../api/indexLearningPath";
export default {
  name: "LevelAdd",
  components: {
    // PathAddStu,
    ProjCheckShip,
    ImpStu,
    CheckStu,
    FaceStu,
    ActiveAttendance,
    TimeManage,
    TestManage,
    FaceManage,
    WorkManage,
    SeeStu,
  },
  setup() {
    // const routers = useRoute();
    // const store = useStore();
    const state = reactive({
      routerId: storage.get("routerId")
        ? JSON.parse(storage.get("routerId"))
        : null, //学习路径页面传的学习路径id
      gatename: null, //关卡名称
      gatenamee: null, //学员管理关卡名称
      action: null,
      act: null,
      pub: false, //发布弹窗
      backModal: false, //撤回弹窗
      dcopyModal: false, //复制弹窗
      closeBack: false,
      routeStudentsNum: null,
      routeChapters: null,
      routeTasks: null,
      dcloseCopy: false,
      dicloseCopy: false,
      stopModal: false, //结束弹窗
      deleteAll: false, //批量删除学员弹窗
      Stuvisible: false, //添加学员抽屉
      AddImpStuvisible: false, //导入学员抽屉
      CheckStuvisible: false, //学员管理的查看抽屉
      addLoading: false, // 加载动画
      choosedStageId: 1, // 选择的阶段id
      selectedRowKeys: [],
      twobtn: true,
      number: true,
      twobtnn: false,
      Seevisible: false,
      checkStuId: null,
      inputbox: false,
      Wvisible: false, //作业管理
      studentId: null,
      styTitle: null,
      cretime: null,
      picUrl: null,
      remark: null,
      projectNameList: [
        // 2022-11-30注释 后面放开
        // {
        //   value: "1",
        //   label: "导出信息",
        // },
        // {
        //   value: "2",
        //   label: "批量调整关卡",
        // },
        {
          value: "3",
          label: "批量删除",
        },
      ],
      // 共享文档列表
      docList: [
        // {
        //   name: "测试文档1.doc",
        //   src: "",
        // },
        // {
        //   name: "测试文档2.doc",
        //   src: "",
        // },
        // {
        //   name: "测试文档3.doc",
        //   src: "",
        // },
      ],
      huodModal: false,
      zhibModal: false,
      //任务大纲列表
      taskSyllabus: [
        // {
        //   name: "关卡1  初级产品经理",
        //   taskList: [
        //     {
        //       course: "在线",
        //       name: "时间管理",
        //       classify: "选修",
        //       beginTime: "2022-09-10 14:03",
        //       total: 50, //总人数
        //       complete: 20, //完成人数
        //       percent: 40,
        //       routerTaskId: 0,
        //     },
        //   ],
        // },
      ],
      activeKey: ref("1"),
      value: ref(" "),
      nubvalue: ref("1"),
      nubvalue2: ref("1"),
      nubvalue3: ref("4"),
      nubvalue1: ref("4"),
      fileList: [],
      docChecked: true,
      currentPage: 1,
      tableDataTotal: -1,
      pageSize: 10,
      visiblene: false,
      sh: false,
      nodata: true,
      closeDeleteAll: false,
      curLevel: "",
      taskSyllabusActive: 0,
      //在线管理等页面传递参数
      showTimeText: "",
      //考试、测评页面传递参数
      showTestText: "",
      //直播、活动页面传递参数
      showKaoqinText: "",
      FSvisible: false, //面授学员
      AAvisible: false, //活动/直播考勤
      copyModal: false, //面授二维码弹窗
      closeCopy: false, //面授二维码关闭图标
      visible: false, //时间管理
      TMvisible: false, //考试管理
      FaceVisivle: false, //面授管理
      stateName: null, // 关卡名称
      //关卡的数据
      level: [
        // {
        //   id: 1,
        //   lev: "关卡2",
        //   name: "中级产品经理",
        //   count: 3,
        //   online: 5,
        //   homework: 1,
        //   juan: 1,
        //   ballot: 1,
        //   test: 1,
        // },
        // {
        //   id: 2,
        //   lev: "关卡2",
        //   name: "初级产品经理",
        //   count: 3,
        //   online: 5,
        //   homework: 1,
        //   juan: 1,
        //   ballot: 1,
        //   test: 1,
        // },
      ],
      tableData: [],

      authClassify: 3,
      addAuthList: [],
    });

    const levelList = reactive({
      routerInfoOverview: {
        // 路径图整体数据概览
        totalStudentCnt: 0,
        studyStudentCnt: 0,
        completeStudentCnt: 0,
        onlineCourseCnt: 0,
        offLineCourseCnt: 0,
        completeRatio: 0,
      },
      chapterOverviewList: {
        // 路径图阶段数据概览
        completeCourseRatio: 0,
        completeExamRatio: 0,
        completeRatio: 0,
        totalTaskCnt: 0,
        totalReqCnt: 0,
        totalOptCnt: 0,
      },
      stageList: [
        // 阶段列表
        {
          stageId: 1,
          name: "关卡一xx",
        },
        {
          stageId: 2,
          name: "关卡二xx",
        },
      ],
    });

    const tableDataFunc = () => {
      const columns = [
        {
          title: "姓名",
          dataIndex: "name",
          // width: "30%",
          key: "name",
          width: 110,
          align: "left",
          className: "classify",

          scopedSlots: { customRender: "action" }, //引入的插槽
          customRender: (text) => {
            // console.log(text.record.checked1);
            return (
              <div class="racona">
                <span> {text.record.name}</span>

                {/**
								<div class="img"></div>
                <a-checkbox class="ch" checked={text.record.checkedd}>
                  {text.record.lei}
                </a-checkbox>
*/}
              </div>
            );
          },
        },
        {
          title: "部门",
          dataIndex: "com",
          // width: "30%",
          key: "com",
          width: 110,
          align: "center",
          className: "h",
        },
        {
          title: "岗位",
          dataIndex: "gang",
          key: "gang",
          width: 110,
          align: "center",
          className: "h",
        },
        {
          title: "当前关卡",
          dataIndex: "cur",
          key: "cur",
          width: 110,
          align: "center",
          className: "h",
        },
        {
          title: "进度",
          dataIndex: "jin",
          key: "jin",
          width: 110,
          align: "center",
          className: "h",
        },
        {
          title: "开始时间",
          dataIndex: "time",
          key: "time",
          width: 120,
          align: "center",
          className: "h",
        },
        {
          title: "操作",
          className: "h",
          dataIndex: "opacation",
          key: "opacation",
          width: 140,
          align: "center",
          fixed: "right",
          scopedSlots: { customRender: "action" }, //引入的插槽
          customRender: (text) => {
            return (
              <div class="opa">
                <div class="opacation">
                  {/**
                  2022-11-30注释 后面放开
                  <span
                    onClick={() => {
                      showCheckStu(text.record.studentId);
                      state.Seevisible = true;
                    }}
                    style="color:#4EA6FF;margin-right:25px;cursor:pointer"
                  >
                    查看
                  </span>
                 */}
                  {/**
                    2022-11-30注释 后面放开
                  <span
                    onClick={() => {
                      state.visiblene = true;
                      console.log(text.record.cur);
                    }}
                    style="color:#4EA6FF;margin-right:25px;cursor:pointer"
                  >
                    调整
                  </span>
                 */}
                  <span
                    style="color:#4EA6FF;cursor:pointer"
                    onClick={() => {
                      delConfirm(text.record.studentId);
                    }}
                  >
                    删除
                  </span>
                </div>
              </div>
            );
          },
        },
      ];
      return columns;
    };
    const onSelectChange = (selectedRowKeys) => {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      state.selectedRowKeys = selectedRowKeys;
    };
    const showDeleteALLModal = () => {
      state.deleteAll = true;
    };
    const closeDeleteALLModal = () => {
      state.deleteAll = false;
    };
    const showModal = () => {
      state.visible = true;
    };
    const closeChangeModal = () => {
      state.visiblene = false;
    };
    const showAddStu = () => {
      state.Stuvisible = true;
    };
    const showImpStu = () => {
      state.AddImpStuvisible = true;
    };
    const showCheckStu = (id) => {
      state.CheckStuvisible = true;
      state.studentId = id;
    };
    const showbtn = () => {
      state.twobtn = false;
      state.twobtnn = true;
      state.number = false;
      state.inputbox = true;
    };
    const closebtn = () => {
      state.twobtnn = false;
      state.twobtn = true;
      state.number = true;
      state.inputbox = false;
    };
    const showCopyModal = () => {
      state.copyModal = true;
    };
    const closeCopyModal = () => {
      state.copyModal = false;
    };
    //面授学员的弹窗
    const showFS = () => {
      state.FSvisible = true;
    };
    //考勤的抽屉
    const showAA = (course) => {
      state.AAvisible = true;
      state.showKaoqinText = "【" + course + "】" + "考勤";
      console.log(state.showKaoqinText, 1111);
    };
    // 时间管理
    const showTime = (course) => {
      console.log("点击管理");
      state.visible = true;
      state.showTimeText = "【" + course + "】" + "管理";
      // console.log("state.showTimeText", state.showTimeText);
    };
    //考试管理的抽屉
    const showTest = (course, name) => {
      state.TMvisible = true;
      state.showTestText = "【" + course + "】" + name;
    };
    //新增
    const showFace = () => {
      //面授管理的抽屉
      // console.log("点击管理");
      state.FaceVisivle = true;
    };
    //作业管理的抽屉
    const showWork = () => {
      state.Wvisible = true;
    };
    const showzhibModal = () => {
      state.zhibModal = true;
    };
    const showhuodModal = () => {
      state.huodModal = true;
    };
    const closezhibModal = () => {
      state.zhibModal = false;
    };
    const closehuodModal = () => {
      state.huodModal = false;
    };
    const stageChange = (name, id) => {
      state.choosedStageId = id;
      state.stateName = name;
    };
    const changeTabs = (e) => {
      console.log("切换tabs", e, state.routerId);
      if (e == 2) {
        myGetRouterDetail();
      }
      //学员管理
      if (e == 3) {
        getStudent();
      }
    };
    //学员管理------------------------------------------------
    //获取学员列表
    const getStudent = () => {
      let obj = {
        name: state.gatenamee,
        pageNo: state.currentPage,
        pageSize: 10,
        routerId: state.routerId,
      };
      api
        .getStudent(obj)
        .then((res) => {
          console.log("获取学员列表", res);
          let data = res.data.data.rows || null;
          state.tableDataTotal = res.data.data.total;
          state.tableData = [];
          if (data.length) {
            for (let i in data) {
              let _time = new Date(data[i].beginStudyTime * 1000);
              state.tableData.push({
                key: data[i].studentId,
                com: data[i].userInfoBo.deptName,
                name: data[i].name,
                gang: data[i].userInfoBo.jobName,
                cur: data[i].currentChapterName || "0",
                jin: data[i].completeChapterCnt + "/" + data[i].totalChapterCnt,
                time: _time.toLocaleDateString(),
                studentId: data[i].studentId,
              });

              // state.tableData[i].key = i+1;
              // state.tableData[i].com = data[i].userInfoBo.deptName;
              // state.tableData[i].name = data[i].userInfoBo.userName
              // state.tableData[i].gang = data[i].userInfoBo.jobName
              // state.tableData[i].cur = data[i].currentChapterName || '0'
              // state.tableData[i].jin = data[i].completeChapterCnt+'/'+ data[i].totalChapterCnt
              // state.tableData[i].time = _time.toLocaleDateString()
            }
          }
        })
        .catch((err) => {
          console.log("获取学员列表失败", err);
        });
    };
    const checkType = (type) => {
      let typeRules = [
        "",
        "在线",
        "面授",
        "案例",
        "作业",
        "考试",
        "直播",
        "外链",
        "讨论",
        "活动",
        "测评",
        "评估",
        "投票",
      ];
      return typeRules[type];
    };

    //学员管理------------------------------------------------

    onMounted(() => {
      state.addLoading = true;
      getOverview();
      myGetRouterDetail();
      reget();
    });
    const closePub = () => {
      state.pub = false;
    };

    //确定发布
    const releaseLearnPath = () => {
      // console.log("state.releasePathId", state.releasePathId);
      let obj = {
        routerId: state.routerId,
        type: 1,
      };
      handleLearnPath(obj)
        .then((res) => {
          console.log("发布成功", res);
          message.destroy();
          message.success("发布成功");
          state.pub = false;
          state.nodata = false;
          // getLearnPath();

          reget();
        })
        .catch((err) => {
          console.log("发布失败", err);
        });
    };
    //显示发布弹窗
    const showPub = () => {
      state.pub = true;
      // state.releasePathId = routerId;
      api
        .getLearnCount(state.routerId)
        .then((res) => {
          if (res.status === 200) {
            // console.log("获取关卡、任务、学员统计数据", res.data);
            state.routeStudentsNum = res.data.students;
            state.routeChapters = res.data.chapters;
            state.routeTasks = res.data.tasks;
          }
        })
        .catch((err) => {
          console.log("err", err);
        });
    };
    //显示撤回弹窗
    const showBackModal = () => {
      state.backModal = true;
    };
    //关闭撤回弹窗
    const closeBackModal = () => {
      state.backModal = false;
    };
    //确定撤回
    const recallPath = () => {
      let obj = {
        routerId: state.routerId,
        type: 0,
      };
      api
        .handleLearnPath(obj)
        .then((res) => {
          console.log("撤回成功", res);
          message.destroy();
          message.success("撤回成功");
          state.backModal = false;
          reget();
          state.nodata = true;
        })
        .catch((err) => {
          console.log("撤回失败", err);
        });
    };
    //显示复制弹窗
    const showCopy = () => {
      state.dcopyModal = true;
    };
    //关闭复制弹窗
    const closeCopy = () => {
      state.dcopyModal = false;
    };
    //确认复制
    const sureCopy = () => {
      let obj = {
        routerId: state.routerId,
        type: 2,
      };
      api
        .handleLearnPath(obj)
        .then((res) => {
          console.log("复制成功", res);
          message.destroy();
          message.success("复制成功");
          state.dcopyModal = false;
          reget();
        })
        .catch((err) => {
          console.log("复制失败", err);
        });
    };
    const showStop = () => {
      state.stopModal = true;
    };
    //关闭结束窗口
    const closeStopModal = () => {
      state.stopModal = false;
    };
    //确认结束
    const stopLearnPath = () => {
      let obj = {
        routerId: state.routerId,
        type: -1,
      };
      api
        .handleLearnPath(obj)
        .then((res) => {
          console.log("停用成功", res);
          message.destroy();
          message.success("停用成功");
          state.stopModal = false;
          reget();
          // getLearnPath();
        })
        .catch((err) => {
          console.log("停用失败", err);
        });
    };
    const reget = () => {
      GetRouterDetail(state.routerId).then((res) => {
        // console.log("获取路径图详情", res);
        state.styTitle = res.data.data.routerInfo.name;
        state.cretime = toDate(
          res.data.data.routerInfo.createTime / 1000,
          "Y-M-D h:m"
        );
        state.picUrl = res.data.data.routerInfo.picUrl;
        state.action = res.data.data.routerInfo.status;
        state.remark = res.data.data.routerInfo.remark;
        state.act =
          state.action == 0
            ? "发布"
            : state.action == 1
            ? "撤回"
            : state.action == -1
            ? ""
            : "-";
      });
    };
    // 获取项目概览
    const getOverview = () => {
      getRouterOverview(state.routerId)
        .then((res) => {
          console.log(res)
          Object.keys(res.data.data.routerInfoOverview).forEach((item) => {
            levelList.routerInfoOverview[item] =
              res.data.data.routerInfoOverview[item] || 0;
          });
          Object.keys(res.data.data.chapterOverviewList).forEach((item) => {
            levelList.chapterOverviewList[item] =
              res.data.data.chapterOverviewList[item] || 0;
          });
          // res.data.data.routerInfoOverview.forEach((r) => {
          //   console.log(r)
          // })
          state.addLoading = false;
          console.log("项目概览--", res);
        })
        .catch((err) => {
          state.addLoading = false;
          message.error("概览获取失败");
          console.log("获取失败" + err);
        });
    };
    // 获取路径列表
    const myGetRouterDetail = () => {
      GetRouterDetail(state.routerId)
        .then((res) => {
          console.log('router-list',res)
          if (res.data.data.routerInfo.status == 1) {
            state.nodata = false;
          }
          let data = res.data.data.chapterList;
          state.taskSyllabus = data;
          // for(let i in data) {
          //   state.taskSyllabus[i].name = data[i].name
          //   if(data[i].taskList.length > 0) {
          //     for(let j in data[i].taskList) {
          //     Object.keys(data[i].taskList[j]).forEach(item => {
          //     state.taskSyllabus[i].taskList[j][item] = data[i].taskList[j][item] || 0
          // })
          //   }
          //   }
          levelList.stageList = [];
          for (let i in data) {
            if (i == 0) {
              state.stateName = data[0].name;
            }
            levelList.stageList.push({
              stageId: Number(i) + 1,
              name: data[i].name,
            });
          }
        })
        .catch((err) => {
          console.log(err);
          message.error("获取路径列表失败" + err);
        });
    };

    const handleChange = (info) => {
      if (info.file.status !== "uploading") {
        console.log(info.file, info.fileList);
        let list = state.fileList;
        let str = JSON.stringify(list);
        console.log(str);
        //要编辑路径图
        editRoutered({
          attach: str,
          name: state.styTitle,
          picUrl: state.picUrl,
          remark: state.remark,
          routerId: state.routerId,
          status: state.action,
        })
          .then((res) => {
            console.log(res);
          })
          .catch((err) => {
            console.log(err);
          });
      }

      if (info.file.status === "done") {
        message.success(`${info.file.name} 文件上传成功`);
      } else if (info.file.status === "error") {
        message.error(`${info.file.name} 文件上传失败.`);
      }
    };

    const delConfirm = (id) => {
      Modal.confirm({
        title: "是否确认删除",
        icon: createVNode(ExclamationCircleOutlined),
        content: "",
        okText: "确认",
        cancelText: "取消",
        onOk() {
          api
            .delStudent({ routerId: state.routerId, studentIds: [id] })
            .then((res) => {
              message.success("删除成功");
              getStudent();
              console.log(res);
            })
            .catch((err) => {
              message.error("删除失败" + err);
              console.log(err);
            });
        },
      });
    };
    const searchLevel = () => {
      // const result = state.tableData.filter(
      //   (item) => item.cur == state.gatenamee
      // );
      // state.tableData = result;
      state.currentPage = 1;
      getStudent();
    };
    const resetLevel = () => {
      state.gatenamee = "";
      getStudent();
    };
    const handleStuChange = (value) => {
      console.log(value);
      if (value == 2) {
        state.visiblene = true;
      }
      if (value == 3) {
        deleteStu();
      }
    };
    const deleteStu = () => {
      if (state.selectedRowKeys.length == 0) {
        message.warning("请选择成员");
        return;
      }
      let obj = {
        routerId: state.routerId,
        studentIds: state.selectedRowKeys,
      };
      api
        .delStudent(obj)
        .then((res) => {
          console.log(res);
          getStudent();
          message.success("批量删除成功");
        })
        .catch((err) => {
          message.error("批量删除失败" + err);
          console.log(err);
        });
    };
    const pageChange = (value) => {
      state.currentPage = value;
      getStudent();
    };
    const setconfig = () => {
      let obj = {
        autoJoinFlag: 0,
        deptBoList: [
          {
            deptId: 0,
            deptName: "",
          },
        ],
        preLearnFlag: 0,
        previewFlag: 0,
        routerId: 0,
        showFlag: 0,
      };
      api
        .setConfig(obj)
        .then((res) => {
          message.success("编辑成功");
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
          message.error("编辑失败");
        });
    };
    const deFile = (id) => {
      console.log(id);
      let index = state.fileList.findIndex((item) => {
        item.uid == id;
      });
      state.fileList.splice(index, 1);
      let str = JSON.stringify(state.fileList);
      //要编辑路径图
      editRoutered({
        attach: str,
        name: state.styTitle,
        picUrl: state.picUrl,
        remark: state.remark,
        routerId: state.routerId,
        status: state.action,
      })
        .then((res) => {
          console.log(res);
          message.destroy();
          return message.success("删除成功");
        })
        .catch((err) => {
          console.log(err);
          message.warning("删除失败");
        });
    };

    //添加学员
    watch(
      () => state.addAuthList,
      (res) => {
        console.log("res", res, state.addAuthList);
        let obj = {
          deptList: res[1],
          groupList: res[2],
          routerId: state.routerId,
          studentList: res[0],
        };
        console.log("obj", obj);
        api
          .addStudent(obj)
          .then((res) => {
            console.log("添加学员成功", res);
            message.success("添加学员成功");
            getStudent();
          })
          .catch((err) => {
            console.log("添加学员失败", err);
          });
      }
    );
    return {
      ...toRefs(state),
      ...toRefs(levelList),
      showDeleteALLModal,
      closeDeleteALLModal,
      tableDataFunc,
      onSelectChange,
      showModal,
      closeChangeModal,
      showAddStu,
      showImpStu,
      showCheckStu,
      showbtn, //设置-编辑
      closebtn,
      showFS,
      showAA,
      showCopyModal,
      closeCopyModal,
      showTime,
      showTest,
      showFace,
      showWork,
      showzhibModal,
      showhuodModal,
      closehuodModal,
      closezhibModal,
      changeTabs,
      checkType,
      handleChange,
      handleStuChange,
      delConfirm,
      searchLevel,
      resetLevel,
      closePub,
      releaseLearnPath,
      showPub,
      showBackModal,
      closeBackModal,
      recallPath,
      showCopy,
      closeCopy,
      sureCopy,
      closeStopModal,
      stopLearnPath,
      showStop,
      reget,
      stageChange,
      pageChange,
      setconfig,
      deFile,
      deleteStu,
    };
  },
};
</script>
<style lang="scss">
.pub {
  .ant-modal {
    .ant-modal-body {
      padding: 0;

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

      .modalMain {
        .projectname {
          color: rgba(79, 81, 86, 1);
          font-size: 14px;
          line-height: 36px;
          margin-left: 62px;
          font-weight: 500;
        }

        .projecttime {
          margin-left: 221px;

          .timeti {
            color: rgba(153, 155, 163, 1);
            font-size: 14px;
            line-height: 36px;
          }

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

        .projectbox {
          margin-top: 26px;
          display: flex;
          justify-content: center;

          .promessage {
            width: 280px;
            height: 110px;
            background: linear-gradient(
              180deg,
              rgba(254, 243, 221, 1),
              rgba(255, 250, 240, 1)
            );
            border-radius: 10px;
            margin-right: 7px;

            .messageme {
              color: rgba(255, 182, 78, 1);
              font-size: 14px;
              line-height: 36px;
              margin-top: 17px;
              margin-left: 30px;
            }

            .messagege {
              color: rgba(153, 155, 163, 1);
              font-size: 14px;
              margin-left: 30px;
            }
          }

          .stumessage {
            width: 280px;
            height: 110px;
            background: linear-gradient(
              180deg,
              rgba(221, 234, 255, 1),
              rgba(240, 248, 254, 1)
            );
            border-radius: 10px;

            .messageme1 {
              color: rgba(78, 166, 255, 1);
              font-size: 14px;
              line-height: 36px;
              margin-top: 17px;
              margin-left: 30px;
            }

            .messagege1 {
              color: rgba(153, 155, 163, 1);
              font-size: 14px;
              margin-left: 30px;
            }
          }
        }

        .send {
          margin-top: 30px;
          margin-left: 61px;

          .sendtext {
            margin-left: 11px;
            color: rgba(109, 117, 132, 1);
            font-size: 14px;
          }
        }

        .ckb {
          margin-top: 20px;
          margin-left: 62px;

          .sendpeo {
            color: rgba(109, 117, 132, 1);
            font-size: 14px;
          }

          .ant-checkbox-inner {
            border-radius: 4px;
          }
        }

        .pubtn {
          display: flex;
          justify-content: center;
          margin-top: 25px;

          //margin-bottom: 29px;
          .pubtn1 {
            width: 100px;
            height: 40px;
            margin-right: 16px;
            margin-bottom: 29px;
            border: 1px solid #409eff;
            border-radius: 4px;
            color: rgba(78, 166, 255, 1);
            font-size: 14px;
            //line-height: 36px;
            align-items: center;
            background: rgba(255, 255, 255, 1);
          }

          .pubtn2 {
            width: 100px;
            height: 40px;
            margin-bottom: 29px;
            border: 1px solid #409eff;
            border-radius: 4px;
            color: #ffffff;
            font-size: 14px;
            align-items: center;
            //line-height: 36px;
            background: #409eff;
          }
        }
      }
    }
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

            .docListStyle {
              display: flex;
              width: 300px !important;
              justify-content: space-around;
            }

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

.facemanageModal {
  .ant-modal {
    width: 532px !important;
    height: 428px !important;

    .ant-modal-content {
      width: 532px !important;
      height: 428px !important;

      .ant-modal-body {
        width: 532px !important;
        height: 428px !important;
        padding: 0 !important;

        .delete {
          z-index: 999;
          width: 532px;
          height: 428px;
          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: 68px;
            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;
              }
            }

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

              .onload {
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
              }

              .onloadpx {
                width: 80px;
                height: 32px;
                border: 1px solid rgba(56, 125, 247, 1);
                border-radius: 4px;
                color: rgba(56, 125, 247, 1);
                margin-left: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }
}

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

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

  .addhead {
    width: 100%;
    height: 130px;
    // background-color: lightgreen;
    display: flex;
    align-items: center;
    position: relative;

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

    @media screen and (max-width: 1030px) {
      .imgfor {
        margin-left: 20px;
      }
    }

    .right {
      // width: 500px;
      height: 100%;
      // background-color: red;
      position: absolute;
      right: 0;
      display: flex;
      align-items: center;

      .img1 {
        width: 24px;
        height: 24px;
        margin-right: 50px;
      }

      .line {
        height: 65%;
        width: 1px;
        background-color: #e8effa;
        margin-right: 28px;
      }

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

      .pub {
        color: #ffb64e;
        font-size: 14px;
        margin-top: 5px;
        margin-right: 30px;
        cursor: pointer;
      }

      .return {
        color: #4ea6ff;
        font-size: 14px;
        margin-top: 10px;
        margin-right: 60px;
      }

      .more {
        position: relative;
        margin-right: 30px;
        height: 30px;
        display: flex;
        align-items: center;

        .moreArrow {
          width: 13px;
          height: 7px;
          display: inline-block;
          background-image: url("../../assets/images/navtop/down.png");
          background-size: 100%;
          margin: 2px;
          margin-left: 15px;
        }

        .moreItems {
          width: 110px;
          // height: 80px;
          padding-bottom: 12px;
          display: none;
          background: #ffffff;
          box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
          // border-radius: 3px;
          border: 0px solid #dcdcdc;
          position: absolute;
          left: -48px;
          top: 30px;
          z-index: 100;
          cursor: pointer;

          .sammo {
            text-align: center;
            margin-top: 12px;
            cursor: pointer;
          }

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

        .moreItems:hover {
          display: block;
        }
      }

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

        .img1 {
          margin-right: 15px;
        }

        .img2 {
          margin-right: 10px;
        }

        .return {
          margin-right: 10px;
        }

        .pub {
          margin-right: 10px;
        }

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

      .more:hover .moreArrow {
        background-image: url("../../assets/images/navtop/up.png");
      }

      .more:hover .moreItems {
        display: block;
      }
    }
  }

  .split {
    width: 100%;
    height: 20px;
    background-color: #edf0f5;
  }

  .bom {
    .tab {
      margin-top: 10px;
      // margin-left: 10px;
    }

    .ant-tabs > .ant-tabs-nav,
    .ant-tabs > div > .ant-tabs-nav {
      margin-left: 0px !important;
      padding-left: 32px !important;
    }

    .onerow {
      //width: 100%;
      display: flex;
      height: 40px;
      position: relative;
      margin-top: 15px;
      margin-left: 38px;

      //margin-right: 38px;
      .taskmain {
        font-size: 18px;
        padding-top: 7px;
        color: #000000;
      }

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

      .editright {
        position: absolute;
        right: 38px;
        top: 0;
        width: 110px;
        height: 40px;
        background: #409eff;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;

        .editimg {
          width: 15px;
          height: 15px;
        }

        .editextb {
          color: #fff;
          margin-left: 10px;
        }
      }

      // .edit:hover {
      //   color: #ffffff;
      //   background-color: #409eff;
      //   cursor: pointer;
      //   .editimg {
      //     background-image: url("../../assets/images/projectadd/edit1.png");
      //   }
      // }
    }

    .second {
      display: flex;
      justify-content: left;
      flex-wrap: wrap;
      margin-top: 40px;
      margin-left: 20px;

      .nubbox {
        width: 253px;
        height: 116px;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #fafbfc;
        border-radius: 10px;
        margin-left: 15px;

        .nub1 {
          color: #ffb54a;
          font-size: 30px;
          font-weight: 700;
        }

        .nub2 {
          color: #6d7584;
          font-size: 14px;
        }
      }

      .taskbox {
        width: 412px;
        height: 160px;
        border-radius: 10px;
        position: relative;
        margin-left: 68px;
        margin-bottom: 40px;
        cursor: pointer;

        .leftt {
          position: absolute;
          top: 18px;
          left: 0;
        }

        .photo {
          position: absolute;
          top: 42px;
          left: 37px;
        }

        .rightt {
          position: absolute;
          top: 69px;
          right: 26px;
        }

        .centerbox {
          position: absolute;
          top: 52px;
          left: 145px;
          font-size: 20px;
          font-weight: 700;
          //line-height: 36px;
        }

        .centermain {
          color: rgba(135, 139, 146, 1);
          font-size: 14px;
          position: absolute;
          left: 144px;
          bottom: 49px;
        }
      }
    }

    .stagemess {
      display: flex;
      margin-left: 38px;

      .stage1 {
        width: 100px;
        height: 33px;
        text-align: center;
        line-height: 34px;
        border-radius: 6px;
        color: #ffffff;
        font-size: 16px;
        background: #4ea6ff;
        margin-right: 10px;
        margin-top: 19px;
        cursor: pointer;
      }

      .stage2 {
        width: 100px;
        height: 33px;
        text-align: center;
        line-height: 34px;
        border-radius: 6px;
        border: 1px solid #ebeef3;
        color: #000000;
        font-size: 16px;
        background: #ffffff;
        margin-right: 10px;
        margin-top: 19px;
        cursor: pointer;
      }
    }

    .stagesecond {
      display: flex;
      margin-left: 39px;
      margin-top: 29px;

      .staname {
        color: #999ba3;
        font-size: 14px;
      }

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

    .stagelast {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 55px;

      .stagepro {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 55px;
        margin-right: 120px;

        .ant-progress-circle-path {
          stroke: #4ea6ff;
        }

        .ant-progress-text {
          color: #4ea6ff;
          font-weight: 700;
        }

        .protext {
          color: #6d7584;
          font-size: 14px;
          margin-top: 25px;
        }
      }

      .proright {
        width: 500px;
        margin-top: 55px;
        margin-left: 50px;

        .ant-progress-bg {
          height: 24px !important;
          background: #4ea6ff;
        }

        .ant-progress-inner {
          height: 24px;
        }

        .pronub {
          color: #4ea6ff;
          font-size: 14px;
          margin: 5px 0;
        }

        .proright1 {
          display: flex;
          justify-content: right;

          .textpro {
            color: #6d7584;
            font-size: 14px;
            margin-right: 20px;
          }

          .ant-progress-text {
            color: #4ea6ff;
            font-size: 14px;
            font-weight: 700;
          }
        }
      }
    }

    .sametab {
      // margin-left: 30px;
      // margin-right: 30px;
      margin-top: 30px;
      width: 100%;

      // background-color: green;
      .Lhead {
        display: flex;

        .btns {
          display: flex;
          margin-left: 20px;

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

            .search {
              background-size: 100%;
            }

            .btnText {
              font-size: 14px;
              font-weight: 400;
              color: rgba(64, 158, 255, 1);
              line-height: 36px;
              margin-left: 5px;
            }
          }

          .btn1 {
            .search {
              width: 15px;
              height: 17px;
              background-image: url("../../assets/images/courseManage/search1.png");
            }
          }

          .btn2 {
            .search {
              width: 16px;
              height: 18px;
              background-image: url("../../assets/images/courseManage/reset1.png");
            }
          }

          .btn3 {
            margin-right: 0px;

            .search {
              width: 17px;
              height: 18px;
              background-image: url("../../assets/images/courseManage/add1.png");
            }
          }

          .btn1:hover {
            background: rgba(64, 158, 255, 1);

            .search {
              background-image: url("../../assets/images/courseManage/search0.png");
            }

            .btnText {
              color: #ffffff;
            }
          }

          .btn2:hover {
            background: rgba(64, 158, 255, 1);

            .search {
              background-image: url("../../assets/images/courseManage/reset0.png");
            }

            .btnText {
              color: #ffffff;
            }
          }

          .btn3:hover {
            background: rgba(64, 158, 255, 1);

            .search {
              background-image: url("../../assets/images/courseManage/add0.png");
            }

            .btnText {
              color: #ffffff;
            }
          }
        }
      }

      .Lbom {
        position: relative;
        margin-bottom: 20px;

        .item {
          width: 100%;
          height: 200px;
          // background-color: green;
          margin-top: 40px;
          border-radius: 8px;
          border: 1px solid #f0f4fe;

          .itemhead {
            height: 50px;
            width: 100%;
            background-color: #f0f4fe;
            display: flex;
            align-items: center;
            position: relative;

            .lev {
              margin-left: 27px;
              margin-right: 16px;
              line-height: 100%;
              color: #409eff;
              font-size: 16px;
            }

            .lin {
              width: 1px;
              height: 35%;
              background-color: #c7cbd2;
            }

            .nam {
              margin-left: 16px;
              color: #4f5156;
              line-height: 100%;
              font-size: 16px;
            }

            .count {
              position: absolute;
              line-height: 100%;
              color: #4f5156;
              font-size: 14px;
              right: 40px;

              span:nth-child(2) {
                color: #63ca8c;
              }
            }
          }

          .itembomm {
            display: flex;
            align-items: center;
            height: 150px;

            .it {
              // margin-left: 110px;
              // margin-right: 110px;
              width: 13%;
              text-align: center;

              .on {
                font-size: 30px;
              }

              .ittext {
                color: #4f5156;
                margin-top: 16px;
                margin-left: -5px;
              }
            }

            .linee {
              background-color: #ecf2fb;
              width: 1px;
              height: 55%;
            }

            .itright {
              position: absolute;
              right: 45px;
              display: flex;

              .te {
                color: #4ea6ff;
                font-size: 14px;
                cursor: pointer;
              }

              .more {
                position: relative;
                height: 30px;
                display: flex;

                .moreArrow {
                  width: 13px;
                  height: 7px;
                  display: inline-block;
                  background-image: url("../../assets/images/navtop/down.png");
                  background-size: 100%;
                  margin: 2px;
                  margin-left: 7px;
                  margin-top: 6px;
                }

                .moreItems {
                  width: 80px;
                  height: 70px;
                  display: none;
                  background: #ffffff;
                  box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
                  border-radius: 3px;
                  border: 0px solid #dcdcdc;
                  position: absolute;
                  left: 0px;
                  top: 20px;
                  z-index: 100;

                  .roleItem {
                    font-size: 14px;
                    font-weight: 400;
                    color: rgba(79, 81, 86, 1);
                    line-height: 36px;
                    display: flex;
                    justify-content: center;
                    cursor: pointer;
                  }

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

              .more:hover .moreArrow {
                background-image: url("../../assets/images/navtop/up.png");
              }

              .more:hover .moreItems {
                display: block;
              }
            }
          }

          .show {
            color: blue;
          }

          .noshow {
            display: none;
          }
        }

        .create {
          margin-top: 40px;

          .taskbox {
            width: 412px;
            height: 160px;
            border-radius: 10px;
            position: relative;
            // margin-left: 68px;
            margin-bottom: 40px;
            cursor: pointer;

            .leftt {
              position: absolute;
              top: 18px;
              left: 0;
            }

            .photo {
              position: absolute;
              top: 42px;
              left: 37px;
            }

            .rightt {
              position: absolute;
              top: 69px;
              right: 26px;
            }

            .centerbox {
              position: absolute;
              top: 52px;
              left: 145px;
              font-size: 20px;
              font-weight: 700;
              //line-height: 36px;
            }

            .centermain {
              color: rgba(135, 139, 146, 1);
              font-size: 14px;
              position: absolute;
              left: 144px;
              bottom: 49px;
            }
          }
        }
      }
    }

    .cont {
      display: flex;

      .pad {
        height: 100%;
        width: 40px;
        // background-color: red;
      }
    }

    .onerow {
      //width: 100%;
      display: flex;
      height: 40px;
      position: relative;
      margin-top: 15px;
      margin-left: 38px;

      //margin-right: 38px;
      .taskmain {
        font-size: 18px;
        padding-top: 7px;
        color: #000000;
      }

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

      .edit {
        position: absolute;
        right: 38px;
        top: 0;
        color: #409eff;
        width: 100px;
        height: 40px;
        border: 1px solid #409eff;
        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: #409eff;
        cursor: pointer;

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

    .taskbox {
      width: 412px;
      height: 160px;
      border-radius: 10px;
      position: relative;
      margin-left: 40px;
      margin-bottom: 10px;
      margin-top: 10px;
      cursor: pointer;

      .leftt {
        position: absolute;
        top: 18px;
        left: 0;
      }

      .photo {
        position: absolute;
        top: 42px;
        left: 37px;
      }

      .rightt {
        position: absolute;
        top: 69px;
        right: 26px;
      }

      .centerbox {
        position: absolute;
        top: 52px;
        left: 145px;
        font-size: 20px;
        font-weight: 700;
        //line-height: 36px;
      }

      .centermain {
        color: rgba(135, 139, 146, 1);
        font-size: 14px;
        position: absolute;
        left: 144px;
        bottom: 49px;
      }
    }

    .taskSyllabus {
      // flex: 1;
      overflow-x: auto;

      .ant-collapse {
        border: 0px;
        background-color: rgba(255, 255, 255, 0);
        min-width: 1040px;
      }

      .ant-collapse-content > .ant-collapse-content-box {
        padding-top: 0px;
        padding-bottom: 0px;
      }

      .ant-collapse > .ant-collapse-item {
        border: 0px;
      }

      .ant-collapse-header {
        display: flex;
        height: 49px;
        background-color: #eff4fc;
        align-items: center;
        margin-top: 20px;
        margin-left: 38px;
        margin-right: 40px;
        font-size: 16px;
        font-weight: 400;
        color: #409eff;
        line-height: 36px;

        .ant-collapse-arrow {
          margin-left: 15px !important;
        }
      }

      .ant-collapse-content {
        border-top: 0px;
      }
    }

    .course {
      //width: 100%;
      flex-shrink: 0;
      margin-right: 24px;

      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding: 25px 0px;
      margin-left: 22px;

      //margin: 0 12px;
      border: 1px solid #f2f6fc;
      border-top: 0px;

      .first {
        //position: relative;
        display: flex;
        flex-grow: 1;
        align-items: center;
        //height: 71px;
        margin-left: 12px;
        margin-right: 50px;

        .iconame {
          //position: absolute;
          color: #4f5156;
          font-size: 16px;
          margin-left: 4px;
        }

        .icontext {
          //positipn: absolute;
          color: #999ba3;
          font-size: 14px;
          margin-left: 12px;
          width: 83px;
        }
      }

      .type {
        //height: 71px;
        display: flex;
        flex-grow: 1;
        align-items: center;
        margin-right: 50px;

        .typename {
          width: 63px;
          height: 23px;
          color: #5dc988;
          font-size: 14px;
          background-color: #f2f6fc;
          border-radius: 4px;
          text-align: center;
        }

        .typename1 {
          width: 63px;
          height: 23px;
          color: #f0f4fe;
          font-size: 14px;
          background-color: #5dc988;
          border-radius: 4px;
          text-align: center;
        }
      }

      .time {
        //height: 71px;
        flex-grow: 1;
        margin-right: 50px;

        .timetext {
          font-size: 14px;
          color: #999ba3;
        }
      }

      .progress {
        width: 168px;
        margin-left: 10px;
        margin-right: 50px;
        flex-grow: 1;

        .progresstext {
          color: #ffc067;
          font-size: 14px;
        }
      }

      .operations {
        display: flex;
        width: 200px;

        //flex-grow: 1;
        .operation {
          color: #4ea6ff;
          font-size: 14px;
          padding: 10px;
          margin-left: auto;
        }
      }
    }

    .xwid {
      // width: 100%;
      // height: 100%;
      // background-color: #bfa;
      position: relative;
      margin-top: 30px;
      display: flex;
      margin-bottom: 20px;

      // overflow-x: auto;
      .pad {
        height: 100%;
        width: 40px;
        flex-shrink: 0;
      }

      .xin {
        width: 100%;

        .xhead {
          display: flex;

          .btns {
            display: flex;
            margin-left: 20px;

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

              .search {
                background-size: 100%;
              }

              .btnText {
                font-size: 14px;
                font-weight: 400;
                color: rgba(64, 158, 255, 1);
                line-height: 36px;
                margin-left: 5px;
              }
            }

            .btn1 {
              .search {
                width: 15px;
                height: 17px;
                background-image: url("../../assets/images/courseManage/search1.png");
              }
            }

            .btn2 {
              .search {
                width: 16px;
                height: 18px;
                background-image: url("../../assets/images/courseManage/reset1.png");
              }
            }

            .btn3 {
              margin-right: 0px;

              .search {
                width: 17px;
                height: 18px;
                background-image: url("../../assets/images/courseManage/add1.png");
              }
            }

            .btn1:hover {
              background: rgba(64, 158, 255, 1);

              .search {
                background-image: url("../../assets/images/courseManage/search0.png");
              }

              .btnText {
                color: #ffffff;
              }
            }

            .btn2:hover {
              background: rgba(64, 158, 255, 1);

              .search {
                background-image: url("../../assets/images/courseManage/reset0.png");
              }

              .btnText {
                color: #ffffff;
              }
            }

            .btn3:hover {
              background: rgba(64, 158, 255, 1);

              .search {
                background-image: url("../../assets/images/courseManage/add0.png");
              }

              .btnText {
                color: #ffffff;
              }
            }
          }
        }

        .xheadb {
          display: flex;
          margin-top: 30px;

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

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

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

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

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

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

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

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

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

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

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

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

        .tableBox {
          margin-bottom: 80px;

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

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

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

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

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

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

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

    .Gcon {
      display: flex;

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

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

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

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

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

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

          .twobtn {
            display: flex;

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

            .btntwo {
              width: 42px;
              height: 24px;
              border: 1px solid rgba(64, 158, 255, 1);
              border-radius: 4px;
              color: #ffffff;
              margin-left: 20px;
              background: #409eff;
              cursor: pointer;
            }
          }
        }
        .btnbox {
          .ant-upload-list {
            display: none !important;
          }
        }

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

          .checkcon {
            position: relative;

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

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

            .yulan2 {
              margin-left: 22px;
            }

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

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

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

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

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

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

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

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

          .choo {
            display: none;
          }

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

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

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

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

              .chose {
                position: relative;

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

                .sh {
                  margin-left: 23px;
                  color: #6f6f6f;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
