<!-- eslint-disable vue/valid-v-model -->
<!-- eslint-disable vue/no-parsing-error -->
<!-- 任务页面 -->
<template>
  <div class="taskpage">
    <div class="addhead" style="flex-shrink: 0">
      <div class="leftimg">
        <img class="img" :src="picUrl" />
      </div>
      <div class="imgfor">
        <div class="forz">{{ name }}</div>
        <div class="fort">项目经理：{{ manager }}</div>
        <div class="fort">起止时间：{{ startTime }}至{{ endTime }}</div>
      </div>
      <div class="right">
        <!-- 2022-12-10注释 后面放开 -->
        <img
          class="img1"
          src="../../assets/images/leveladd/ma.png"
          @click="showCodeModel2()"
          v-if="action == 3"
        />
        <div class="line" v-if="action == 3"></div>
        <!-- 显示发布图标 -->
        <img
          v-if="action == 2 && checkPer(permissions)"
          class="img2"
          src="../../assets/images/leveladd/pub.png"
        />
        <!-- 显示撤回发布图标 -->
        <img
          v-if="action == 3 && checkPer(permissions)"
          class="img2"
          src="../../assets/images/project/finish.png"
        />
        <!-- 显示审核图标 -->
        <img
          v-if="(action == 0 || action == -2) && checkPer(permissions)"
          class="img2"
          src="../../assets/images/project/reviewsubmit.png"
        />
        <!-- 显示撤回审核图标 -->
        <img
          v-if="action == 1 && checkPer(permissions)"
          class="img2"
          src="../../assets/images/project/reviewrecall.png"
        />
        <!-- <div class="pub">发布</div> -->
        <!-- 显示提交审核 -->
        <div
          class="pub"
          style="width: 56px; color: #a497ff"
          v-if="(action == 0 || action == -2) && checkPer(permissions)"
          @click="submitExamine"
        >
          {{ act }}
        </div>
        <!-- 显示撤回审核 -->
        <div
          class="pub"
          style="width: 56px; color: #a497ff"
          v-if="action == 1 && checkPer(permissions)"
          @click="showRecallReviewModal"
        >
          {{ act }}
        </div>
        <!-- 显示发布 -->
        <div
          class="pub"
          style="width: 28px"
          v-if="action == 2 && checkPer(permissions)"
          @click="showProjectPub"
        >
          {{ act }}
        </div>
        <!-- 显示撤回发布 -->
        <div
          class="pub"
          style="width: 56px; color: #57c887"
          v-if="action == 3 && checkPer(permissions)"
          @click="showBackModal"
        >
          {{ act }}
        </div>
        <!-- 项目提交审核弹窗 -->
        <a-modal
          v-model:visible="reviewModal"
          :footer="null"
          :closable="false"
          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="closeReviewModal"></div>
              </div>
              <div class="body">
                <span>您确定要提交审核吗</span>
                <div class="back"></div>
              </div>
              <div class="del_btnbox">
                <div class="del_btn btn1" @click="closeReviewModal">
                  <div class="btnText">取消</div>
                </div>
                <div class="del_btn btn2" @click="submitReviewProject">
                  <div class="btnText">确定</div>
                </div>
              </div>
            </div>
          </div>
        </a-modal>
        <!-- 已结束的显示 -->
        <!-- <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">
          <span style="color: #7096e3; cursor: pointer">更多</span>
          <div class="moreArrow"></div>
          <div class="moreItems">
            <div class="sammo">撤回</div>
                  <div class="sammo">复制</div>
          </div>
        </div> -->
        <!-- 草稿/未发布的显示
        <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="showStartModal">存为模板</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="showStopModal">结束</div>
            <div class="sammo">复制</div>
                  <div class="sammo" @click="showStartModal">存为模板</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">复制</div>
              <div class="sammo" @click="showStartModal">存为模板</div>
            </div>
          </div> -->
        <div class="line"></div>
        <router-link to="/projectmanage">
          <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" style="flex-shrink: 0"></div>
    <div class="content">
      <a-tabs
        class="tab"
        v-model:activeKey="activeKey"
        size="large"
        :tabBarStyle="{ marginLeft: '10px', marginTop: '5px' }"
        @change="tabsChange"
      >
        <a-tab-pane key="1" tab="概览">
          <div class="split"></div>
          <!-- 概览（无数据） -->
          <div v-if="!hasTask">
            <div class="onerow">
              <div class="taskmain">快速创建项目详情</div>
            </div>
            <div v-if="checkPer(permissions)" class="second">
              <!-- @click="totask" -->
              <div
                class="taskbox"
                @click="
                  () => {
                    routered.push({
                      path: `/taskadd`,
                      query: { projectId: projectId },
                    });
                  }
                "
                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>
              <div
                class="taskbox"
                @click="tostudent"
                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="showModal"
                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 v-if="hasTask">
            <div class="onerow">
              <div class="taskmain">项目概览</div>
              <a-popover title="项目信息">
                <template #content>
                  <div class="setc_name"><span>项目名称：</span></div>
                  <div class="setc_main">
                    <span style="color: #999999">{{ name }}</span>
                  </div>
                  <div class="setc_name"><span>项目说明：</span></div>
                  <div class="setc_main" style="width: 400px">
                    <div
                      style="
                        width: 400px;
                        color: #999999;
                        word-wrap: break-word;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        display: -webkit-box;
                        -webkit-line-clamp: 6;
                        -webkit-box-orient: vertical;
                      "
                      :title="remark"
                    >
                      {{ remark }}
                    </div>
                  </div>
                </template>
                <div
                  style="
                    display: flex;
                    justify-content: flex-start;
                    margin-left: 10px;
                    padding: 6px;
                  "
                >
                  <div
                    class="script"
                    style="border: 1px solid #40a9ff; padding: 2px"
                  >
                    <span style="font-size: 16px; color: #40a9ff"
                      >项目说明</span
                    >
                  </div>
                </div>
              </a-popover>
            </div>
            <div class="second" style="margin-top: 0">
              <div class="nubbox">
                <span class="nub1">{{
                  projectInfoOverview.totalStudentCnt
                }}</span>
                <div class="nub2">总人数</div>
              </div>
              <div class="nubbox">
                <span class="nub1" style="color: #ff90ae">{{
                  projectInfoOverview.studyStudentCnt
                }}</span>
                <div class="nub2">学习人数</div>
              </div>
              <div class="nubbox">
                <span class="nub1" style="color: #a497ff">{{
                  projectInfoOverview.completeStudentCnt
                }}</span>
                <div class="nub2">完成人数</div>
              </div>
              <div class="nubbox">
                <div>
                  <span class="nub1" style="color: #5dc988">{{
                    projectInfoOverview.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">{{
                    projectInfoOverview.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">{{
                    projectInfoOverview.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 class="stage1">阶段1</div>
                    <div class="stage2">阶段2</div>
                  </div> -->
            <div class="stagemess">
              <div
                v-for="(item, index) in stageList"
                :class="{
                  stage1: index === choosedStageIndex,
                  stage2: index !== choosedStageIndex,
                }"
                :key="item.stageId"
                @click="stageChange(item, index)"
              >
                <div v-if="item.id === '0'">无阶段</div>
                <div v-else>{{ "阶段" + (index + 1) }}</div>
              </div>
              <!-- <div class="stage1">阶段1</div>
                    <div class="stage2">阶段2</div> -->
            </div>
            <div class="stagesecond" v-if="choosedStageName">
              <div class="staname">阶段名称：</div>
              <div class="stamess">{{ choosedStageName }}</div>
            </div>
            <div class="stagelast">
              <div class="stagepro">
                <a-progress
                  type="dashboard"
                  gapDegree="0"
                  :percent="
                    stageOverviewList[choosedStageIndex]?.completeCourseRatio
                  "
                  :width="140"
                />
                <div class="protext">课程完成率</div>
              </div>
              <div class="stagepro">
                <a-progress
                  type="dashboard"
                  gapDegree="0"
                  :percent="
                    stageOverviewList[choosedStageIndex]?.completeExamRatio
                  "
                  :width="140"
                />
                <div class="protext">考试通过率</div>
              </div>
              <div class="stagepro" style="margin-right: 0">
                <a-progress
                  type="dashboard"
                  gapDegree="0"
                  :percent="stageOverviewList[choosedStageIndex]?.completeRatio"
                  :width="140"
                />
                <div class="protext">作业完成率</div>
              </div>
              <div class="proright">
                <div class="pronub" style="margin-left: 142px">
                  {{ stageOverviewList[choosedStageIndex]?.totalTaskCnt }}
                </div>
                <div class="proright1">
                  <span class="textpro">阶段任务总数</span>
                  <a-progress
                    :percent="
                      stageOverviewList[choosedStageIndex]?.totalTaskCnt
                    "
                    style="width: 369px"
                  />
                </div>
                <div class="pronub" style="margin-left: 142px">
                  {{ stageOverviewList[choosedStageIndex]?.totalReqCnt }}
                </div>
                <div class="proright1">
                  <span class="textpro">必修课</span>
                  <a-progress
                    :percent="stageOverviewList[choosedStageIndex]?.totalReqCnt"
                    style="width: 369px"
                  />
                </div>
                <div class="pronub" style="margin-left: 142px">
                  {{ stageOverviewList[choosedStageIndex]?.totalOptCnt }}
                </div>
                <div class="proright1">
                  <span class="textpro">选修课</span>
                  <a-progress
                    :percent="stageOverviewList[choosedStageIndex]?.totalOptCnt"
                    style="width: 369px"
                  />
                </div>
              </div>
            </div>
          </div>
          <!-- 概览（有数据） -->
        </a-tab-pane>
        <a-tab-pane key="2" tab="任务" force-render>
          <div style="flex: 1">
            <div class="split"></div>
            <div class="onerow">
              <div class="taskmain">任务大纲</div>
              <!-- <ImpoterGroupLeader
                title="批量面授报名"
                :data="{ targetId: projectId, type: 1 }"
                :url="`/admin/offcourse/importCourse`"
                :template-url="`/admin/project/exportTaskCoursePlan/${projectId}?type=1&taskType=2&thirdType=3`"
              >
                <button class="btn">批量面授报名</button>
              </ImpoterGroupLeader> -->
              <router-link
                v-if="checkPer(permissions)"
                :to="{ path: `/taskadd`, query: { projectId: projectId } }"
              >
                <button class="edit">
                  <img
                    class="editimg"
                    src="../../assets/images/projectadd/edit1.png"
                  />
                  <span class="editext">编辑</span>
                </button>
              </router-link>
            </div>
            <!-- <div class="taskSyllabus">
            <a-collapse v-model:activeKey="taskSyllabusActive" accordion>
              <template #expandIcon="{ isActive }">
                <img
                  class="editimg"
                  src="../../assets/images/projectadd/edit.png"
                />
                      <span class="editext">编辑</span>
                    </router-link>
                  </div> -->
            <div
              class="taskSyllabus"
              v-if="
                taskSyllabus &&
                taskSyllabus.length &&
                (taskSyllabus.length > 1 || taskSyllabus[0].name)
              "
            >
              <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>
                <template v-for="(value, index) in taskSyllabus">
                  <a-collapse-panel
                    :key="index"
                    v-if="value.name"
                    :header="value.name"
                  >
                    <div
                      class="course"
                      v-for="(item, key) in value.taskList"
                      :key="key"
                    >
                      <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 == true ? 'typename1' : 'typename'"
                        >
                          <span v-if="item.flag">必修</span>
                          <span v-else>选修</span>
                        </div>
                      </div>
                      <div class="time">
                        <div class="timetext">开始时间</div>
                        <div class="timetext">
                          {{ item.startTime !== null ? item.startTime : "-" }}
                        </div>
                      </div>
                      <div class="progress">
                        <div class="progresstext">
                          {{ item.finishStuCnt || 0 }}/{{
                            item.totalStuCnt || 0
                          }}人
                        </div>
                        <div style="display: flex">
                          <a-progress
                            :showInfo="false"
                            :percent="
                              parseInt(
                                (item.finishStuCnt / item.totalStuCnt) * 100
                              )
                            "
                            strokeColor="#FFC067"
                            trailColor="rgba(253, 209, 98, 0.2)"
                          />
                          <span class="progresstext" style="margin-left: 10px"
                            >{{
                              parseInt(
                                (item.finishStuCnt / item.totalStuCnt) * 100
                              ) || 0
                            }}%</span
                          >
                        </div>
                      </div>
                      <div v-if="checkPer(permissions)" class="operations">
                        <div
                          class="operation"
                          style="cursor: pointer"
                          @click="showFS(item)"
                          v-if="item.type == 2"
                        >
                          学员
                        </div>
                        <div
                          class="operation"
                          style="cursor: pointer"
                          @click="showAA(item.type, item.name, item)"
                          v-if="item.type == 6 || item.type == 9"
                        >
                          考勤
                        </div>
                        <div
                          class="operation"
                          v-if="
                            item.type != 2 && item.type != 6 && item.type != 9
                          "
                        ></div>
                        <div
                          class="operation"
                          style="cursor: pointer"
                          @click="showCodeModel(item)"
                        >
                          二维码
                        </div>
                        <div
                          class="operation"
                          style="cursor: pointer; margin-right: 10px"
                          @click="
                            item.type == '1' ||
                            item.type == '3' ||
                            item.type == '6' ||
                            item.type == '7' ||
                            item.type == '8' ||
                            item.type == '9' ||
                            item.type == '11'
                              ? showOnline(
                                  item.name,
                                  item.projectTaskId,
                                  item.type,
                                  item,
                                  value.name
                                )
                              : item.type == '2'
                              ? showFace(item.name, item.projectTaskId, item)
                              : item.type == '4'
                              ? showWork(item.name, item.projectTaskId, item)
                              : item.type == '5'
                              ? showTest(item.name, item.projectTaskId, item)
                              : item.type == '10'
                              ? showEval(
                                  item.name,
                                  item.projectTaskId,
                                  item.type,
                                  item
                                )
                              : item.type == '12'
                              ? showVote(item.name, item.projectTaskId, item)
                              : item.type == '13'
                              ? showWork(item.name, item.projectTaskId)
                              : null
                          "
                        >
                          管理
                        </div>
                      </div>
                    </div>
                  </a-collapse-panel>
                </template>
              </a-collapse>
              <!-- 无数据创建任务  v-if="taskSyllabus.length == 0"-->
              <router-link
                :to="{ path: `/taskadd`, query: { projectId: projectId } }"
                class="taskbox"
                style="
                  background: linear-gradient(180deg, #ddeaff, #f0f8fe);
                  display: block;
                "
                v-if="taskSyllabus.length == 0"
              >
                <div class="leftt">
                  <img src="../../assets/images/taskpage/left2.png" />
                </div>
                <div class="photo">
                  <img src="../../assets/images/taskpage/picture8.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>
              </router-link>
              <!-- 无数据创建任务 -->
            </div>
            <div v-else-if="checkPer(permissions)">
              <div
                class="taskbox"
                @click="
                  () => {
                    routered.push({
                      path: `/taskadd`,
                      query: { projectId: projectId },
                    });
                  }
                "
                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>
            </div>
            <div style="display: flex; height: 20px"></div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="3" tab="学员">
          <div class="split"></div>
          <div class="content3">
            <a-tabs v-model:activeKey="activeKey1">
              <a-tab-pane key="8" tab="学员管理">
                <TableStudent
                  :permissions="permissions"
                  :type="1"
                  :id="projectId"
                  :activeKey1="activeKey1"
                  :columns="stuColumns"
                  :stage="stage"
                  :visable="tabFlag"
                  :groupList="groupList"
                >
                  <template #extension="{ data: { record } }">
                    <a-button @click="showStudent(record)" type="link"
                      >查看
                    </a-button>
                    <a-button
                      @click="settingTopFlag(record)"
                      v-if="checkPer(permissions)"
                      type="link"
                      >{{ record.topFlag ? "取消优秀" : "优秀学员" }}
                    </a-button>
                    <a-button
                      type="link"
                      v-if="checkPer(permissions)"
                      :disabled="record.isLeader === '1'"
                      @click="showChangeGroupModal(record)"
                      >换组
                    </a-button>
                  </template>
                </TableStudent>
              </a-tab-pane>
              <a-tab-pane key="9" tab="小组管理" force-render>
                <div class="group">
                  <div class="groupleft">
                    <div class="groupname">小组名称：</div>
                    <a-input
                      v-model:value="valuestugn"
                      placeholder="请输入小组名称"
                    />
                  </div>
                  <div class="groupright">
                    <div class="btn1" @click="searchGroup">
                      <img src="../../assets/images/courseManage/search0.png" />
                      <span class="btn1text">搜索</span>
                    </div>
                    <div class="btn2" @click="resetGroupName">
                      <img src="../../assets/images/courseManage/reset1.png" />
                      <span class="btn2text">重置</span>
                    </div>
                  </div>
                </div>
                <div class="second2" v-if="checkPer(permissions)">
                  <div class="btn1" @click="showModal2()">
                    <img src="../../assets/images/courseManage/add0.png" />
                    <span class="btn1text">创建小组</span>
                  </div>
                  <div class="btn2" @click="showSubset">
                    <img src="../../assets/images/courseManage/reset2.png" />
                    <span class="btn2text">随机分组</span>
                  </div>
                  <div class="btn2" @click="exportGroup">
                    <span class="btn2text">导出小组</span>
                  </div>
                  <ImpoterGroupLeader
                    :data="{ targetId: projectId, type: 1 }"
                    :url="`/admin/studentGroup/importGroup`"
                    :template-url="`/admin/studentGroup/exportGroup/${projectId}`"
                  >
                    <div class="btn2">
                      <span class="btn2text">导入小组长</span>
                    </div>
                  </ImpoterGroupLeader>
                </div>
                <!-- 小组列表  -->
                <div class="groupmain">
                  <div
                    class="groupbox"
                    v-for="item in groupPageList"
                    :key="item.projectGroupId"
                  >
                    <div style="width: 90%">
                      <div class="grouptitle">
                        <div class="goodgruop">{{ item.groupName }}</div>
                        <div class="more">
                          <span
                            style="color: rgba(0, 0, 0, 0.45); cursor: pointer"
                            >. . .</span
                          >
                          <div class="moreItems" v-if="checkPer(permissions)">
                            <div class="sammo" @click="showModal2(item, true)">
                              编辑
                            </div>
                            <div class="sammo" @click="deleteGroupBtn(item.id)">
                              删除
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="leader">组长：{{ item.leaderName }}</div>
                      <div class="grocenter">
                        <div class="leader1">进度</div>
                        <a-progress
                          :percent="(item.completeRatio || 0) * 100"
                        />
                      </div>
                      <div
                        class="grofooter"
                        @click="
                          showMemberList(
                            item.id,
                            item.groupName,
                            item.groupMemberCount
                          )
                        "
                      >
                        <div class="ftext">组员名单 ></div>
                        <!-- <div class="peoples">
                          <div class="people1">
                            <img
                              src="../../assets/images/taskpage/people1.png"
                            />
                          </div>
                          <div class="people2">
                            <img
                              src="../../assets/images/taskpage/people2.png"
                            />
                          </div>
                          <div class="people3">
                            <img
                              src="../../assets/images/taskpage/people3.png"
                            />
                          </div>
                          <div class="people4">
                            <img
                              src="../../assets/images/taskpage/people4.png"
                                  />
                                </div>
                              </div> -->
                      </div>
                    </div>
                  </div>
                </div>
              </a-tab-pane>
            </a-tabs>
          </div>
        </a-tab-pane>
        <a-tab-pane key="4" tab="公告">
          <div class="split"></div>
          <a-tabs v-model:activeKey="activeKeyNotice">
            <a-tab-pane key="11" tab="公告">
              <NoticePub
                :permissions="permissions"
                v-model:projectId="projectId"
              ></NoticePub>
            </a-tab-pane>
            <a-tab-pane key="12" tab="历史公告" force-render>
              <NoticeHis
                v-model:projectId="projectId"
                :show="activeKeyNotice"
              ></NoticeHis>
            </a-tab-pane>
          </a-tabs>
        </a-tab-pane>
        <a-tab-pane key="5" tab="项目积分">
          <ProjectScore
            v-if="activeKey == '5'"
            :permissions="permissions"
            :projectId="projectId"
          ></ProjectScore>
        </a-tab-pane>
        <a-tab-pane key="6" tab="排行榜">
          <div class="split"></div>
          <div class="content6">
            <div class="title">排行榜</div>
            <div class="line"></div>
            <div class="search">
              <div class="left">
                <div class="time">
                  <div class="text">选择时间：</div>
                  <a-range-picker
                    v-model:value="valueDate"
                    style="border-radius: 8px; height: 40px; margin-left: 5px"
                    :placeholder="['      开始时间', '        结束时间']"
                    @change="rankTimeChange"
                  />
                </div>
              </div>
              <div class="right">
                <div
                  class="btn btn1"
                  @click="rankSearch"
                  style="cursor: pointer"
                >
                  <div class="img1"></div>
                  <div class="te">搜索</div>
                </div>
                <div
                  class="btn btn2"
                  @click="rankReset"
                  style="cursor: pointer"
                >
                  <div class="img2"></div>
                  <div class="te">重置</div>
                </div>
              </div>
            </div>
            <div class="main">
              <div class="rank">
                <div class="rankhead">
                  <div class="inhead">
                    <div class="left">进度排行 Top10</div>
                    <div class="icon"></div>
                    <div class="right">
                      <a-select
                        v-model:value="valuestu1"
                        @change="jdSelectChange"
                        style="width: 80px; margin-right: 16px"
                        :options="rankjindu"
                      >
                      </a-select>
                      <a-select
                        v-model:value="valuestu2"
                        @change="jdSelectChange1"
                        style="width: 112px"
                        :options="rankjieduan"
                      ></a-select>
                    </div>
                  </div>
                </div>
                <div class="tab">
                  <a-table
                    :columns="jindutablecolumns"
                    :data-source="jindutabledata"
                    :loading="processRankLoading"
                    expandRowByClick="true"
                    :scroll="{ y: 330 }"
                    @expand="expandTable"
                    :pagination="false"
                  />
                </div>
              </div>
              <div class="rank">
                <div class="rankhead">
                  <div class="inhead">
                    <div class="left">积分排行 Top10</div>
                    <div class="right">
                      <a-select
                        v-model:value="valuestu3"
                        style="width: 80px"
                        @change="jfSelectChange"
                        :options="rankxuefen"
                      ></a-select>
                    </div>
                  </div>
                </div>
                <div class="tab">
                  <a-table
                    :columns="xuefentablecolumns"
                    :data-source="xuefentabledata"
                    :loading="scoreRankLoading"
                    expandRowByClick="true"
                    :scroll="{ y: 330 }"
                    @expand="expandTable"
                    :pagination="false"
                  />
                </div>
              </div>
              <div class="rank">
                <div class="rankhead">
                  <div class="inhead">
                    <div class="left">学时排行 Top10</div>
                    <div class="right">
                      <a-select
                        v-model:value="valuestu4"
                        @change="xsSelectChange"
                        style="width: 80px"
                        :options="rankxueshi"
                      ></a-select>
                    </div>
                  </div>
                </div>
                <div class="tab">
                  <a-table
                    :columns="xueshitablecolumns"
                    :data-source="xueshitabledata"
                    :loading="studytimeRankLoading"
                    expandRowByClick="true"
                    :scroll="{ y: 330 }"
                    @expand="expandTable"
                    :pagination="false"
                  />
                </div>
              </div>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="7" tab="证书">
          <div class="split"></div>
          <div v-if="!ischeckCertificate">
            <!-- 没有证书显示的页面 -->
            <div
              v-if="3 > 7"
              style="
                display: flex;
                justify-content: center;
                align-items: center;
                height: 600px;
                flex-direction: column;
              "
            >
              <div class="certificate" @click="addCertificate">
                <img
                  style="width: 68px; height: 79px"
                  src="../../assets/images/taskpage/nocertificate2.png"
                />
                <div style="font-size: 20px; color: #409eff; margin-top: 16px">
                  无证书
                </div>
                <div style="font-size: 14px; color: #878b92">
                  请点击新建证书
                </div>
              </div>
            </div>
            <!-- 有证书显示的页面 -->
            <div v-else class="certificate1">
              <div
                class="addcertificate1"
                @click="addCertificate"
                v-if="checkPer(permissions)"
              >
                <div class="addcertext">+添加证书</div>
              </div>
              <div
                class="certificatelist"
                v-for="(item, index) in certificatelist"
                :key="index"
              >
                <div class="certificatelistMain">
                  <img
                    @click="previewPic"
                    style="cursor: pointer; width: 140px; height: 200px"
                    :src="item.url"
                    alt=""
                    srcset=""
                  />
                  <div class="cergetrules">
                    <div class="cergetrulesText">获取规则</div>
                    <div class="cergetrulesMain">
                      {{
                        item.finishType === 1
                          ? "完成项目"
                          : item.finishType === 2
                          ? "完成阶段"
                          : item.finishType === 3
                          ? "完成任务"
                          : item.finishType === 4
                          ? "考试合格"
                          : item.finishType === 5
                          ? "获得积分"
                          : "-"
                      }}
                    </div>
                    <a-popover class="certificateMorebox">
                      <template #content>
                        <div
                          class="certificateMore"
                          style="
                            font-size: 12px;
                            font-weight: 400;
                            color: #333333;
                          "
                        >
                          <div
                            class="certificateMore1"
                            style="line-height: 22px; cursor: pointer"
                            @click="checkCertificate(item)"
                          >
                            查看
                          </div>
                          <div
                            class="certificateMore2"
                            style="line-height: 22px; cursor: pointer"
                            @click="editCertificate(item)"
                          >
                            编辑
                          </div>
                          <div
                            class="certificateMore3"
                            style="line-height: 22px; cursor: pointer"
                            @click="deleteCertificate(item)"
                          >
                            删除
                          </div>
                        </div>
                      </template>
                      <div>
                        更多
                        <img
                          style="width: 11px; height: 8px; margin-left: 2px"
                          src="../../assets/images/project/triangle.png"
                        />
                      </div>
                    </a-popover>
                    <!-- <div class="certificateMorebox">
                          更多
                        </div> -->
                  </div>
                </div>
                <div class="certificateName">{{ item.name }}</div>
              </div>
            </div>
          </div>
          <!-- 查看证书显示的页面 -->
          <TableCertificateStudent
            :projectId="projectId"
            :ACertificateCheckId="ACertificateCheckId"
            v-if="ischeckCertificate"
            v-model:ischeckCertificate="ischeckCertificate"
          >
          </TableCertificateStudent>
        </a-tab-pane>
        <a-tab-pane key="8" tab="设置">
          <div class="split"></div>
          <a-tabs v-model:activeKey="activeSetKey">
            <a-tab-pane key="12" tab="基本信息">
              <div class="content7">
                <!-- <div class="set_tit">
                    <span>基本信息</span>
                  </div> -->
                <!-- <div class="line"></div> -->
                <div class="set_body">
                  <!-- <div class="edit" @click="showEditProj">
                      <div class="img"></div>
                      <div class="ed">编辑</div>
                    </div> -->
                  <div
                    class="edit"
                    v-if="status != 3 && checkPer(permissions)"
                    @click="toEdit"
                  >
                    <div class="img"></div>
                    <div class="ed">编辑</div>
                  </div>
                  <div class="set_content">
                    <div class="setc_name"><span>项目名称：</span></div>
                    <div class="setc_main">
                      <span style="color: #999999">{{ name }}</span>
                    </div>
                  </div>
                  <div class="set_content">
                    <div class="setc_name"><span>封面图：</span></div>
                    <div class="setc_main">
                      <img
                        style="width: 151px; height: 84px"
                        :src="picUrl"
                        alt=""
                      />
                    </div>
                  </div>
                  <div class="set_content">
                    <div class="setc_name"><span>项目时间：</span></div>
                    <div class="setc_main">
                      <span style="color: #999999"
                        >{{ startTime }} ～ {{ endTime }}</span
                      >
                    </div>
                  </div>
                  <div class="set_content">
                    <div class="setc_name"><span>项目经理：</span></div>
                    <div class="setc_main">
                      <span style="color: #999999">{{ manager }}</span>
                    </div>
                  </div>
                  <div class="set_content">
                    <div class="setc_name"><span>资源归属：</span></div>
                    <div class="setc_main">
                      <span style="color: #999999">{{ sourceBelong }}</span>
                    </div>
                  </div>
                  <div class="set_content">
                    <div class="setc_name"><span>项目级别：</span></div>
                    <div class="setc_main">
                      <span style="color: #999999">
                        <ProjectLevel
                          v-model:value="level"
                          :tag="true"
                        ></ProjectLevel>
                      </span>
                    </div>
                  </div>
                  <div class="set_content">
                    <div class="setc_name"><span>培训体系：</span></div>
                    <div class="setc_main">
                      <span style="color: #999999">
                        <TrainClass
                          v-model:value="systemId"
                          :tag="true"
                        ></TrainClass>
                      </span>
                    </div>
                  </div>
                  <div class="set_content">
                    <div class="setc_name"><span>同步学习记录：</span></div>
                    <div class="setc_main">
                      <a-radio v-model:checked="checkedSty" :disabled="true"
                        ><span style="color: #333333"
                          >同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</span
                        ></a-radio
                      >
                    </div>
                  </div>
                  <div class="set_content">
                    <div class="setc_name"><span>是否BOEU实施：</span></div>
                    <div class="setc_main">
                      <a-radio v-model:checked="checkedBOEU" :disabled="true"
                        ><span style="color: #333333">BOEU实施</span></a-radio
                      >
                    </div>
                  </div>
                  <div class="set_content" v-if="remark">
                    <div class="setc_name"><span>项目说明：</span></div>
                    <div class="setc_main">
                      <span style="color: #999999">{{ remark }}</span>
                    </div>
                  </div>
                  <div class="set_content" v-if="passInfo">
                    <div class="setc_name"><span>审核意见：</span></div>
                    <div class="setc_main">
                      <span style="color: #333333">{{ passInfo }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="13" 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
                          size="small"
                          v-model:checked="docChecked"
                          @change="checkedClose"
                        ></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/uploadunlimit"
                        @change="handleChange"
                      >
                        <span
                          class="xkbtn"
                          style="cursor: pointer; font-size: 17px"
                          >上传</span
                        >
                        <img
                          src="@/assets/images/basicinfo/cloud.png"
                          style="
                            cursor: pointer;
                            width: 24px;
                            height: 24px;
                            margin-left: 8px;
                            margin-bottom: 3px;
                          "
                          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.uid"
                        style="
                          width: 500px;
                          display: flex;
                          margin-bottom: 30px;
                          justify-content: space-between;
                          align-items: center;
                        "
                        class="docListStyle"
                      >
                        <!-- <img
                          src="@/assets/images/basicinfo/download.png"
                          style="
                            cursor: pointer;
                            width: 40px;
                            height: 40px;
                            margin-right: 40px;
                                "
                                alt=""
                              /> -->
                        <img
                          v-if="
                            item.name.indexOf('jpg') !== -1 ||
                            item.name.indexOf('jpeg') !== -1 ||
                            item.name.indexOf('png') !== -1
                          "
                          style="width: 27px; height: 32px; margin-right: 40px"
                          src="@/assets/images/coursewareManage/pngpic.png"
                        />
                        <div v-else>
                          <img
                            v-if="item.name.indexOf('doc') !== -1"
                            style="
                              width: 27px;
                              height: 32px;
                              margin-right: 40px;
                            "
                            src="@/assets/images/coursewareManage/docpic.png"
                          />
                          <div v-else>
                            <img
                              v-if="item.name.indexOf('xls') !== -1"
                              style="
                                width: 27px;
                                height: 32px;
                                margin-right: 40px;
                              "
                              src="@/assets/images/coursewareManage/xlspic.png"
                            />
                            <div v-else>
                              <img
                                v-if="item.name.indexOf('ppt') !== -1"
                                style="
                                  width: 27px;
                                  height: 32px;
                                  margin-right: 40px;
                                "
                                src="@/assets/images/coursewareManage/pptpic.png"
                              />
                              <div v-else>
                                <img
                                  v-if="item.name.indexOf('pdf') !== -1"
                                  style="
                                    width: 27px;
                                    height: 32px;
                                    margin-right: 40px;
                                  "
                                  src="@/assets/images/coursewareManage/pdfpic.png"
                                />
                                <div v-else>
                                  <img
                                    v-if="item.name.indexOf('zip') !== -1"
                                    style="
                                      width: 27px;
                                      height: 32px;
                                      margin-right: 40px;
                                    "
                                    src="@/assets/images/coursewareManage/zippic.png"
                                  />
                                  <img
                                    v-else
                                    style="
                                      width: 27px;
                                      height: 32px;
                                      margin-right: 40px;
                                    "
                                    src="@/assets/images/coursewareManage/docpic.png"
                                  />
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <span
                          style="
                            font: oblique bold 16px Sans-serif;
                            width: 300px;
                            display: block;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                          "
                          :title="item.name"
                          >{{ item.name }}</span
                        >
                        <a
                          href="javascript:void(0);"
                          @click="
                            downloadFile(
                              item.response ? item.response.data : ''
                            )
                          "
                          style="margin-left: 5px"
                          >下载</a
                        >
                        <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>
    </div>
    <!-- 时间管理抽屉 -->
    <time-manage
      v-model:Tvisible="visible"
      :projectTaskId="projectTaskId"
      :title="showTimeText"
      :itemsType="itemstype"
    />
    <!-- 在线、案例等管理抽屉 -->
    <ProjectOnlineManage
      v-model:Tvisible="onlineVisible"
      :projectTaskId="projectTaskId"
      :title="showTimeText"
      :itemsType="itemstype"
      :datasource="commonData"
      :levelName="commonLevelName"
    />
    <!-- 面授管理抽屉 -->
    <ProjectFaceTaskManage
      v-model:Fvisible="FaceVisivle"
      :projectTaskId="projectTaskId"
      :title="showFaceText"
      :projectTaskInfo="projectTaskInfo"
    />
    <!-- 作业管理抽屉 -->
    <ProjectHomeWorkManage
      v-model:Wvisible="Wvisible"
      :projectTaskId="projectTaskId"
      :title="showWorkText"
      :projectTaskInfo="projectTaskInfo"
    />
    <!-- 系统考试管理抽屉 -->
    <ProjectExamManage
      v-model:TMvisible="TMvisible"
      :title="showTestText"
      :projectTaskId="projectTaskId"
      :datasource="examData"
    />
    <!-- 外部考试管理抽屉 -->
    <ProjectExternalExamManage
      v-model:TMvisibleExternal="TMvisibleExternal"
      :title="showTestText"
      :projectTaskId="projectTaskId"
      :datasource="examData"
    />
    <!-- 投票管理抽屉 -->
    <ProjectVoteManage
      v-model:ProjectVoteModelVisible="projectVoteModelVisible"
      :title="voteModelVisibleTitle"
      :levelName="voteLevelName"
      :datasource="voteData"
    />
    <!-- 测评抽屉 -->
    <ProjectEvalManage
      v-model:Evalvisible="Evalvisible"
      :title="showTestText"
      :projectTaskId="projectTaskId"
      :itemsType="evaltype"
      :datasource="evalData"
    />
    <!-- 添加证书抽屉 -->
    <AddCertificate
      v-model:ACertificate="ACertificate"
      v-model:projectId="projectId"
      v-model:ACertificateEdit="ACertificateEdit"
      :getCertificate="getCertificate"
      :ACertificateEditId="ACertificateEditId"
    />
    <!-- 创建证书抽屉 -->
    <CreateCertificate v-model:CCertificate="CCertificate" />
    <!-- 预览 -->
    <a-modal
      :title="null"
      width="60%"
      :footer="null"
      v-model:visible="modal1Visible"
      style="display: flex; justify-content: center; align-items: center"
      @ok="setModal1Visible(false)"
    >
      <img
        :width="screenWidth * 0.55"
        src="https://picb6.photophoto.cn/32/552/32552236_1.jpg"
        alt=""
        srcset=""
      />
    </a-modal>
    <!-- 学员（小组管理）创建小组抽屉 -->
    <subset-manage
      v-model:Svisible="subsetVisivle"
      :projectId="projectId"
      v-model:getGroup="getGroup"
    />
    <!-- 学员管理-添加学员抽屉 -->
    <!-- <stu-add v-model:Stuvisible="Stuvisible" /> -->
    <!-- 添加学员抽屉 -->
    <proj-check-ship
      v-model:ProjCheckvisible="Stuvisible"
      :selectProjectId="projectId"
      v-model:addAuthList="addAuthList"
      :authClassify="authClassify"
      classify="project"
      :type="2"
    />
    <!-- 学员管理-导入学员抽屉 -->
    <import-stu v-model:Importvisible="Importvisible" />
    <!-- 查看学员 传入查看学员的id-->
    <see-stu
      v-model:Seevisible="Seevisible"
      v-model:checkStuId="checkStuId"
      v-model:projectId="projectId"
    />
    <!-- 学员换组 -->
    <change-group
      v-model:Changevisible="Changevisible"
      v-model:projectId="projectId"
      v-model:ChangeGroupStuId="ChangeGroupStuId"
      v-model:ChangeGroupStuName="ChangeGroupStuName"
      v-model:ChangeGroupId="ChangeGroupId"
      @changeD="changeGrouped"
    />
    <!-- 组员名单抽屉 -->
    <member-list
      v-model:Lvisible="Lvisible"
      v-model:chooseGroupId="chooseGroupId"
      v-model:chooseGroupName="chooseGroupName"
      v-model:groupMemberCount="groupMemberCount"
      v-model:projectId="projectId"
    />
    <!-- 面授学员抽屉 -->
    <ProjectFaceStu
      v-model:FSvisible="FSvisible"
      :projectTaskInfo="facestudent"
    />
    <!-- 活动直播考勤抽屉 -->
    <active-attendance
      v-model:AAvisible="AAvisible"
      :datasource="liveData"
      :title="showKaoqinText"
      types="1"
      classify="2"
    />
    <!-- 概览（无数据）-项目发布弹窗 -->
    <div>
      <a-modal
        v-model:visible="pubproject"
        :title="null"
        @ok="closeModal"
        :footer="null"
        :closable="false"
        :centered="true"
        wrapClassName="pubproject"
        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="closeModal">
            <img
              style="width: 22px; height: 22px"
              src="../../assets/images/basicinfo/close22.png"
            />
          </div>
        </div>
        <div class="modalMain">
          <div class="projectname">管理者进阶-腾飞班1</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">当前项目共0个阶段，0个任务</div>
            </div>
            <div class="stumessage">
              <div class="messageme1">学员信息</div>
              <div class="messagege1">项目共0名学员</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="checked1"
              ><span class="sendpeo">发给老师</span></a-checkbox
            >
            <a-checkbox v-model:checked="checked2"
              ><span class="sendpeo">发给学员</span></a-checkbox
            >
          </div>
          <div class="pubtn">
            <a-button class="pubtn1" @click="closeModal">取消</a-button>
            <a-button class="pubtn2" @click="closeModal">发布</a-button>
          </div>
        </div>
      </a-modal>
    </div>
    <!-- 概览（无数据）-项目发布弹窗 -->
    <!-- 学员-创建小组弹窗 -->
    <div>
      <a-modal
        v-model:visible="stugroup"
        :title="null"
        @ok="closeModal2"
        :footer="null"
        :closable="false"
        :centered="true"
        wrapClassName="doublepro"
        width="624px"
        height="332px"
      >
        <div
          class="modalHeader"
          style="
            width: 100%;
            height: 68px;
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div class="headerLeft" style="margin-left: 32px">
            <span class="headerLeftText" style="font-size: 16px">{{
              !groupInfo?.id ? "创建小组" : "编辑小组"
            }}</span>
          </div>
          <div style="cursor: pointer; margin-right: 32px" @click="closeModal2">
            <img
              style="width: 22px; height: 22px"
              src="../../assets/images/basicinfo/close22.png"
            />
          </div>
        </div>
        <div class="modalMain">
          <div class="name">
            <div class="star" style="margin-top: -4px">
              <img
                style="width: 10px; height: 10px"
                src="../../assets/images/basicinfo/asterisk.png"
              />
            </div>
            <div class="inname">小组名称:</div>
            <div class="in">
              <a-input
                v-model:value="groupInfo.groupName"
                placeholder="请输入小组名称"
                style="border-radius: 8px; height: 40px"
                :maxlength="100"
                show-count
              />
            </div>
          </div>
          <div class="name">
            <div class="star" style="margin-top: -4px">
              <img
                style="width: 10px; height: 10px"
                src="../../assets/images/basicinfo/asterisk.png"
              />
            </div>
            <div class="inname">组员人数:</div>
            <div class="in">
              <a-input-number
                :min="0"
                :max="300"
                :precision="0"
                style="width: 395px; height: 40px; border-radius: 8px"
                v-model:value="groupInfo.groupMemberCount"
              ></a-input-number>
            </div>
          </div>
          <div class="name">
            <div class="star" style="margin-top: -4px">
              <img
                style="width: 10px; height: 10px; margin-left: 15px"
                src="../../assets/images/basicinfo/asterisk.png"
              />
            </div>
            <div class="inname">小组长:</div>
            <div class="in">
              <ProjectManager
                v-model:value="groupInfo.leaderId"
                v-model:name="groupInfo.leaderName"
              ></ProjectManager>
            </div>
          </div>
          <div class="pubtn">
            <a-button class="pubtn1" @click="closeModal2">取消</a-button>
            <a-button class="pubtn2" @click="createG">确定</a-button>
          </div>
        </div>
      </a-modal>
    </div>
    <!-- 学员-创建小组弹窗 -->
    <!-- 取消学员弹窗 -->
    <div>
      <a-modal
        v-model:visible="canclestu"
        :footer="null"
        :closable="close"
        wrapClassName="canclestu"
        centered="true"
        @cancel="cancelyou"
      >
        <div class="delete">
          <div class="del_header"></div>
          <div class="del_main">
            <div class="header">
              <div class="icon1"></div>
              <span>提示</span>
            </div>
            <div class="body">
              <span>您是否授予此学员优秀学员称号？</span>
            </div>
            <div class="del_btnbox">
              <div class="del_btn btn1" @click="cancelyou">
                <div class="btnText">取消</div>
              </div>
              <div class="del_btn btn2" @click="closeModal1">
                <div class="btnText">确定</div>
              </div>
            </div>
          </div>
        </div>
      </a-modal>
    </div>
    <!-- 取消学员弹窗 -->
    <!-- 优秀学员弹窗 -->
    <div>
      <a-modal
        v-model:visible="canclestu1"
        :footer="null"
        :closable="close"
        wrapClassName="canclestu1"
        centered="true"
      >
        <div class="delete">
          <div class="del_header"></div>
          <div class="del_main">
            <div class="header">
              <div class="icon1"></div>
              <span>提示</span>
            </div>
            <div class="body">
              <span>您是否取消此学员优学员称号？</span>
            </div>
            <div class="del_btnbox">
              <div class="del_btn btn1" @click="cancelcanyou">
                <div class="btnText">取消</div>
              </div>
              <div class="del_btn btn2" @click="closeModal3">
                <div class="btnText">确定</div>
              </div>
            </div>
          </div>
        </div>
      </a-modal>
    </div>
    <!-- 取消学员弹窗 -->
    <!-- 删除学员弹窗 -->
    <div>
      <a-modal
        v-model:visible="deleteOneStu"
        :footer="null"
        :closable="close"
        wrapClassName="canclestu1"
        centered="true"
      >
        <div class="delete">
          <div class="del_header"></div>
          <div class="del_main">
            <div class="header">
              <div class="icon1"></div>
              <span>提示</span>
            </div>
            <div class="body">
              <span>您确定要删除此学员吗</span>
            </div>
            <div class="del_btnbox">
              <div class="del_btn btn1" @click="closeDeleteOne">
                <div class="btnText">取消</div>
              </div>
              <div class="del_btn btn2" @click="closeDeleteOneConfirm">
                <div class="btnText">确定</div>
              </div>
            </div>
          </div>
        </div>
      </a-modal>
    </div>
    <!-- 删除学员弹窗 -->
    <!-- 删除弹窗 -->
    <div>
      <a-modal
        v-model:visible="delete_hs"
        :footer="null"
        :closable="closableQR"
        wrapClassName="DelModal"
        style="margin-top: 400px"
        @cancel="delete_exit"
      >
        <div class="delete" :style="{ display: delete_hs ? 'block' : 'none' }">
          <div class="del_header"></div>
          <div class="del_main">
            <div class="header">
              <div class="del-icon"></div>
              <span>提示</span>
              <div class="close_exit" @click="delete_exit"></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>
    </div>
    <!-- 删除弹窗 -->
    <!-- 批量删除弹窗 -->
    <div>
      <a-modal
        v-model:visible="allDelete"
        :footer="null"
        :closable="close"
        wrapClassName="canclestu1"
        centered="true"
      >
        <div class="delete">
          <div class="del_header"></div>
          <div class="del_main">
            <div class="header">
              <div class="icon1"></div>
              <span>提示</span>
            </div>
            <div class="body">
              <span>您确定批量删除吗？</span>
            </div>
            <div class="del_btnbox">
              <div class="del_btn btn1" @click="closeCancelDelete">
                <div class="btnText">取消</div>
              </div>
              <div class="del_btn btn2" @click="closeAllDelete">
                <div class="btnText">确定</div>
              </div>
            </div>
          </div>
        </div>
      </a-modal>
    </div>
    <!-- 编辑项目弹窗 -->
    <proj-set v-model:editHs="editHs" v-model:projectId="projectId" />
    <!-- 发布弹窗 -->
    <a-modal
      v-model:visible="projectPub"
      :title="null"
      :footer="null"
      :closable="false"
      wrapClassName="projectPub"
      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="closeProjectPub"
        >
          <img
            style="width: 22px; height: 22px"
            src="../../assets/images/basicinfo/close22.png"
          />
        </div>
      </div>
      <div class="modalMain">
        <div class="projectname">{{ releaseProjectName }}</div>
        <div class="projecttime" v-if="startTime">
          <span class="timeti">项目时间：</span
          ><span class="timeme">{{ startTime }}~{{ endTime }}</span>
        </div>
        <div class="projectbox">
          <div class="promessage">
            <div class="messageme">项目信息</div>
            <div class="messagege">
              当前项目共{{ projectStages }}个阶段，{{ projectTasks }}个任务
            </div>
          </div>
          <div class="stumessage">
            <div class="messageme1">学员信息</div>
            <div class="messagege1">项目共{{ projectStudentsNum }}名学员</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="closeProjectPub">取消</a-button>
          <a-button class="pubtn2" @click="releaseProject">发布</a-button>
        </div>
      </div>
      <!--  加载动画 -->
      <div
        class="aeLoading"
        :style="{ display: projectPubLoading ? 'flex' : 'none' }"
      >
        <a-spin :spinning="projectPubLoading" />
      </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="recallProject">
              <div class="btnText">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 项目撤回审核弹窗 -->
    <a-modal
      v-model:visible="recallReviewModal"
      :footer="null"
      :closable="false"
      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="closeRecallReviewModal"></div>
          </div>
          <div class="body">
            <span>您确定要撤回审核吗</span>
            <div class="back"></div>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn1" @click="closeRecallReviewModal">
              <div class="btnText">取消</div>
            </div>
            <div class="del_btn btn2" @click="recallReviewProject">
              <div class="btnText">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 结束项目弹窗 -->
    <a-modal
      v-model:visible="stopModal"
      :footer="null"
      :closable="closeStop"
      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>
            <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="finishProject">
              <div class="btnText">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 存为模版弹窗 -->
    <a-modal
      v-model:visible="startModal"
      :footer="null"
      :closable="closeStart"
      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="closeStartModal"></div>
          </div>
          <div class="body">
            <span>您确定要存为模版吗</span>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn1" @click="closeStartModal">
              <div class="btnText">取消</div>
            </div>
            <div class="del_btn btn2" @click="templateProject">
              <div class="btnText">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 二维码弹窗 -->
    <two-dimensional-code
      v-model:codevisible="codevisible"
      :codeInfo="codeInfo"
      index="0"
      type="课程二维码"
    />
    <!-- 二维码弹窗 -->
    <!-- 换组弹窗 -->
    <ChangeGroupModal
      v-model:changegroupV="changegroupV"
      :groupList="groupList"
      :checkgroupStuId="checkgroupStuId"
    />
    <!-- 换组弹窗 -->
  </div>
</template>
<script>
import { reactive, toRefs, onMounted, watch, computed } from "vue";
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
import TimeManage from "../../components/drawers/TimeManage";
import ProjectFaceTaskManage from "../../components/drawers/project/ProjectFaceTaskManage";
import ProjectOnlineManage from "../../components/drawers/project/ProjectOnlineManage";
import ProjectHomeWorkManage from "../../components/drawers/project/ProjectHomeWorkManage";
import ProjectExamManage from "../../components/drawers/project/ProjectExamManage";
import ProjectExternalExamManage from "../../components/drawers/project/ProjectExternalExamManage";
import ProjectEvalManage from "../../components/drawers/project/ProjectEvalManage";
import AddCertificate from "../../components/drawers/project/AddCertificate";
import CreateCertificate from "../../components/drawers/project/CreateCertificate";
import ProjectVoteManage from "../../components/drawers/project/ProjectVoteManage";
import SubsetManage from "../../components/drawers/SubsetManage";
import MemberList from "../../components/drawers/MemberList";
import ActiveAttendance from "../../components/drawers/ActiveAttendance";
import ProjectFaceStu from "../../components/drawers/project/ProjectFaceStu";
import ProjCheckShip from "../../components/drawers/ProjCheckPower";
import ImportStu from "../../components/drawers/ImportStu";
import SeeStu from "../../components/drawers/SeeStu";
import ChangeGroup from "../../components/drawers/ChangeGroup";
import NoticePub from "../../components/drawers/NoticePub";
import NoticeHis from "../../components/drawers/NoticeHis";
import { storage } from "../../api/storage";
import * as api from "../../api/index1";
import * as apis from "../../api/index";
import * as apiproj from "../../api/index";
import * as student from "../../api/student";
import {
  getProjStu,
  deleteStu,
  getGroupList,
  deleteGroup,
  editGroup,
  updateStudent,
} from "../../api/indexProjStu";
import { message, Modal } from "ant-design-vue";
import * as apitl from "../../api/index";
import { getTask } from "../../api/indexTaskadd";
import { editProjDoc } from "../../api/indexTaskadd";
import { toDate } from "../../api/method";
import projSet from "../../components/Modals/projSet";
import { overview } from "../../api/indexProjStu";
import TwoDimensionalCode from "../../components/TwoDimensionalCode.vue";
import ProjectScore from "../../components/drawers/ProjectScore";
import { useStore } from "vuex";
import ProjectLevel from "@/components/project/ProjectLevel";
import TrainClass from "@/components/project/TrainClass";
import ProjectManager from "@/components/project/ProjectManagerNew";
import TableStudent from "@/components/student/TableStudent";
import TableCertificateStudent from "@/components/student/TableCertificateStudent";
import { getStuPage } from "@/api/index1";
import ChangeGroupModal from "@/components/student/ChangeGroupModal.vue";
import { checkPer } from "@/utils/utils";
import ImpoterGroupLeader from "@/components/drawers/project/ImpoterGroupLeader.vue";
export default {
  name: "taskPage",
  components: {
    ProjectLevel,
    TrainClass,
    TimeManage,
    ProjectFaceTaskManage,
    ProjectOnlineManage,
    ProjectHomeWorkManage,
    ProjectExamManage,
    ProjectExternalExamManage,
    ProjectEvalManage,
    SubsetManage,
    MemberList,
    ProjectFaceStu,
    ActiveAttendance,
    // StuAdd,
    ProjCheckShip,
    ImportStu,
    SeeStu,
    ChangeGroup,
    NoticePub,
    ProjectScore,
    projSet,
    NoticeHis,
    TwoDimensionalCode,
    ProjectManager,
    TableStudent,
    TableCertificateStudent,
    AddCertificate,
    CreateCertificate,
    ProjectVoteManage,
    ChangeGroupModal,
    ImpoterGroupLeader,
  },
  setup() {
    const store = useStore();
    const route = useRoute();
    const state = reactive({
      permissions: "",
      screenHeight: document.body.clientHeight,
      screenWidth: document.body.clientWidth,
      editRecord: {},
      choosedStageIndex: 0,
      hasTask: false,
      tabFlag: true,
      stage: [],
      stuColumns: [
        {
          title: "进度",
          dataIndex: "progress",
          key: "progress",
          width: 80,
          align: "center",
          className: "h",
          ellipsis: true,
          customRender: ({ record }) => (
            <div>
              {record.finishTaskNum || 0}/{record.totalTaskNum || 0}
            </div>
          ),
        },
        {
          title: "岗位",
          dataIndex: "studentJobName",
          key: "studentJobName",
          width: 80,
          align: "center",
          className: "h",
          ellipsis: true,
        },
        {
          title: "证书数量",
          dataIndex: "certCount",
          key: "certCount",
          width: 80,
          align: "center",
          className: "h",
          ellipsis: true,
        },
        {
          title: "状态",
          dataIndex: "status",
          key: "status",
          width: 80,
          align: "center",
          className: "h",
          ellipsis: true,
          customRender: ({ record }) => (
            <div>
              {record.finishTaskNum == 0
                ? "未开始"
                : record.finishTaskNum == record.totalTaskNum
                ? "已完成"
                : "进行中"}
            </div>
          ),
        },
        {
          title: "最近学习时间",
          dataIndex: "lastLearnTime",
          key: "lastLearnTime",
          width: 120,
          align: "center",
          className: "h",
          ellipsis: true,
        },
      ],
      loading: false,
      projectId: route.query.projectId,
      isbj: storage.get("isbj") ? JSON.parse(storage.get("isbj")) : null,
      // pN: storage.get("pN") ? JSON.parse(storage.get("pN")) : null,
      pN: storage.get("pN"),
      goodstuList: [
        {
          id: 1,
          value: "全部",
          label: "全部",
        },
        {
          id: 2,
          value: "普通学员",
          label: "普通学员",
        },
        {
          id: 3,
          value: "优秀学员",
          label: "优秀学员",
        },
      ],
      bum: [
        // {
        //   id: 1,
        //   value: "",
        //   label: "",
        // },
      ],
      changeGoods: [], //更改是否优秀的id数组
      choosedStageId: 1, // 选择的阶段id
      choosedStageName: "", //阶段名称
      activeSetKey: "12", //12-基础信息 13-共享文档
      docChecked: true,
      //学员信息列表
      tabledata: [
        // {
        //   key: 1,
        //   name: "sss",
        //   bum: "c",
        //   gangw: "ss",
        //   group: "sss",
        //   progress: "sss",
        //   diploma: "0",
        //   stutime: "20202",
        //   putin: "shs",
        //   excellent: true,
        //   studentId: 22,
        // },
      ],
      //小组信息列表
      groupList: [],
      isBatch: false, // 批量
      // stuName: "", //搜索的学员姓名
      // stuGroup: "", //搜索的学员小组名称
      // stuBum: "", //搜索的学员小组部门
      // stuGood: "", //搜索的学员是否优秀
      total: 0, //学员列表数据总条数
      stupageSize: 10,
      currentPageStu: 1, //当前页
      choosed: 0, //勾选的学员总数
      selectedRowKeys: [], //选择的学员
      selectedRows: [], //选择的学员的id值
      chooseDeleteOne: [], //删除的单个学员id
      // projectId:"", //项目任务id
      projectTaskId: "", //项目任务任务id
      //进度排行学员
      rankjindu: [
        { value: 0, label: "学员" },
        { value: 1, label: "小组" },
      ],
      valuestu1: 0,
      //进度排行阶段
      rankjieduan: [],
      valuestu2: "",
      //积分排行
      rankxuefen: [
        { value: 0, label: "学员" },
        { value: 1, label: "小组" },
      ],
      valuestu3: 0,
      //学时排行
      rankxueshi: [
        { value: 0, label: "学员" },
        { value: 1, label: "小组" },
      ],
      valuestu4: 0,
      visible: false, //时间管理
      onlineVisible: false, //在线管理
      FaceVisivle: false, //面授管理
      subsetVisivle: false, //随机小组
      Lvisible: false, //组员名单
      FSvisible: false, //面授学员
      AAvisible: false, //活动考勤
      Wvisible: false, //作业管理
      projectVoteModelVisible: false, // 投票管理
      TMvisible: false, //系统考试管理
      TMvisibleExternal: false, // 外部考试管理
      Evalvisible: false, //测评管理
      ACertificate: false, //证书添加
      ACertificateEdit: false, //是否是编辑证书
      ACertificateEditId: null, //编辑证书的id
      CCertificate: false, //证书创建
      ischeckCertificate: false, //是否显示查看证书
      ACertificateCheckId: null, //查看证书学员的id
      Stuvisible: false, //添加学员
      Importvisible: false, //导入学员
      Seevisible: false, //查看学员
      Changevisible: false, //学员换组
      editHs: false, //编辑弹窗
      delete_hs: false, //删除弹窗
      closeCopy: false, //面授二维码关闭图标
      zhibModal: false, //直播二维码弹窗
      huodModal: false, //活动二维码弹窗
      allDelete: false, //批量删除弹窗
      pubproject: false,
      stugroup: false,
      isEdit: false,
      canclestu: false,
      canclestu1: false,
      deleteOneStu: false, //删除单个学员弹窗
      checked: false,
      checked1: true,
      checked2: false,
      checkedSty: false, //同步学习记录
      checkedBOEU: false, //是否BOEU实施
      radioV1: "",
      radioV2: "",
      activeKey: "1", //1:概览 2.任务...
      activeKey1: "8", //8:学员管理 9：小组管理
      activeKey2: "3",
      activeKeyNotice: "11",
      inputValue: 5,
      inputValue2: 5,
      inputValue3: 5,
      valueaddm: "", //创建小组输入小组长
      valueaddg: "", //创建小组输入名称
      groupInfo: { leaderName: "", leaderId: "" }, //创建小组
      groupMemberCountContrast: null,
      groupPageList: [], //小组列表
      groupNumber: 0, //组员人数
      valuestun: "", //学员管理姓名
      valuegood: "",
      valuestub: "", //学员管理部门
      valuestug: "", //学员小组管理名称
      valuestugroup: "", //学员管理小组名称
      projectGroupId: null, //是编辑小组id
      stuMemberClassify: null, //1：新建小组 2：编辑小组
      stuGroupId: null, //选择的小组长id
      stuGroupName: null, //选择的小组长名字
      valueDate: "", //排行榜输入日期
      noticeChecked: true,
      noticeContent: "",
      TaskFaceImpStuvisible: false, //批量面授报名
      valuestugn: "", //小组管理的输入的小组名称
      checkStuId: null, //要查看的学员id
      chooseGroupId: null, //选择的小组id
      chooseGroupName: null, //选择的小组名称
      groupMemberCount: null, //选择的小组人数限制
      groupMemberNUmber: null, //选择的小组人数合计
      morFaceT: false, //批量面授报名按钮
      faceArr: [], //任务大纲列表所有name
      action: null,
      act: null,
      projectPub: false, //发布弹窗
      projectPubLoading: false, //发布loading
      projectStudentsNum: 0, //发布弹窗-学员人数
      projectStages: 0, //发布弹窗-阶段数
      projectTasks: 0, //任务数
      releaseProjectId: null, //发布的项目id
      releaseProjectName: null, //发布的项目名称
      releaseProjectTime: null, //发布的项目时间
      backModal: false, //撤回弹窗
      recallReviewModal: false, //撤回审核
      closeBack: false,
      stopModal: false,
      closeStop: false,
      startModal: false,
      closeStart: false,
      ChangeGroupStuId: null, //要换组的学生id
      ChangeGroupStuName: null, //要换组的学生name
      ChangeGroupId: null, //要换组的学生的小组id
      fileList: [], //文件列表
      //进度排行表
      jindutabledata: [],
      jindutablecolumns: [
        {
          title: "排名",
          dataIndex: "index",
          key: "index",
          width: 50,
          align: "center",
          className: "h",
          customRender: (text) => {
            if (text.record.index == "1") {
              return (
                <img
                  style={{ width: 24, height: 24 }}
                  src={require("../../assets/images/taskpage/one.png")}
                />
              );
            } else if (text.record.index == "2") {
              return (
                <img
                  style={{ width: 24, height: 24 }}
                  src={require("../../assets/images/taskpage/two.png")}
                />
              );
            } else if (text.record.index == "3") {
              return (
                <img
                  style={{ width: 24, height: 24 }}
                  src={require("../../assets/images/taskpage/three.png")}
                />
              );
            } else {
              return <div>{text.record.index}</div>;
            }
          },
        },
        {
          title: "名称",
          dataIndex: "name",
          key: "name",
          width: 50,
          align: "center",
          className: "h",
        },
        {
          title: "进度",
          dataIndex: "rateStr",
          key: "rateStr",
          width: 50,
          align: "center",
          className: "h",
        },
      ],
      scoreRankLoading: true,
      processRankLoading: true,
      //学分排行表
      xuefentabledata: [],
      xuefentablecolumns: [
        {
          title: "排名",
          dataIndex: "index",
          key: "index",
          width: 50,
          align: "center",
          className: "h",
          customRender: (text) => {
            if (text.record.index == "1") {
              return (
                <img
                  style={{ width: 24, height: 24 }}
                  src={require("../../assets/images/taskpage/one.png")}
                />
              );
            } else if (text.record.index == "2") {
              return (
                <img
                  style={{ width: 24, height: 24 }}
                  src={require("../../assets/images/taskpage/two.png")}
                />
              );
            } else if (text.record.index == "3") {
              return (
                <img
                  style={{ width: 24, height: 24 }}
                  src={require("../../assets/images/taskpage/three.png")}
                />
              );
            } else {
              return <div>{text.record.index}</div>;
            }
          },
        },
        {
          title: "名称",
          dataIndex: "name",
          key: "name",
          width: 50,
          align: "center",
          className: "h",
        },
        {
          title: "积分",
          dataIndex: "pointsCountStr",
          key: "pointsCountStr",
          width: 50,
          align: "center",
          className: "h",
        },
      ],
      //学时排行表
      studytimeRankLoading: true,
      xueshitabledata: [],
      xueshitablecolumns: [
        {
          title: "排名",
          dataIndex: "index",
          key: "index",
          width: 50,
          align: "center",
          className: "h",
          customRender: (text) => {
            if (text.record.index == "1") {
              return (
                <img
                  style={{ width: 24, height: 24 }}
                  src={require("../../assets/images/taskpage/one.png")}
                />
              );
            } else if (text.record.index == "2") {
              return (
                <img
                  style={{ width: 24, height: 24 }}
                  src={require("../../assets/images/taskpage/two.png")}
                />
              );
            } else if (text.record.index == "3") {
              return (
                <img
                  style={{ width: 24, height: 24 }}
                  src={require("../../assets/images/taskpage/three.png")}
                />
              );
            } else {
              return <div>{text.record.index}</div>;
            }
          },
        },
        {
          title: "名称",
          dataIndex: "name",
          key: "name",
          width: 50,
          align: "center",
          className: "h",
        },
        {
          title: "时长",
          dataIndex: "timeStr",
          key: "timeStr",
          width: 50,
          align: "center",
          className: "h",
        },
      ],
      //任务大纲列表
      taskSyllabus: [],
      taskSyllabusActive: 0,
      //在线管理等页面传递参数title
      showTimeText: "",
      //考试、测评页面传递参数title
      showTestText: "",
      //面授传递title
      showFaceText: "",
      projectTaskInfo: null, //任务信息
      //直播、面授传递title
      showWorkText: "",
      //直播、活动页面传递参数
      showkaoqinText: "直播",
      liveData: "",
      //所有抽屉的传过去的type
      itemstype: null,
      //排行榜时间
      rankStartTime: null,
      rankEndTime: null,
      valueName: "", //排行榜输入姓名
      //设置
      name: null, //项目名称 未改
      startTime: null, //开始时间 已改
      tstartTime: null, //开始事件 未改
      endTime: null, //结束时间 已改
      tendTime: null, //结束时间 未改
      manager: null, //项目经理 未改
      sourceBelong: null, //资源归属 已改
      tsourceBelong: null, //资源归属 未改
      remark: null, //项目说明 未改
      level: null, //项目级别  已改
      tlevel: null, //项目级别 未改
      systemId: null, //培训分类
      tsystemId: null, //培训分类 未改
      picUrl: null, //未改
      parentId: null, //未改
      courseSyncFlag: null, //未改
      boeFlag: null, //未改
      managerId: null, //未改
      notice: null, //未改
      status: null, //未改
      type: null, //未改
      category: null, //未改
      noticeFlag: null, //未改
      templateId: null, //未改
      attach: null,
      authClassify: 3,
      addAuthList: [],
      switchopen: true,
      isPass: false, // 是否审核未通过
      passInfo: null, // 审核未通过原因说明
      reviewModal: false,
      codevisible: false, //二维码是否显示
      codeInfo: null, //二维码标题
      examData: "",
      commonData: "",
      commonLevelName: "",
      evaltype: "",
      evalData: "",
      voteData: "",
      voteModelVisibleTitle: "",
      voteLevelName: "",
      facestudent: "",
      modal1Visible: false, // 证书预览
      changegroupV: false, //换组弹窗
      checkgroupStuId: null, //换组id
      ImpoterGroupLeaderV: false, //导入小组长抽屉
      certificatelist: [],
      fileUrl: process.env.VUE_APP_FILE_PATH,
    });
    // 排行榜 - start
    // 积分排行榜 Top10
    // 项目积分切换查询 -- 学员 小组
    const jfSelectChange = (e) => {
      console.log(e);
      scoreRank();
    };
    const jdSelectChange = (e) => {
      console.log(e);
      completionRank();
    };
    const jdSelectChange1 = (e) => {
      console.log(e);
      completionRank();
    };
    const xsSelectChange = (e) => {
      console.log(e);
      studytimeRank();
    };
    //项目积分榜单
    const scoreRank = (period, type) => {
      state.scoreRankLoading = true;
      state.datascore = [];
      state.datascoreg = [];
      console.log("projectId----->", state.projectId, period, type);
      console.log("我是查询榜单传递的数据", {
        projectId: state.projectId, // 项目id
        name: "", // 名字，没有则传空字符串
        startTime: state.rankStartTime ? state.rankStartTime : 0, // 数据查询的起始时间 10位时间戳
        endTime: state.rankEndTime ? state.rankEndTime : 0,
        size: 10, // 前多少名
        type: Number(state.valuestu3), // 查询类型 0 学员积分榜 1 小组积分榜
      });
      let obj = {
        projectId: state.projectId, // 项目id
        name: "", // 名字，没有则传空字符串
        startTime: state.rankStartTime ? state.rankStartTime : 0, // 数据查询的起始时间 10位时间戳
        endTime: state.rankEndTime ? state.rankEndTime : 0,
        size: 10, // 前多少名
        type: Number(state.valuestu3), // 查询类型 0 学员积分榜 1 小组积分榜
      };
      api
        .scoreRank(obj)
        .then((res) => {
          console.log("获取项目积分-榜单", res);
          if (res.data.code == 200) {
            state.datascore = res.data.data;
            state.datascoreg = res.data.data;
            state.xuefentabledata = res.data.data;
            state.scoreRankLoading = false;
          } else {
            state.datascore = [];
            state.datascoreg = [];
            state.xuefentabledata = [];
            state.scoreRankLoading = false;
          }
        })
        .catch((err) => {
          console.log("获取项目积分-榜单失败", err);
          message.destroy();
          message.error("榜单获取失败");
          state.datascore = [];
          state.datascoreg = [];
          state.xuefentabledata = [];
          state.scoreRankLoading = false;
        });
    };
    // 项目进度榜单
    const completionRank = () => {
      state.processRankLoading = true;
      let obj = {
        projectId: state.projectId, // 项目id
        startTime: state.rankStartTime ? state.rankStartTime : 0, // 数据查询的起始时间 10位时间戳
        endTime: state.rankEndTime ? state.rankEndTime : 0,
        stageId: state.valuestu2, // 阶段ID
        type: Number(state.valuestu3), // 查询类型 0 学员积分榜 1 小组积分榜
      };
      console.log("我是获取得项目进度排行榜--》", obj);
      api
        .completionRank(obj)
        .then((res) => {
          console.log("项目进度榜单获取", res);
          if (res.data.data.datas) {
            state.jindutabledata = res.data.data.datas;
            state.processRankLoading = false;
          } else {
            state.jindutabledata = [];
            state.processRankLoading = false;
          }
        })
        .catch((err) => {
          console.log(err);
          state.jindutabledata = [];
          state.processRankLoading = false;
        });
    };
    // 项目学时榜单
    const studytimeRank = () => {
      state.studytimeRankLoading = true;
      let obj = {
        projectId: state.projectId, // 项目id
        startTime: state.rankStartTime ? state.rankStartTime : 0, // 数据查询的起始时间 10位时间戳
        endTime: state.rankEndTime ? state.rankEndTime : 0,
        type: Number(state.valuestu4), // 查询类型 0 学员积分榜 1 小组积分榜
      };
      console.log("我是获取得项目学时排行榜--》", obj);
      api
        .studytimeRank(obj)
        .then((res) => {
          console.log("项目学时榜单获取", res);
          if (res.data.data) {
            state.xueshitabledata = res.data.data;
            state.studytimeRankLoading = false;
          } else {
            state.xueshitabledata = [];
            state.studytimeRankLoading = false;
          }
        })
        .catch((err) => {
          console.log(err);
          state.xueshitabledata = [];
          state.studytimeRankLoading = false;
        });
    };
    // 排行榜 - end
    const levelList = reactive({
      projectInfoOverview: {
        // 整体数据概览
        totalStudentCnt: 0,
        studyStudentCnt: 0,
        completeStudentCnt: 0,
        onlineCourseCnt: 0,
        offLineCourseCnt: 0,
        completeRatio: 0,
      },
      stageOverviewList: [
        {
          // 阶段数据概览
          completeCourseRatio: 0,
          completeExamRatio: 0,
          completeRatio: 0,
          totalTaskCnt: 0,
          totalReqCnt: 0,
          totalOptCnt: 0,
        },
      ],
      stageList: [
        // 阶段列表
      ],
    });
    // 输入接入 -- start --
    const router = useRoute();
    const routered = useRouter();
    console.log("route:", router.query.id);
    // 输入接入 -- start --
    // 资源归属 sourceBelongId 后续给接口
    state.bum = computed(() => {
      console.log("基础信息 store.state.orgtreeList", store.state.orgtreeList);
      return store.state.orgtreeList ? store.state.orgtreeList : [];
    });
    //任务大纲渲染
    const getTaskList = () => {
      let objtl = {
        projectId: state.projectId,
      };
      apitl.getProjectDetail(objtl).then((res) => {
        console.log("阶段列表", res);
        for (let i = 0; i < res.data.data.stageList.length; i++) {
          for (let k = 0; k < res.data.data.stageList[i].taskList.length; k++) {
            if (res.data.data.stageList[i].taskList[k].name == "面授") {
              state.morFaceT = true;
              break;
            }
          }
        }
        levelList.stageList = res.data.data.stageList;
        if (
          levelList.stageList.length === 1 &&
          levelList.stageList[0].id === "0"
        ) {
          // 无解段任务
          state.rankjieduan = [{ value: 0, label: "无阶段" }];
          state.valuestu2 = 0;
        } else {
          // 有阶段任务
          console.log("有阶段任务", levelList.stageList);
          let arrStage = [];
          for (let i = 0; i < levelList.stageList.length; i++) {
            if (levelList.stageList[i].id !== "0") {
              let obj = {
                value: levelList.stageList[i].id,
                label: levelList.stageList[i].name,
              };
              arrStage.push(obj);
            }
          }
          state.rankjieduan = arrStage;
          state.valuestu2 = arrStage[0].value;
          state.choosedStageName = levelList.stageList[0].name;
        }
        //暂时传个固定的id用 到时候看数据里面是否有在更换
        // state.projectTaskId = res.data.data.stageList[0].taskList[0].projectTaskId
        let leng = res.data.data.stageList.length;
        if (leng > 0) {
          let taskarr = res.data.data.stageList;
          console.log("11-22-33", taskarr);
          if (taskarr.length == 1) {
            if (taskarr[0].id == "0") {
              taskarr[0].name = "无阶段任务";
            }
          }
          state.taskSyllabus = taskarr;
        }
      });
    };
    //学员学员管理渲染
    // const getTableDate = () => {
    //   let datas = state.tabledata;
    //   datas.map((value) => {
    //     {
    //       //单层项目
    //       value.operations = (
    //         <div class="operation">
    //           <div class="nSelect">
    //             <div class="nselect">
    //               <div
    //                 class="jc"
    //                 onClick={() => {
    //                   // state.QR_hs = true;
    //                   // state.ftsQR_hs = true;
    //                   state.canclestu = true;
    //                 }}
    //               >
    //                 优秀学员
    //               </div>
    //               <div
    //                 class="jc"
    //                 onClick={() => {
    //                   state.Seevisible = true;
    //                 }}
    //               >
    //                 查看
    //               </div>
    //               <div class="tableSelect">
    //                 <a-select
    //                   style="width: 50px;margin-top:2px;margin-left:25px"
    //                   value="更多"
    //                   // options={state.projectNameList}
    //                   dropdownClassName="tabledropdown"
    //                 >
    //                   <a-select-option
    //                     value="换组"
    //                     label="换组"
    //                     style="padding-left:35px"
    //                   >
    //                     <div
    //                       onClick={() => {
    //                         // state.copy_hs = true;
    //                       }}
    //                     >
    //                       复制
    //                     </div>
    //                   </a-select-option>
    //                   <a-select-option
    //                     value="删除"
    //                     label="删除"
    //                     style="padding-left:35px"
    //                   >
    //                     <div
    //                       onClick={() => {
    //                         state.delete_hs = true;
    //                       }}
    //                     >
    //                       删除
    //                     </div>
    //                   </a-select-option>
    //                 </a-select>
    //               </div>
    //             </div>
    //           </div>
    //         </div>
    //       );
    //     }
    //   });
    //   state.tableData = datas;
    // };
    // getTableDate();
    const totask = () => {
      // state.activeKey = "2";
      routered.push({
        path: `/taskadd`,
        query: { projectId: state.projectId },
      });
    };
    const tostudent = () => {
      state.activeKey = "3";
      state.activeKey1 = "8";
    };
    const showModal = () => {
      state.pubproject = true;
    };
    const closeModal = () => {
      state.pubproject = false;
    };
    const showModal1 = () => {
      state.canclestu = true;
    };
    //点击确定授予优秀学员后
    const closeModal1 = () => {
      state.editRecord.topFlag = 1;
      updateStudent(state.editRecord);
      state.canclestu = false;
      message.success("优秀学员称号授予成功");
    };
    //点击取消授予优秀学员后
    const cancelyou = () => {
      state.changeGoods = [];
      state.canclestu = false;
    };
    const showModal3 = () => {
      state.canclestu1 = true;
    };
    //点击确定取消优秀学员称号
    const closeModal3 = () => {
      state.editRecord.topFlag = 0;
      updateStudent(state.editRecord);
      state.canclestu1 = false;
      message.success("优秀学员称号取消成功");
    };
    //点击取消取消授予优秀学员后
    const cancelcanyou = () => {
      state.changeGoods = [];
      state.canclestu1 = false;
    };
    //显示学员换组弹窗
    const showChangeGroupModal = (record) => {
      console.log("单个");
      state.changegroupV = true;
      console.log("点击换组", record.id);
      state.checkgroupStuId = [];
      state.checkgroupStuId.push(record.id);
    };
    const showModal2 = (item, isEdit) => {
      state.isEdit = isEdit;
      state.stugroup = true;
      state.groupInfo = item || {};
      state.groupMemberCountContrast = item.groupMemberCount;
    };
    const closeModal2 = () => {
      state.stugroup = false;
      state.groupInfo = {};
      state.groupMemberCountContrast = null;
      getGroup();
    };
    //点击确定创建小组
    const createG = () => {
      if (!state.groupInfo.groupName) {
        return message.warning("请输入小组名称");
      }
      if (!state.groupInfo.leaderId) {
        return message.warning("请选择小组长");
      }
      if (!state.groupInfo.leaderName) {
        return message.warning("请选择小组长");
      }
      if (!state.groupInfo.groupMemberCount) {
        return message.warning("请输入组员数量");
      }
      createGroup();
    };
    const showFaceIn = () => {
      state.TaskFaceImpStuvisible = true;
    };
    //在线、案例、外链、讨论、评估、直播、活动管理页面
    const showOnline = (name, id, type, datasource, levelname) => {
      console.log("点击管理并传了id", datasource);
      state.commonLevelName = levelname;
      state.commonData = datasource;
      state.onlineVisible = true;
      state.showTimeText = name;
      state.projectTaskId = id;
      state.itemstype = Number(type);
    };
    //面授管理的抽屉
    const showFace = (name, id, item) => {
      // console.log("点击管理");
      state.FaceVisivle = true;
      state.showFaceText = name;
      state.projectTaskId = id;
      state.projectTaskInfo = item;
      console.log("projectTaskInfo", item);
    };
    const showSubset = () => {
      // 随机分组
      state.subsetVisivle = true;
    };
    //面授学员的弹窗
    const showFS = (item) => {
      state.FSvisible = true;
      state.facestudent = item;
      console.log("facestudent", state.facestudent);
    };
    //面授学员的弹窗
    const showMemberList = (id, name, groupMemberCount) => {
      state.Lvisible = true;
      console.log("ssdsdsdsd", id);
      state.chooseGroupId = id;
      state.chooseGroupName = name;
      state.groupMemberCount = groupMemberCount;
    };
    //活动考勤的抽屉
    {
      /* const showAA = (title) => {
      state.AAvisible = true;
      state.showkaoqinText = title;
    }; */
    }
    //考勤的抽屉
    const showAA = (course, a, data) => {
      state.AAvisible = true;
      state.liveData = data;
      state.showKaoqinText = "直播";
      console.log(state.showKaoqinText, 1111, data);
    };
    //作业管理的抽屉
    const showWork = (name, id, item) => {
      state.Wvisible = true;
      state.showWorkText = name;
      state.projectTaskId = id;
      state.projectTaskInfo = item;
    };
    {
      /* 直播管理的抽屉 */
    }
    const showVote = (name, id, data) => {
      console.log(name, id, data);
      state.projectVoteModelVisible = true;
      state.voteData = data;
      state.voteModelVisibleTitle = name;
      state.voteLevelName = "无阶段任务";
    };
    //考试管理的抽屉
    const showTest = (name, id, data) => {
      if (data.examType == 2) {
        // 外部考试抽屉显示
        state.TMvisibleExternal = true;
        state.examData = data;
        state.showTestText = name;
        state.projectTaskId = id;
      } else {
        // 系统考试抽屉显示
        state.TMvisible = true;
        state.examData = data;
        state.showTestText = name;
        state.projectTaskId = id;
      }
    };
    //测评抽屉
    const showEval = (name, id, type, datasource) => {
      console.log("点击测评");
      state.evaltype = type;
      state.evalData = datasource;
      state.Evalvisible = true;
      state.showTestText = name;
      state.projectTaskId = id;
    };
    const showStuAdd = () => {
      state.Stuvisible = true;
    };
    const showSeeStu = () => {
      state.Seevisible = true;
    };
    const showImportStu = () => {
      state.Importvisible = true;
    };
    const showChangeGroup = () => {
      state.Changevisible = true;
    };
    const edit_hShow = () => {
      state.edit_hs = true;
    };
    const edit_exit = () => {
      state.edit_hs = false;
      state.radioV1 = "";
      state.radioV2 = "";
    };
    const cloradio1 = (value) => {
      if (value != "") {
        state.radioV1 = "";
      }
    };
    const cloradio2 = (value) => {
      if (value != "") {
        state.radioV2 = "";
      }
    };
    const showzhibModal = () => {
      state.zhibModal = true;
    };
    const showhuodModal = () => {
      state.huodModal = true;
    };
    const closezhibModal = () => {
      state.zhibModal = false;
    };
    const closehuodModal = () => {
      state.huodModal = false;
    };
    const showEditProj = () => {
      state.editHs = true;
    };
    //显示二维码弹窗
    const showCodeModal = () => {
      state.codevisible = true;
      state.codeInfo = {
        title: "课程二维码",
        name: "管理者进阶面授课程",
        url: "https://www.baidu.com/https://www.baidu.com/https://www.baidu.com/https://www.baidu.com/https://www.baidu.com/",
      };
    };
    // 提交审核
    const submitExamine = () => {
      state.reviewModal = true;
    };
    const submitReviewProject = () => {
      let obj = {
        projectId: state.projectId,
        type: 3,
      };
      console.log("提交审核obj", obj);
      apis
        .handleProject(obj)
        .then((res) => {
          console.log("提交成功", res);
          message.destroy();
          message.success("提交成功");
          state.reviewModal = false;
          getTaskInfo();
          // getTask();
          reget();
        })
        .catch((err) => {
          console.log("提交失败", err);
        });
    };
    //关闭提交审核弹窗
    const closeReviewModal = () => {
      state.reviewModal = false;
    };
    //学员管理列表操作
    // const studentData = () => {
    //   let arr = state.tabledata;
    //   console.log(arr, "学员管理");
    //   arr.map((value) => {
    //     value.operation = (
    //       <div
    //         style={{
    //           display: "flex",
    //           alignItems: "center",
    //           justifyContent: "center",
    //         }}
    //       >
    //         <div
    //           class="studentopea1"
    //           onClick={() => {
    //             if (value.excellent === false) {
    //               state.canclestu = true;
    //               console.log("youxiu", value.studentId);
    //               state.changeGoods.push(value.studentId);
    //             } else if (value.excellent === true) {
    //               state.canclestu1 = true;
    //               console.log("youxiu", value.studentId);
    //               state.changeGoods.push(value.studentId);
    //             }
    //           }}
    //         >
    //           {value.excellent ? "取消优秀" : "优秀学员"}
    //         </div>
    //         <div
    //           class="studentopea2"
    //           onClick={() => {
    //             state.Seevisible = true;
    //             console.log(value.studentId, "点击了查看");
    //             state.checkStuId = value.studentId;
    //           }}
    //         >
    //           查看
    //         </div>
    //         <div class="studentSelect">
    //           <a-select
    //             style="width: 50px"
    //             value="更多"
    //             // options={state.projectNameList}
    //             dropdownClassName="tabledropdown"
    //           >
    //             <a-select-option value="换组" label="换组">
    //               <div
    //                 style="cursor:pointer"
    //                 onClick={() => {
    //                   state.Changevisible = true;
    //                   console.log(value, "xixixixix");
    //                   state.ChangeGroupStuId = value.studentId;
    //                   state.ChangeGroupStuName = value.name;
    //                   state.ChangeGroupId = value.groupId;
    //                 }}
    //               >
    //                 换组
    //               </div>
    //             </a-select-option>
    //             <a-select-option value="删除" label="删除">
    //               <div
    //                 style="cursor:pointer"
    //                 onClick={() => {
    //                   console.log("点击了111", value.studentId);
    //                   showDeleteOne(value.studentId);
    //                 }}
    //               >
    //                 删除
    //               </div>
    //             </a-select-option>
    //           </a-select>
    //         </div>
    //       </div>
    //     );
    //   });
    //   state.tabledata = arr;
    // };
    // studentData();
    // const studentData = () => {
    //   let arr = state.tabledata;
    //   console.log(arr, "学员管理");
    //   arr.map((value) => {
    //     value.operation = (
    //     );
    //   });
    //   state.tabledata = arr;
    // };
    // studentData();
    const studentColumns = () => {
      const tablecolumns = [
        {
          title: "姓名",
          dataIndex: "name",
          key: "name",
          width: "20%",
          align: "left",
          className: "h",
          // scopedSlots: { customRender: "action" }, //引入的插槽
          customRender: (text) => {
            console.log(text.excellent);
            return (
              <div>
                {text.record.excellent ? (
                  <div
                    style={{
                      display: "flex",
                      alignItems: "center",
                    }}
                  >
                    <span class="stydentName">{text.value}</span>
                    <div class="studentExcellent">
                      <img
                        class="studentExcellentImg"
                        src={require("../../assets/images/taskpage/excellent.png")}
                      />
                      <span class="studentExcellentT">优秀</span>
                    </div>
                  </div>
                ) : (
                  <div>
                    <span>{text.value}</span>
                  </div>
                )}
              </div>
            );
          },
        },
        {
          title: "部门",
          dataIndex: "bum",
          key: "bum",
          width: "10%",
          align: "center",
          className: "h",
          ellipsis: true,
        },
        {
          title: "进度",
          dataIndex: "progress",
          key: "progress",
          width: "10%",
          align: "center",
          className: "h",
          ellipsis: true,
        },
        {
          title: "最近学习时间",
          dataIndex: "stutime",
          key: "stutime",
          width: "20%",
          align: "center",
          className: "h",
          ellipsis: true,
        },
        {
          title: "加入方式",
          dataIndex: "putin",
          key: "putin",
          width: "10%",
          align: "center",
          className: "h",
          ellipsis: true,
        },
        {
          title: "操作",
          dataIndex: "operation",
          key: "operation",
          width: "20%",
          align: "center",
          className: "h",
          scopedSlots: { customRender: "action" }, //引入的插槽
          customRender: (text) => {
            // console.log(text);
            return (
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                <div
                  class="studentopea1"
                  onClick={() => {
                    if (text.record.excellent === false) {
                      state.canclestu = true;
                      console.log("youxiu", text.record.studentId);
                      state.changeGoods.push(text.record.studentId);
                    } else if (text.record.excellent === true) {
                      state.canclestu1 = true;
                      console.log("youxiu", text.record.studentId);
                      state.changeGoods.push(text.record.studentId);
                    }
                  }}
                >
                  {text.record.excellent ? "取消优秀" : "优秀学员"}
                </div>
                {
                  <div
                    class="studentopea2"
                    onClick={() => {
                      state.Seevisible = true;
                      console.log(text.record.studentId, "点击了查看");
                      state.checkStuId = text.record.studentId;
                    }}
                  >
                    查看
                  </div>
                }
                <div class="studentSelect">
                  <a-select
                    style="width: 50px"
                    value="更多"
                    // options={state.projectNameList}
                    dropdownClassName="tabledropdown"
                  >
                    <a-select-option value="换组" label="换组">
                      <div
                        onClick={() => {
                          state.Changevisible = true;
                          state.ChangeGroupStuId = text.record.studentId;
                          state.ChangeGroupStuName = text.record.name;
                          state.ChangeGroupId = text.record.groupId;
                        }}
                      >
                        换组
                      </div>
                    </a-select-option>
                    <a-select-option value="删除" label="删除">
                      <div
                        onClick={() => {
                          {
                            /* console.log("点击了111", text); */
                          }
                          showDeleteOne(text.record.studentId);
                        }}
                      >
                        删除
                      </div>
                    </a-select-option>
                  </a-select>
                </div>
              </div>
            );
          },
        },
      ];
      return tablecolumns;
    };
    const delete_exit = () => {
      state.delete_hs = false;
    };
    //tabs切换
    const tabsChange = (e) => {
      //排行榜
      if (e == 6) {
        //获取进度榜
        // getbillboard(1, 1);
        //获取学分榜
        // getbillboard(2, 1);
        //获取学时榜
        // getbillboard(3, 1);
        // 获取积分排行榜
        scoreRank();
        // 获取项目进度排行榜
        completionRank();
        // 获取学时排行榜
        studytimeRank();
      } else if (e == 3) {
        state.tabFlag = true;
      } else {
        rankReset();
        state.tabFlag = false;
      }
      if (e != 7) {
        state.ischeckCertificate = false;
      }
      console.log("切换了", state.tabFlag);
    };
    // start -------排行榜---------------排行榜------------排行榜------------------排行榜---------
    //选择搜索时间
    const rankTimeChange = (e, date) => {
      let startTime = date[0] + " 00:00:00";
      let endTime = date[1] + " 23:59:59";
      state.rankStartTime = new Date(startTime).getTime() / 1000;
      state.rankEndTime = new Date(endTime).getTime() / 1000;
      console.log("e", state.rankStartTime, state.rankEndTime);
    };
    //获取排行榜 category:榜单类别参数 type:人员类别参数
    const getbillboard = (category, type) => {
      let obj = {
        beginTime: state.rankStartTime,
        category: category,
        endTime: state.rankEndTime,
        name: state.valueName,
        projectId: state.projectId,
        stageId: 0,
        type: type,
      };
      api
        .billboard(obj)
        .then((res) => {
          console.log("获取成功", res);
        })
        .catch((err) => {
          console.log("获取失败", err);
        });
    };
    //搜索
    const rankSearch = () => {
      //获取进度榜
      // getbillboard(1, 1);
      //获取学分榜
      // getbillboard(2, 1);
      //获取学时榜
      // getbillboard(3, 1);
      // 获取积分排行
      scoreRank();
      // 获取项目进度排行榜
      completionRank();
      // 获取学时排行榜
      studytimeRank();
    };
    //重置
    const rankReset = () => {
      state.rankStartTime = null;
      state.rankEndTime = null;
      state.valueDate = null;
      state.valueName = null;
      // 获取积分排行
      scoreRank();
      // 获取项目进度排行榜
      completionRank();
      // 获取学时排行榜
      studytimeRank();
    };
    // end -----排行榜----------------排行榜----------------------排行榜-----------排行榜----------
    //start---------学员------
    //删除单个学员
    const showDeleteOne = (id) => {
      state.deleteOneStu = true;
      state.chooseDeleteOne.push(id);
    };
    //点击取消删除单个学员
    const closeDeleteOne = () => {
      state.deleteOneStu = false;
      state.chooseDeleteOne = [];
    };
    //点击确认删除单个学员
    const closeDeleteOneConfirm = () => {
      state.deleteOneStu = false;
      state.loading = true;
      deleteStu({
        projectId: state.projectId,
        studentIds: state.chooseDeleteOne,
      })
        .then((res) => {
          console.log(res, "单个删除成功");
          message.success("删除成功");
          getStu();
        })
        .catch((err) => {
          console.log(err, "单个删除失败");
          message.warning("删除失败");
        });
      state.chooseDeleteOne = [];
    };
    //批量删除学员弹窗
    const showAllDelete = () => {
      if (state.selectedRows.length == 0) {
        message.destroy();
        return message.warning("请选择要删除的学员");
      } else {
        state.allDelete = true;
      }
    };
    //点击取消的批量删除弹窗
    const closeCancelDelete = () => {
      state.allDelete = false;
    };
    //点击确定的批量删除弹窗
    const closeAllDelete = () => {
      state.loading = true;
      deleteStu({
        projectId: state.projectId,
        studentIds: state.selectedRows,
      })
        .then((res) => {
          console.log(res, "删除成功");
          message.success("删除成功");
          state.selectedRows = [];
          getStu();
        })
        .catch((err) => {
          console.log(err, "删除失败");
          message.warning("删除失败");
        });
      state.allDelete = false;
    };
    const handleChangeGood = (value) => {
      console.log(value, state.valuegood, 11111);
    };
    const handleChangeBum = (value) => {
      console.log(value, 22222);
    };
    //把数据放到state里
    const getTableDataList = (tableData) => {
      let data = tableData;
      let array = [];
      data.map((value) => {
        let obj = {
          key: value.studentId,
          projectId: value.projectId, //项目id
          groupId: value.groupId, //小组id
          group: value.groupName, //小组名
          studentId: value.studentId, //学生id
          currentStageId: value.currentStageId, //当前关卡id
          name: value.name, //用户名
          bum: value.userInfoBo.deptName, //部门
          gangw: value.userInfoBo.jobName, //岗位
          completeStageCnt: value.completeStageCnt, //当前完成阶段数
          totalStageCnt: value.totalStageCnt, //总阶段数
          excellent: value.topFlag == 1, //是否优秀学员
          progress: value.completeStageCnt + "/" + value.totalStageCnt,
          putin:
            value.source == 0
              ? "报名加入"
              : value.source == 1
              ? "指定添加"
              : value.source == 2
              ? "组织添加"
              : value.source == 3
              ? "受众添加"
              : "-", //加入方式
          stutime: toDate(value.beginStudyTime, "Y-M-D"), //开始学习时间
        };
        array.push(obj);
        console.log("stutime", obj.stutime);
      });
      state.tabledata = array;
    };
    //把小组列表信息放到state里
    const setGroupList = (tableData) => {
      console.log("tableDatatableDatatableData", tableData);
      let data = tableData;
      let array = [];
      data.map((value) => {
        let obj = {
          projectId: value.projectId, //项目id
          projectGroupId: value.id, //小组id
          groupName: value.groupName, //小组名称
          leaderId: value.leaderId, //组长id
          leaderName: value.leaderName, //组长名称
          groupMemberCount: value.groupMemberCount, //组员人数 == 1 ? "指定添加" : "随机分组",
          source: value.source,
          completeTaskCnt: value.completeTaskCnt, //完成任务数
          totalTaskCnt: value.totalTaskCnt, //累计任务数
          completeRatio: value.completeRatio ? value.completeRatio : 0, //完成比例
        };
        array.push(obj);
      });
      state.groupList = array;
      console.log("编辑小组", state.groupList);
    };
    //学员搜索
    const searchStu = () => {
      let obj = {
        deptIds: [], //部门
        groupName: state.valuestugroup,
        name: state.valuestun,
        pageNo: state.currentPageStu,
        pageSize: 10,
        projectId: state.projectId,
        topFlag:
          state.valuegood == "优秀学员"
            ? 1
            : state.valuegood == "普通学员"
            ? 0
            : state.valuegood == "全部"
            ? ""
            : "",
      };
      //重新获取列表
      getStu(obj);
    };
    //勾选学员
    const onSelectChange = (selectedRowKeys, selectedRows) => {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      state.selectedRowKeys = selectedRowKeys;
      state.choosed = state.selectedRowKeys.length;
      console.log("ssss", selectedRows);
      state.selectedRows = [];
      console.log("before", state.selectedRows);
      // let arr = [];
      //遍历 插入到state.selectedRows里
      selectedRows.map((item) => {
        console.log(item.studentId);
        state.selectedRows.push(item.studentId);
        // arr.push(item.studentId);
        // console.log("asdfasdf", arr);
      });
      // state.selectedRows = arr;
      console.log("after", state.selectedRows);
      // console.log(state.selectedRows[0]);
      // console.log("dddd",selectedRows.)
      //判断是否为数组
      // console.log("wwwwww", Object.prototype.toString.call(state.selectedRows));
    };
    //清空所选的学员
    const clearChooseStu = () => {
      Modal.confirm({
        title: "确定清空所有学员吗？",
        onOk: async () => {
          state.tabledata = [];
          student.studentDelAll({ id: state.projectId, type: 1 });
        },
        bodyStyle: "margin-top:70%",
      });
    };
    //学员重置
    const resetCancel = () => {
      (state.valuestun = null),
        (state.valuestugroup = null),
        (state.valuestub = null),
        (state.valuegood = null);
      getStu();
    };
    //获取学员列表
    const getStu = (obj) => {
      state.loading = true;
      let objf = obj || {
        deptIds: [], //部门
        groupId: 0,
        groupName: "",
        name: "",
        pageNo: state.currentPageStu,
        pageSize: 10,
        projectId: state.projectId,
        topFlag: "",
      };
      getProjStu(objf)
        .then((res) => {
          console.log("获取学员列表", res.data);
          state.total = res.data.data.total;
          let arr = res.data.data.rows;
          getTableDataList(arr);
          //
          state.loading = false;
        })
        .catch((err) => {
          console.log("获取学员列表失败", err);
        });
    };
    //获取项目信息
    const getTaskInfo = () => {
      getTask({
        projectId: state.projectId,
      }).then((res) => {
        if (
          res.data.data.projectAuditLogDtoList &&
          res.data.data.projectAuditLogDtoList.length
        ) {
          let dataset = res.data.data.projectAuditLogDtoList;
          state.passInfo = dataset[dataset.length - 1].description;
        }
        state.stage = res.data.data.stageList.map((e) => ({
          id: e.stageId,
          name: e.name,
        }));
        let info = res.data.data.projectInfo;
        console.log(121, info);
        state.permissions = info.permissions;
        let start = info.beginTime;
        let end = info.endTime;
        state.tstartTime = info.beginTime;
        state.tendTime = info.endTime;
        state.tsourceBelong =
          (info.sourceBelongFullName || "") + info.sourceBelongName;
        state.parentId = info.parentId;
        state.name = info.name;
        state.startTime = start;
        state.endTime = end;
        state.manager = info.manager;
        state.remark = info.remark;
        state.level = info.level;
        state.tlevel = info.level;
        state.systemId = info.systemId;
        state.tsystemId = info.systemId;
        state.checkedSty = info.courseSyncFlag == 1;
        state.courseSyncFlag = info.courseSyncFlag;
        state.checkedBOEU = info.boeFlag == 1;
        state.boeFlag = info.boeFlag;
        state.picUrl = info.picUrl;
        state.managerId = info.managerId;
        state.notice = info.notice;
        state.status = info.status;
        state.type = info.type;
        state.category = info.category;
        state.noticeFlag = info.noticeFlag;
        state.switchopen = info.attachSwitch == 1;
        state.docChecked = info.attachSwitch === 1;
        state.hasTask = !!res.data.data?.stageList.some(
          ({ taskList }) => taskList.length
        );
        console.log(111111111111);
        console.log(state.hasTask);
        // state.attach = info.attach;
        // state.templateId = info.templateId;
        state.sourceBelong =
          (info.sourceBelongFullName || "") + info.sourceBelongName;
        // state.fileList=info.attach.split(",")
        state.fileList = info.attach ? JSON.parse(info.attach) : [];
      });
    };
    //获取小组列表
    const getGroup = (obj) => {
      let objf = obj || {
        name: "",
        pageNo: state.currentPageStu,
        pageSize: 10,
        projectId: state.projectId,
      };
      getGroupList(objf).then((res) => {
        state.groupPageList = res.data.data.rows;
        setGroupList(res.data.data.rows);
      });
    };
    //删除小组
    const deleteGroupBtn = (projectGroupId) => {
      deleteGroup({ projectGroupId }).then(() => {
        message.success("删除小组成功");
        getGroup();
      });
    };
    //创建小组
    const createGroup = async () => {
      debugger;
      console.log("state.groupPageList" + state.groupPageList);
      const id = state.groupInfo.id;
      const d = state.groupPageList
        .filter((item) => item.id !== id)
        .filter((item) => item.leaderId === state.groupInfo.leaderId);
      if (state.isEdit) {
        if (d.length > 0 && d[0].id !== id) {
          return message.warn(d[0].leaderName + "已是小组长，请重新选择");
        }
        // 小组人数只能由小改大，不能由大改小
        if (state.groupMemberCountContrast > state.groupInfo.groupMemberCount) {
          return message.warn("当前不支持修改组员人数小于原组员数量。");
        }
      } else {
        if (d.length > 0) {
          return message.warn(d[0].leaderName + "已是小组长，请重新选择");
        }
      }

      state.isEdit = false;
      await editGroup({ ...state.groupInfo, projectId: state.projectId });
      message.success(id ? "小组编辑成功" : "小组创建成功");
      getGroup();
      console.log("state.groupPageList:");
      getStu();
      closeModal2();
    };
    //搜索小组重置
    const resetGroupName = () => {
      state.valuestugn = null;
      getGroup();
    };
    //小组搜索
    const searchGroup = () => {
      let obj = {
        name: state.valuestugn,
        pageNo: 1,
        pageSize: 10,
        projectId: state.projectId,
      };
      getGroup(obj);
    };
    //分页
    const changePaginationStu = (page) => {
      state.currentPageStu = page;
      getStu();
    };
    const changeGrouped = (data) => {
      console.log(data);
      getStu();
    };
    //导入小组长
    const importGroupLeader = () => {
      state.ImpoterGroupLeaderV = true;
    };
    //导出小组
    const exportGroup = () => {
      window.open(
        `${process.env.VUE_APP_BASE_API}/admin/studentGroup/exportGroup/${state.projectId}`
      );
    };
    //end---------学员------
    //start---------项目概览
    // 获取项目概览
    const getOverview = () => {
      overview({ projectId: state.projectId })
        .then((res) => {
          Object.keys(res.data.data.projectInfoOverview).forEach((item) => {
            levelList.projectInfoOverview[item] =
              res.data.data.projectInfoOverview[item] || 0;
          });
          Object.keys(res.data.data.stageOverviewList).forEach((item) => {
            levelList.stageOverviewList[item] =
              res.data.data.stageOverviewList[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);
        });
    };
    //end---------项目概览
    // 设置上传图片开关
    const checkedClose = (data, a) => {
      console.log(data, a);
      state.docChecked = data;
      state.switchopen = data;
      // 更新开关状态
      editProjDoc({
        attachSwitch: state.switchopen ? 1 : -1,
        boeFlag: state.boeFlag,
        category: state.category,
        courseSyncFlag: state.courseSyncFlag,
        level: state.tlevel,
        manager: state.manager,
        managerId: state.managerId,
        name: state.name,
        notice: state.notice,
        noticeFlag: state.noticeFlag,
        parentId: state.parentId,
        picUrl: state.picUrl,
        projectId: Number(state.projectId),
        remark: state.remark,
        sourceBelongId: Number(state.tsourceBelong),
        status: state.status,
        systemId: state.tsystemId,
        templateId: state.templateId || 0,
        type: state.type,
      })
        .then((res) => {
          console.log("上传成功", res);
        })
        .catch((err) => {
          console.log("上传失败了", err);
        });
    };
    const handleChange = ({ file, fileList }) => {
      let list = [];
      if (file.status !== "uploading") {
        console.log("上传的list", fileList);
        console.log(file);
        list = state.fileList;
        console.log("list", list);
        let str = JSON.stringify(list);
        console.log("str", str);
        //要编辑项目
        console.log("编辑的项目信息", {
          attach: str,
          // beginTime: state.tstartTime.slice(0, 10),
          boeFlag: state.boeFlag,
          category: state.category,
          courseSyncFlag: state.courseSyncFlag,
          // endTime: state.tendTime.slice(0, 10),
          level: state.tlevel,
          manager: state.manager,
          managerId: state.managerId,
          name: state.name,
          notice: state.notice,
          noticeFlag: state.noticeFlag,
          parentId: state.parentId,
          picUrl: state.picUrl,
          projectId: Number(state.projectId),
          id: Number(state.projectId),
          remark: state.remark,
          sourceBelongId: Number(state.tsourceBelong),
          status: state.status,
          systemId: state.tsystemId,
          templateId: state.templateId || 0,
          type: state.type,
        });
        editProjDoc({
          attachSwitch: state.switchopen ? 1 : -1,
          attach: str,
          boeFlag: state.boeFlag,
          category: state.category,
          courseSyncFlag: state.courseSyncFlag,
          level: state.tlevel,
          manager: state.manager,
          managerId: state.managerId,
          name: state.name,
          notice: state.notice,
          noticeFlag: state.noticeFlag,
          parentId: state.parentId,
          picUrl: state.picUrl,
          projectId: Number(state.projectId),
          id: Number(state.projectId),
          remark: state.remark,
          sourceBelongId: Number(state.tsourceBelong),
          status: state.status,
          systemId: state.tsystemId,
          templateId: state.templateId || 0,
          type: state.type,
        })
          .then((res) => {
            console.log("上传成功", res);
          })
          .catch((err) => {
            console.log("上传失败了", err);
          });
      }
      if (file.status === "done") {
        message.success(`${file.name} 文件上传成功`);
      } else if (file.status === "error") {
        message.error(`${file.name} 文件上传失败.`);
      }
    };
    //设置里的编辑按钮
    const toEdit = () => {
      if (state.parentId == "0") {
        routered.push({
          path: "/projectadd",
          query: {
            projectId: state.projectId,
            name: state.name,
          },
        });
      } else {
        if (state.isbj !== null) {
          routered.push({
            path: "/classadd",
            query: {
              projectId: state.projectId,
              // name: state.paraentName,
              name: state.pN,
              edit: 0,
            },
          });
        } else {
          routered.push({
            path: "/sonproject",
            query: {
              projectId: state.projectId,
              name: state.name,
              edit: 0,
            },
          });
        }
      }
    };
    const reget = () => {
      console.log("state.projectId", state.projectId);
      getTask({
        projectId: state.projectId,
        useTask: "N",
      }).then((res) => {
        console.log("获取项目状态", res);
        state.action = res.data.data.projectInfo.status;
        state.act =
          state.action == 2
            ? "发布"
            : state.action == 0
            ? "提交审核"
            : state.action == 1
            ? "撤回审核"
            : state.action == 3
            ? "撤回发布"
            : state.action == -1
            ? ""
            : "-";
      });
    };
    //打开发布弹窗
    const showProjectPub = () => {
      state.projectPub = true;
      state.projectPubLoading = true;
      state.releaseProjectId = state.projectId;
      state.releaseProjectName = state.name;
      // state.releaseProjectTime = state.startTime;
      // console.log("object", object);
      apiproj.getProjectCount(state.projectId).then((res) => {
        console.log("获取关卡、任务、学员统计数据", res.data);
        // state.projectStudentsNum = res.data.students;
        // state.projectStages = res.data.stages;
        // state.projectTasks = res.data.tasks;
        state.projectStages = res.data.data.stages;
        state.projectTasks = res.data.data.tasks;
      });
      //获取学员总数
      let obj = {
        pageNo: 0,
        pageSize: 10,
        pid: state.projectId,
        type: 1,
      };
      getStuPage(obj)
        .then((res) => {
          if (res.data.code === 200) {
            // console.log("res", res.data);
            state.projectStudentsNum = res.data.data.total
              ? res.data.data.total
              : 0;
            state.projectPubLoading = false;
          }
        })
        .catch((err) => {
          console.log("获取学员人数失败", err);
        });
      //获取阶段及任务总数
    };
    //关闭发布弹窗
    const closeProjectPub = () => {
      state.projectPub = false;
    };
    //确认发布项目
    const releaseProject = () => {
      console.log("点击发布");
      let obj = {
        projectId: state.releaseProjectId,
        type: 4,
      };
      apiproj
        .handleProject(obj)
        .then((res) => {
          console.log("发布成功", res);
          message.destroy();
          message.success("发布成功");
          state.projectPub = false;
          reget();
        })
        .catch((err) => {
          console.log("发布失败", err);
        });
    };
    //打开撤回弹窗
    const showBackModal = () => {
      state.backModal = true;
    };
    //关闭撤回弹窗
    const closeBackModal = () => {
      state.backModal = false;
    };
    const recallProject = () => {
      let obj = {
        projectId: state.projectId,
        type: -4,
      };
      apiproj
        .handleProject(obj)
        .then((res) => {
          console.log("撤回成功", res);
          message.destroy();
          message.success("撤回成功");
          state.backModal = false;
          reget();
        })
        .catch((err) => {
          console.log("撤回失败", err);
        });
    };
    //打开撤回审核弹窗
    const showRecallReviewModal = () => {
      state.recallReviewModal = true;
    };
    //确认撤回审核
    const recallReviewProject = () => {
      let obj = {
        projectId: state.projectId,
        type: -3,
      };
      console.log("撤回成功obj", obj);
      apiproj
        .handleProject(obj)
        .then((res) => {
          console.log("撤回成功", res);
          message.destroy();
          message.success("撤回成功");
          state.recallReviewModal = false;
          reget();
        })
        .catch((err) => {
          console.log("撤回成功", err);
        });
    };
    //关闭提交审核弹窗
    const closeRecallReviewModal = () => {
      state.recallReviewModal = false;
    };
    //关闭结束弹窗
    const closeStopModal = () => {
      state.stopModal = false;
    };
    //确认结束
    const finishProject = () => {
      let obj = {
        projectId: state.projectId,
        type: -1,
      };
      apiproj
        .handleProject(obj)
        .then((res) => {
          console.log("结束成功", res);
          message.destroy();
          message.success("已结束");
          state.stopModal = false;
          reget();
        })
        .catch((err) => {
          console.log("结束失败", err);
        });
    };
    //打开结束弹窗
    const showStopModal = () => {
      state.stopModal = true;
    };
    //打开存为模版弹窗
    const showStartModal = () => {
      state.startModal = true;
    };
    //关闭存为模版弹窗
    const closeStartModal = () => {
      state.startModal = false;
    };
    //确认存为模版
    const templateProject = () => {
      let obj = {
        projectId: state.projectId,
        type: 1,
      };
      apiproj
        .handleProject(obj)
        .then((res) => {
          console.log("模版保存成功", res);
          message.destroy();
          message.success("模版保存成功");
          state.startModal = false;
          reget();
        })
        .catch((err) => {
          console.log("模版保存失败", err);
        });
    };
    //删除文件
    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);
      editProjDoc({
        attach: str,
        beginTime: state.tstartTime.slice(0, 10),
        // beginTime:1668643200,
        boeFlag: state.boeFlag,
        category: state.category,
        courseSyncFlag: state.courseSyncFlag,
        endTime: state.tendTime.slice(0, 10),
        // endTime: 1668816000,
        level: state.tlevel,
        manager: state.manager,
        managerId: state.managerId,
        name: state.name,
        notice: state.notice,
        noticeFlag: state.noticeFlag,
        parentId: state.parentId,
        picUrl: state.picUrl,
        projectId: state.projectId,
        remark: state.remark,
        sourceBelongId: Number(state.tsourceBelong),
        status: state.status,
        systemId: state.tsystemId,
        templateId: state.templateId || 0,
        type: state.type,
      })
        .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],
          projectId: state.projectId,
          studentList: res[0],
          projectGroupId: 0,
        };
        console.log("obj", obj);
        state.loading = true;
        api
          .addStudentProject(obj)
          .then((res) => {
            console.log("添加学员成功", res);
            message.success("添加学员成功");
            getStu();
          })
          .catch((err) => {
            console.log("添加学员失败", err);
          });
      }
    );
    onMounted(() => {
      // getStu();
      getTaskList();
      getTaskInfo();
      getGroup();
      getOverview();
      reget();
      // let a = state.attach.split(",")
      // state.fileList = a
    });
    const checkType = (type) => {
      let typeRules = [
        "",
        "在线",
        "面授",
        "案例",
        "作业",
        "考试",
        "直播",
        "外链",
        "讨论",
        "活动",
        "测评",
        "评估",
        "投票",
        "项目",
      ];
      return typeRules[type];
    };
    // 判断当前任务已结束及时间意义上的结束 提示用户
    function judgeTaskIsEnd(type, endTimes, status) {
      // type 任务类型 endTime 结束时间 status 任务状态 (状态  0 未完成 1 已完成 2 未开始 3 已结束)
      console.log(type, endTimes, status);
      let isEnd = false;
      let nowTime = new Date().getTime();
      let endTime = new Date().getTime(endTimes);
      switch (type) {
        case 1:
          status == -1
            ? (isEnd = true)
            : nowTime > endTime
            ? (isEnd = true)
            : (isEnd = false);
          break;
        case 3:
          status == -1
            ? (isEnd = true)
            : nowTime > endTime
            ? (isEnd = true)
            : (isEnd = false);
          break;
        case 5:
          status == -1
            ? (isEnd = true)
            : nowTime > endTime
            ? (isEnd = true)
            : (isEnd = false);
          break;
        case 7:
          status == -1
            ? (isEnd = true)
            : nowTime > endTime
            ? (isEnd = true)
            : (isEnd = false);
          break;
        case 10:
          status == -1
            ? (isEnd = true)
            : nowTime > endTime
            ? (isEnd = true)
            : (isEnd = false);
          break;
      }
      return isEnd;
    }
    //显示二维码弹窗
    const showCodeModel = (item) => {
      if (judgeTaskIsEnd(item.type, state.endTime, state.status)) {
        message.error("当前任务已结束");
        return;
      }
      console.log("item", item);
      let codeUrl = "";
      // 在线课 停用 -- 暂时没有在线课停用标记
      if (item.type == 1) {
        if (item.taskStatus == 1 || item.taskStatus == 2)
          return message.error("该任务无法学习，请联系管理员进行替换。");
        codeUrl =
          window.location.protocol +
          process.env.VUE_APP_ONLINE_CLASS_URL +
          item.targetId;
      }
      if (item.type == 2) {
        let date1 = new Date(item.endTime).getTime();
        let date2 = new Date().getTime();
        if (date1 < date2) return message.warning("当前面授课已结束");
        if (item.taskStatus == 1 || item.taskStatus == 2)
          return message.error("该任务无法学习，请联系管理员进行替换。");
        codeUrl =
          window.location.protocol +
          process.env.VUE_APP_H5 +
          "/faceteach?type=1&courseId=" +
          item.courseId +
          "&id=" +
          item.id;
      }
      if (item.type == 3) return message.error("请在pc端完成");
      if (item.type == 4) {
        let date1 = new Date(item.endTime).getTime();
        let date2 = new Date().getTime();
        if (date1 < date2) return message.warning("当前作业已结束");
        codeUrl =
          window.location.protocol +
          process.env.VUE_APP_H5 +
          "/homeworkpage?courseId=" +
          item.courseId +
          "&type=1&id=" +
          item.id;
      }
      // 考试 停用
      if (item.type == 5) {
        if (item.taskStatus == 1 || item.taskStatus == 2)
          return message.error("该任务无法学习，请联系管理员进行替换。");
        // 此处判断外部考试跳转
        if (item.startTime == null || item.endTime == null) {
          codeUrl =
            window.location.protocol +
            process.env.VUE_APP_H5 +
            "/externalexam?type=1&courseId=" +
            item.courseId;
        } else {
          codeUrl =
            window.location.protocol +
            process.env.VUE_APP_EXAM_DETAIL_URL +
            item.targetId;
        }
      }
      // 直播结束时间
      if (item.type == 6) {
        let date1 = new Date(item.endTime).getTime();
        let date2 = new Date().getTime();
        if (date1 < date2) return message.warning("当前直播已结束");
        codeUrl =
          window.location.protocol +
          process.env.VUE_APP_H5 +
          "/liveboradcast?courseId=" +
          item.courseId +
          "&type=1&id=" +
          item.id;
      }
      // 外链
      if (item.type == 7) {
        codeUrl =
          window.location.protocol +
          process.env.VUE_APP_H5 +
          "/outerchain?courseId=" +
          item.courseId +
          "&type=1&id=" +
          item.id +
          "&chapterOrStageId=" +
          item.stageId +
          "&infoId=" +
          state.projectId;
      }
      //讨论
      if (item.type == 8) {
        codeUrl =
          window.location.protocol +
          process.env.VUE_APP_H5 +
          "/discusspage?courseId=" +
          item.courseId +
          "&type=1&id=" +
          item.id;
      }
      //活动
      if (item.type == 9) {
        let date1 = new Date(item.endTime).getTime();
        let date2 = new Date().getTime();
        if (date1 < date2) return message.warning("当前活动已结束");

        codeUrl =
          window.location.protocol +
          process.env.VUE_APP_H5 +
          "/activitiespage?courseId=" +
          item.courseId +
          "&type=1&id=" +
          item.id;
      }
      //活动
      if (item.type == 10) {
        codeUrl =
          window.location.protocol +
          process.env.VUE_APP_H5 +
          "/evaluation?courseId=" +
          item.courseId +
          "&type=1&evaType=" +
          item.evaType +
          "&targetId=" +
          item.targetId;
      }

      // 评估 停用
      if (item.type == 11) {
        if (item.taskStatus == 1 || item.taskStatus == 2)
          return message.error("该任务无法学习，请联系管理员进行替换。");

        codeUrl =
          window.location.protocol +
          process.env.VUE_APP_H5 +
          "/investigatpage?courseId=" +
          item.courseId +
          "&type=1&id=" +
          item.id +
          "&chapterOrStageId=" +
          item.stageId +
          "&infoId=" +
          state.projectId;
      }
      // 投票
      if (item.type == 12) {
        // console.log('item',item)
        codeUrl =
          window.location.protocol +
          process.env.VUE_APP_H5 +
          "/ballotpage?courseId=" +
          item.courseId +
          "&type=1&btype=2&id=" +
          item.id +
          "&chapterOrStageId=" +
          item.stageId +
          "&infoId=" +
          state.projectId;
      }

      state.codevisible = true;
      let obj = {
        title: "[" + checkType(item.type) + "]二维码",
        name: item.name,
        url: codeUrl,
      };
      state.codeInfo = obj;
    };
    //显示二维码弹窗
    const showCodeModel2 = () => {
      state.codevisible = true;
      let obj = {
        title: "[项目]二维码",
        name: state.name,
        url:
          window.location.protocol +
          process.env.VUE_APP_H5 +
          "/projectdetails?type=1&projectId=" +
          state.projectId,
      };
      state.codeInfo = obj;
    };
    function settingTopFlag(record) {
      record.topFlag ? (state.canclestu1 = true) : (state.canclestu = true);
      state.editRecord = record;
    }
    function showStudent(record) {
      state.Seevisible = true;
      state.checkStuId = record.studentId;
    }
    // 共享文档文件下载
    const downloadFile = (url) => {
      url && window.open(url);
      console.log(url);
      window.open(
        window.location.protocol +
          process.env.VUE_APP_BOE_API_URL +
          process.env.VUE_APP_FILE_PATH +
          url
      );
    };
    function stageChange(item, index) {
      state.choosedStageName = item.name;
      state.choosedStageId = item.stageId;
      state.choosedStageIndex = index;
    }
    {
      /* 证书 */
    }
    //获取证书列表
    const getCertificate = () => {
      let obj = {
        pid: state.projectId,
      };
      api
        .certificate(obj)
        .then((res) => {
          console.log("获取证书列表", res);
          if (res.data.code === 200) {
            state.certificatelist = res.data.data.records;
          }
        })
        .catch((err) => {
          console.log("获取证书列表失败", err);
        });
    };
    getCertificate();
    //查看证书
    const checkCertificate = (item) => {
      console.log("点击查看证书");
      state.ischeckCertificate = true;
      state.ACertificateCheckId = item.id;
    };
    const addCertificate = () => {
      console.log("点击添加证书");
      state.ACertificate = true;
      state.ACertificateEdit = false;
      state.ACertificateEditId = null;
    };
    const editCertificate = (item) => {
      console.log("点击编辑证书", item);
      state.ACertificate = true;
      state.ACertificateEdit = true;
      state.ACertificateEditId = item.id;
    };
    //点击删除证书
    const deleteCertificate = (item) => {
      console.log("要删除的证书", item);
      let obj = {
        id: item.id,
      };
      api
        .certificatedel(obj)
        .then((res) => {
          console.log("删除证书结果", res);
          if (res.data.code === 200) {
            message.success("删除成功");
            getCertificate();
          }
        })
        .catch((err) => {
          console.log("删除证书失败", err);
        });
    };
    function previewPic() {
      state.modal1Visible = true;
    }
    return {
      ...toRefs(state),
      ...toRefs(levelList),
      stageChange,
      showStudent,
      settingTopFlag,
      totask,
      tostudent,
      showModal,
      closeModal,
      showModal1,
      closeModal1,
      showModal2,
      closeModal2,
      showModal3,
      closeModal3,
      showDeleteOne,
      closeDeleteOne,
      showOnline,
      showFace,
      showSubset,
      showMemberList,
      showFS,
      showAA,
      showWork,
      showVote,
      showTest,
      showEval,
      showStuAdd,
      showImportStu,
      showSeeStu,
      showChangeGroup,
      showFaceIn,
      edit_hShow,
      edit_exit,
      cloradio1,
      cloradio2,
      studentColumns,
      delete_exit,
      showzhibModal,
      showhuodModal,
      closehuodModal,
      closezhibModal,
      showCodeModal,
      tabsChange,
      getTaskList,
      rankTimeChange,
      getbillboard,
      rankSearch,
      rankReset,
      handleChangeGood,
      getStu,
      getTableDataList,
      searchStu,
      handleChangeBum,
      resetCancel,
      showAllDelete,
      closeAllDelete,
      onSelectChange,
      closeCancelDelete,
      clearChooseStu,
      closeDeleteOneConfirm,
      showEditProj,
      getTaskInfo,
      getGroup,
      getGroupList,
      setGroupList,
      deleteGroupBtn,
      createGroup,
      createG,
      resetGroupName,
      searchGroup,
      cancelyou,
      cancelcanyou,
      showChangeGroupModal,
      changePaginationStu,
      handleChange,
      toEdit,
      reget,
      showProjectPub,
      closeProjectPub,
      releaseProject,
      showBackModal,
      closeBackModal,
      recallProject,
      closeStopModal,
      finishProject,
      showStopModal,
      showStartModal,
      closeStartModal,
      templateProject,
      changeGrouped,
      importGroupLeader,
      exportGroup,
      deFile,
      toDate,
      routered,
      checkedClose,
      submitExamine,
      closeReviewModal,
      showRecallReviewModal,
      recallReviewProject,
      closeRecallReviewModal,
      submitReviewProject,
      showCodeModel,
      showCodeModel2,
      checkType,
      downloadFile,
      checkPer,
      addCertificate,
      editCertificate,
      deleteCertificate,
      previewPic,
      getCertificate,
      checkCertificate,
      scoreRank,
      jfSelectChange,
      completionRank,
      jdSelectChange,
      jdSelectChange1,
      studytimeRank,
      xsSelectChange,
    };
  },
};
</script>
<style lang="scss">
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
  clear: both;
}

.ant-upload.ant-upload-select-picture-card {
  width: 170px;
  height: 200px;
}

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

      padding: 0;

      .modalHeader {
        background: linear-gradient(
          0deg,
          rgba(78, 166, 255, 0) 0%,
          rgba(78, 166, 255, 0.2) 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 #4ea6ff;
            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 #4ea6ff;
            border-radius: 4px;
            color: #ffffff;
            font-size: 14px;
            align-items: center;
            //line-height: 36px;
            background: #4ea6ff;
          }
        }
      }
    }
  }
}

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

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

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

      .ant-modal-close {
        margin-right: 18px;
        margin-top: 5px;
      }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      .ant-modal-close {
        margin-right: 18px;
        margin-top: 5px;
      }

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

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

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

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

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

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

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

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

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

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

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

      padding: 0;

      .modalMain {
        display: flex;
        flex-direction: column;
        align-items: center;

        .name {
          width: 78%;
          // background-color: lightcoral;
          display: flex;
          justify-content: right;
          margin-top: 32px;
          align-items: center;
          height: 40px;

          // border: 1px solid black;
          .inname {
            color: #000000;
            font-size: 14px;
            margin-left: 7px;
          }

          .in {
            margin-left: 14px;
            width: 81%;

            .ant-input {
              border-radius: 5px;
              // height: 120%;
              width: 100%;
              height: 30px;
            }

            .ant-select {
              border-radius: 5px;
              // height: 120%;
              width: 100%;
              height: 40px;

              .ant-select-selector {
                border-radius: 8px;
                // height: 120%;
                width: 100%;
                height: 40px;
              }
            }
          }
        }

        .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 #4ea6ff;
            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 #4ea6ff;
            border-radius: 4px;
            color: #ffffff;
            font-size: 14px;
            align-items: center;
            //line-height: 36px;
            background: #4ea6ff;
          }
        }
      }
    }
  }
}

.projectPub {
  .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;
          text-align: center;
        }

        .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 #4ea6ff;
            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 #4ea6ff;
            border-radius: 4px;
            color: #ffffff;
            font-size: 14px;
            align-items: center;
            //line-height: 36px;
            background: #4ea6ff;
          }
        }
      }
    }
  }
}

.taskpage {
  width: 100%;
  display: flex;
  flex-direction: column;

  //position: relative;
  .addhead {
    width: 100%;
    height: 130px;
    // background-color: lightgreen;
    display: flex;
    justify-content: space-between;
    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;
      display: flex;
      flex: 1;
      flex-direction: column;

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

      .fort {
        display: flex;
        flex-wrap: wrap;
        color: #878b92;
        font-size: 14px;
        margin-top: 2px;
      }
    }

    @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: 10px;
      }

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

  .tableBox {
    margin: 20px 38px 30px;

    .ant-table-thead > tr > th {
      font-size: 14px;
      font-weight: 400;
      color: #999ba3;
      line-height: 36px;
      padding: 5px 16px;
      background-color: #eff4fc;
    }
  }

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

  .content {
    //margin: 0 37px;
    .ant-tabs-top > .ant-tabs-nav::before,
    .ant-tabs-bottom > .ant-tabs-nav::before,
    .ant-tabs-top > div > .ant-tabs-nav::before,
    .ant-tabs-bottom > div > .ant-tabs-nav::before {
      border-bottom: 0px;
    }

    .ant-tabs-nav-wrap {
      margin-left: 30px;
      margin-top: 10px;
    }

    .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: #4ea6ff;
        width: 130px;
        height: 40px;
        border-radius: 8px;
        border: 1px solid #4ea6ff;
        color: #ffffff;
        cursor: pointer;
      }

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

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

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

      // .edit:hover {
      //   color: #ffffff;
      //   background-color: #4ea6ff;
      //   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;
          }
        }
      }
    }

    .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: #4ea6ff;
        line-height: 36px;

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

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

    .taskbox {
      width: 412px;
      height: 160px;
      border-radius: 10px;
      position: relative;
      margin-left: 68px;
      margin-bottom: 40px;
      margin-top: 32px;
      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;
      }
    }

    .stage {
      display: flex;
      height: 49px;
      background-color: #eff4fc;
      align-items: center;
      margin-top: 20px;
      margin-left: 38px;
      margin-right: 38px;

      .stageimg {
        margin-left: 31px;
      }

      .stagename {
        color: #4ea6ff;
        font-size: 16px;
        padding-left: 9px;
        line-height: 36px;
      }
    }

    .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;
        width: 120px;

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

        .icontext {
          //positipn: absolute;
          color: #999ba3;
          font-size: 14px;
          margin-left: 12px;
          width: 120px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .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;
        width: 100px;

        .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: 240px;

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

  .content3 {
    margin-top: 20px;

    .ant-tabs-tab-btn {
      font-size: 18px;
      font-weight: 700;
    }

    .group {
      display: flex;

      .groupleft {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-left: 32px;

        .groupname {
          height: 22px;
          width: 70px;
          color: #000000;
          font-size: 14px;
        }

        .ant-input {
          border-radius: 8px;
          width: 264px;
          height: 40px;
        }

        .ant-select-selector {
          border-radius: 8px;
          width: 264px;
          height: 40px;
          padding-top: 5px;
        }
      }

      .groupright {
        display: flex;
        margin-left: 48px;

        .btn1 {
          width: 100px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16px;
          border: 1px solid #4ea6ff;
          border-radius: 8px;
          background: #4ea6ff;
          cursor: pointer;

          .btn1text {
            color: #ffffff;
            margin-left: 5px;
            font-size: 14px;
          }
        }

        .btn2 {
          width: 100px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 32px;
          border: 1px solid #4ea6ff;
          border-radius: 8px;
          cursor: pointer;
          background: #ffffff;

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

    .second2 {
      display: flex;
      margin: 30px 0 0 32px;

      .btn1 {
        width: 130px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;
        border: 1px solid #4ea6ff;
        border-radius: 8px;
        background: #4ea6ff;
        cursor: pointer;

        .btn1text {
          color: #ffffff;
          margin-left: 5px;
          font-size: 14px;
        }
      }

      .btn2 {
        width: 130px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;
        border: 1px solid #4ea6ff;
        border-radius: 8px;
        cursor: pointer;
        background: #ffffff;

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

    .talk {
      margin-top: 24px;
      margin-left: 32px;
      margin-right: 32px;
      margin-bottom: 11px;
      position: relative;
      //width: 90%;
      height: 40px;
      background: #f5faff;
      border: 1px solid #4ea6ff;
      // opacity: 0.22;
      display: flex;
      align-items: center;

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

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

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

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

        .th {
          color: #4ea6ff;
        }
      }

      .clear {
        cursor: pointer;
        font-size: 14px;
        color: #387df7;
        line-height: 24px;
        position: absolute;
        right: 20px;
      }
    }

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

      .ant-table-tbody > tr > td {
        border-bottom: 1px solid #f0f6fc;
        color: rgba(0, 0, 0, 0.65);
      }

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

      .ant-table-tbody
        > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
        > td {
        background: rgba(250, 250, 250, 1);
      }

      .nostu {
        width: 100%;

        .nostuimg {
          margin: 75px auto;
          width: 412px;
          height: 212px;
          background-image: url(@/assets/images/taskpage/nostu.png);
          background-size: 100% 100%;
        }
      }

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

      .operation {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #4ea6ff;

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

          .jc {
            margin-left: 20px;
            cursor: pointer;
            white-space: nowrap;
          }
        }

        .tableSelect {
          // margin-right: 10px;
          margin-left: -5px;
          display: flex;
          align-items: center;
          justify-content: right;
          white-space: nowrap;
        }
      }

      .studentName {
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.65);
        line-height: 22px;
      }

      .studentExcellent {
        width: 64px;
        height: 24px;
        border-radius: 2px;
        border: 1px solid #ffb64e;
        background-color: rgba(255, 182, 78, 0.1);
        margin-left: 24px;
        display: flex;
        align-items: center;

        .studentExcellentImg {
          width: 16px;
          height: 16px;
          margin-left: 7px;
        }

        .studentExcellentT {
          font-size: 12px;
          font-weight: 400;
          color: #ffb64e;
          line-height: 17px;
          margin-left: 3px;
        }
      }

      .studentopea1 {
        font-size: 14px;
        font-weight: 400;
        color: #387df7;
        line-height: 22px;
        padding-right: 8px;
        border-right: 1px solid #e9e9e9;
        cursor: pointer;
      }

      .studentopea2 {
        font-size: 14px;
        font-weight: 400;
        color: #387df7;
        line-height: 22px;
        padding-right: 8px;
        padding-left: 8px;
        border-right: 1px solid #e9e9e9;
        cursor: pointer;
      }

      .studentSelect {
        margin-left: 8px;
        display: inline-block;

        .ant-select:not(.ant-select-customize-input)
          .ant-select-selector
          .ant-select-selection-search-input {
          background-color: rgba(255, 255, 255, 0);
          border: none;
        }

        .ant-select:not(.ant-select-customize-input) .ant-select-selector {
          background-color: rgba(255, 255, 255, 0);
          border: none;
        }

        .ant-select-single:not(.ant-select-customize-input)
          .ant-select-selector {
          padding: 0;
        }

        .ant-select-focused:not(.ant-select-disabled).ant-select:not(
            .ant-select-customize-input
          )
          .ant-select-selector {
          box-shadow: none;
        }

        .ant-select-arrow {
          right: 0px;
          color: rgba(56, 125, 247, 1);
          font-size: 14px;
          line-height: 36px;
          // top: 17px;
          top: 15px;
        }

        .ant-select-selection-item {
          font-size: 14px;
          font-weight: 400;
          color: rgba(56, 125, 247, 1);
          line-height: 33px;
        }

        .ant-select-single.ant-select-open .ant-select-selection-item {
          color: rgba(56, 125, 247, 1);
        }
      }
    }

    .groupmain {
      display: flex;
      flex-wrap: wrap;
      margin-left: 32px;

      .groupbox {
        width: 264px;
        height: 181px;
        display: flex;
        justify-content: center;
        border: 1px solid #e9e9e9;
        box-shadow: 1px 1px 18px 1px rgba(0, 0, 0, 0.05);
        margin-top: 16px;
        margin-right: 20px;

        .grouptitle {
          display: flex;
          justify-content: space-between;
          margin-top: 5px;
          border-bottom: 1px solid rgba(232, 232, 232, 1);

          .goodgruop {
            color: rgba(0, 0, 0, 0.85);
            font-size: 16px;
            line-height: 36px;
            font-weight: 600;
          }

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

            .moreItems {
              width: 76px;
              height: 80px;
              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;
          }
        }

        .leader {
          color: rgba(0, 0, 0, 1);
          font-size: 14px;
          margin-top: 16px;
          //margin-left: 24px;
        }

        .grocenter {
          display: flex;
          margin-top: 14px;

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

          .ant-progress-outer {
            width: 170px;
          }
        }

        .grofooter {
          display: flex;
          justify-content: space-between;
          cursor: pointer;
          margin-top: 30px;

          .ftext {
            color: rgba(56, 139, 225, 1);
            font-size: 14px;
          }

          .peoples {
            display: flex;
            position: relative;

            .people1 {
              position: absolute;
              right: 22px;
            }

            .people2 {
              position: absolute;
              right: 31px;
            }

            .people3 {
              position: absolute;
              right: 40px;
            }

            .people4 {
              position: absolute;
              right: 49px;
            }
          }
        }
      }
    }

    .projectscore {
      .pjc_body {
        margin-left: 34px;
        margin-right: 34px;

        .pjcb_header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 24px auto;

          .edit_btn {
            width: 100px;
            // padding: 0px 26px 0px 26px;
            height: 38px;
            background: rgb(64, 158, 255);
            border-radius: 8px;
            border: 1px solid rgba(64, 158, 255, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            cursor: pointer;

            .edit {
              width: 15px;
              height: 15px;
              background-image: url(@/assets/images/coursewareManage/export1.png);
              background-size: 100% 100%;
            }

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

        .pjcb_content {
          border: 1px solid #4ea6ff;
          padding: 32px;

          .pjcb_content :last-child {
            margin-bottom: 0px;
          }

          .content {
            margin-bottom: 24px;
          }
        }
      }
    }
  }

  .content6 {
    margin-top: 20px;
    width: 100%;
    height: 100%;

    // background-color: #bfa;
    .title {
      font-size: 18px;
      font-weight: 500;
      color: #333333;
      margin-left: 34px;
    }

    .line {
      width: 100%;
      height: 1px;
      margin-top: 10px;
      background: #e8e8e8;
    }

    .search {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      margin: 30px 34px 0 34px;

      .left {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin-right: 10px;

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

        .name {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          margin-right: 56px;
        }

        .time {
          display: flex;
          align-items: center;
          // margin-left: 56px;
          margin-bottom: 10px;
        }
      }

      .right {
        display: flex;

        .btn {
          display: flex;
          width: 100px;
          height: 40px;
          border-radius: 8px;
          justify-content: center;
          align-items: center;
          margin-bottom: 10px;

          .img1 {
            width: 15px;
            height: 17px;
            background-image: url(../../assets/images/coursewareManage/search0.png);
            background-size: 100%;
            margin-right: 5px;
          }

          .img2 {
            width: 16px;
            height: 18px;
            background-image: url(../../assets/images/coursewareManage/reset1.png);
            background-size: 100%;
            margin-right: 5px;
          }
        }

        .btn1 {
          background: #4ea6ff;
          color: #fff;
          margin-right: 16px;
        }

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

    .main {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      margin-left: 34px;
      margin-bottom: 20px;

      .rank {
        width: 422px;
        height: 506px;
        margin-right: 80px;
        background: #ffffff;
        border-radius: 2px;
        border: 1px solid rgba(125, 125, 125, 0.39);
        margin-bottom: 20px;

        .rankhead {
          height: 75px;
          width: 100%;
          border-bottom: 1px solid #e9e9e9;
          // background-color: #bfa;
          display: flex;
          justify-content: center;
          align-items: center;

          .ant-select-selector {
            color: #4ea6ff !important;
          }

          .inhead {
            width: 374px;
            // background-color: lightblue;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            position: relative;

            .icon {
              position: absolute;
              width: 14px;
              height: 14px;
              background-image: url(../../assets/images/leveladd/info.png);
              background-size: 100%;
              left: 120px;
            }

            .left {
              font-size: 16px;
              font-weight: 500;
              color: rgba(0, 0, 0, 0.85);
            }

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

        .tab {
          // margin-top: 20px;
          // margin-left: 24px;
          border-radius: 4px 4px 0px 0px;
          border: 1px solid #e9e9e9;
          margin: 20px 24px 0 24px;

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

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

  //设置的基本信息
  .content7 {
    margin-top: 20px;

    .set_tit {
      margin-left: 34px;
      font-size: 18px;
      font-weight: 500;
      color: #232425;
    }

    .line {
      width: 100%;
      height: 1px;
      background-color: #e8e8e8;
      margin-top: 10px;
    }

    .set_body {
      margin-left: 34px;
      margin-right: 34px;
      position: relative;

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

        .img {
          width: 18px;
          height: 18px;
          background-image: url(../../assets/images/basicinfo/edit.png);
          background-size: 100%;
          margin-right: 7px;
        }

        .ed {
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
        }
      }

      .set_content {
        margin: 32px auto;
        display: flex;

        // justify-content: end;
        .setc_name {
          width: 150px;
          display: flex;
          justify-content: end;
        }

        .setc_main {
          flex: 1;
          margin-left: 12px;
        }
      }
    }
  }

  //设置的共享文档
  .sametab {
    // margin-left: 30px;
    // margin-right: 30px;
    margin-top: 30px;
    width: 100%;

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

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

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

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

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

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

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

          .twobtn {
            display: flex;

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

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

        .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: #4ea6ff;
                text-align: center;
              }
            }
          }
        }

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

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

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

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

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

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

          .choo {
            display: none;
          }

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

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

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

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

              .chose {
                position: relative;

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

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

    .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: #4ea6ff;
            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;
          }
        }
      }
    }
  }

  .certificate {
    width: 412px;
    height: 212px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url(../../assets/images/taskpage/nocertificate.png);
    background-size: 100% 100%;
  }

  .certificate1 {
    padding: 36px;
    display: flex;
    min-height: 400px;
    flex-wrap: wrap;

    .addcertificate1 {
      width: 210px;
      height: 256px;
      border: 1px solid rgba(64, 158, 255, 1);
      display: flex;
      justify-content: center;
      align-items: center;
      color: #4ea6ff;
      cursor: pointer;
      margin-left: 16px;
      margin-right: 16px;
      background-color: rgba(64, 158, 255, 0.06);
      margin-bottom: 20px;

      .addcertext {
        font-size: 16px;
        font-weight: 500;
        color: #388be1;
        line-height: 22px;
      }
    }

    .certificatelist {
      display: flex;
      align-items: center;
      flex-direction: column;
      margin-left: 16px;
      margin-right: 16px;
      margin-bottom: 20px;

      .certificatelistMain {
        width: 210px;
        height: 256px;
        border: 1px solid rgba(64, 158, 255, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .cergetrules {
          width: 210px;
          display: flex;
          height: 26px;
          align-items: center;
          margin-top: 8px;

          .cergetrulesText {
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            margin-left: 12px;
            font-size: 12px;
          }

          .cergetrulesMain {
            font-size: 12px;
            color: #999;
            width: 62px;
            margin-left: 6px;
            // overflow: hidden;
            // white-space: nowrap;
            // text-overflow: ellipsis;
            background: rgba(64, 158, 255, 0.1);
            border-radius: 11px;
            opacity: 0.49;
            border: 1px solid #409eff;
            text-align: center;
          }

          .certificateMorebox {
            font-size: 12px;
            font-weight: 600;
            color: #409eff;
            line-height: 22px;
            cursor: pointer;
            position: relative;
            margin-left: 31px;
          }

          .certificateMore {
            position: absolute;
            width: 45px;
            height: 60px;
            background: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border: 1px solid #b1b3b8;
            // .certificateMore1:hover {
            //   color: ;
            // }
          }
        }
      }

      .certificateName {
        width: 210px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 16px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
        margin-top: 8px;
        display: flex;
        justify-content: center;
      }
    }
  }
}

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

      .ant-modal-body {
        .delete {
          z-index: 9999;
          width: 424px;
          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;

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

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

            .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;
                margin-right: 14px;
                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;
              }

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