<!-- 学习路径页面 -->
<template>
  <div class="learningPath">
    <!-- 搜索框及按钮 -->
    <div class="filter">
      <div class="filterItems">
        <div class="pathnameInp">
          <a-input
            v-model:value="pathnameSearch"
            style="width: 270px; height: 40px; border-radius: 8px"
            placeholder="请输入路径名称"
          />
        </div>
        <div class="pathnameInp">
          <a-input
            v-model:value="createUser"
            style="width: 270px; height: 40px; border-radius: 8px"
            placeholder="请输入创建人"
          />
        </div>
        <div class="select">
          <a-select
            v-model:value="statusValue"
            style="width: 270px"
            placeholder="请选择状态"
            :options="statusList"
            @change="selectStatusClassify"
            allowClear
          ></a-select>
        </div>

        <div class="select addTimeBox">
          <!-- <a-date-picker
            v-model="selectTime"
            type="date"
            placeholder="时间"
            style="width: 270px"
          /> -->
          <div class="addTime">创建时间：</div>
          <a-range-picker
            v-model:value="searchdate"
            separator="至"
            :placeholder="['      开始时间', '        结束时间']"
            @change="searchTimeChange"
          />
        </div>
        <div style="display: flex; margin-bottom: 20px">
          <div class="btn btn1" @click="searchLearnPath">
            <div class="search"></div>
            <div class="btnText">搜索</div>
          </div>
          <div class="btnn btn2" @click="resetLearnPath">
            <div class="search"></div>
            <div class="btnText">重置</div>
          </div>
        </div>
      </div>
      <div class="btns">
        <!-- <router-link to="/projectadd">
          <div class="btn btn3">
            <div class="search"></div>
            <div class="btnText">创建路径</div>
          </div>
        </router-link> -->
        <div class="btn btn3" @click="handleOut">
          <div class="search"></div>
          <div class="btnText">创建路径</div>
        </div>
      </div>
    </div>
    <!-- 搜索框及按钮 -->
    <!-- 无数据 -->
    <div class="datanull" v-if="tableDataTotal === 0">
      <div class="nodata_box">
        <div class="left">
          <img src="../../assets/images/taskpage/left1.png" />
        </div>
        <div class="center">
          <img src="../../assets/images/leveladd/picture.png" />
        </div>
        <div class="text1">无数据</div>
        <div class="text2">请添加路径</div>
        <div class="right">
          <img src="../../assets/images/leveladd/right.png" />
        </div>
      </div>
    </div>
    <!-- 无数据 -->
    <!-- 表格 -->
    <div
      class="tableBox"
      v-if="tableDataTotal !== 0"
      style="padding-bottom: 0px; position: relative"
    >
      <a-table
        style="border: 1px solid #f2f6fe"
        :columns="tableDataFunc()"
        :data-source="tableData"
        :loading="tableDataTotal === -1 ? true : false"
        expandRowByClick="true"
        :scroll="{ x: 1550 }"
        @expand="expandTable"
        :pagination="false"
      />
    </div>
    <div class="tableBox">
      <div class="pa">
        <a-pagination
          v-if="tableDataTotal > 10"
          :showSizeChanger="false"
          showQuickJumper="true"
          hideOnSinglePage="true"
          :pageSize="pageSize"
          v-model:current="currentPage"
          :total="tableDataTotal"
          class="pagination"
          @change="changePagination"
        />
      </div>
    </div>

    <!-- 表格 -->

    <!-- 创建路径弹窗 v-model:visible="out" -->
    <a-modal
      :closable="sh"
      centered="true"
      v-model:visible="out"
      :footer="null"
      wrapClassName="CreatePath"
    >
      <div class="out">
        <div class="top">
          <img class="topimg" src="../../assets/images/courseManage/add1.png" />
          <div class="topc">创建路径</div>
          <div @click="handleOut" style="margin-left: 500px; cursor: pointer">
            <img
              style="width: 20px; height: 20px"
              src="../../assets/images/basicinfo/close.png"
            />
          </div>
        </div>
        <div class="mid clearfix">
          <div class="name">
            <div class="d" style="margin-top: -4px">
              <img
                style="width: 10px; height: 10px"
                src="../../assets/images/basicinfo/asterisk.png"
              />
            </div>
            <div class="inname">路径图名称</div>
            <div class="in road">
              <!--              <a-input-->
              <!--                  v-model:value="pathName"-->
              <!--                  maxlength="20"-->
              <!--                  style="border-radius: 4px"-->
              <!--                  placeholder="请输入学习路径名称"-->
              <!--              />-->
              <!--              <div class="showcount">{{ pathName.length }}/20</div>-->
              <NameInput
                placeholder="请输入路径名称"
                v-model:value="pathName"
                v-model:validate="validate"
                :maxlength="20"
                show-count
                :type="3"
              ></NameInput>
            </div>
          </div>
          <div class="name" style="margin-left: 27px">
            <div class="d" style="margin-top: -4px">
              <img
                style="width: 10px; height: 10px"
                src="../../assets/images/basicinfo/asterisk.png"
              />
            </div>
            <div class="inname">归属组织</div>
            <div class="select in">
              <OrgClass
                v-model:value="organizationSelectId"
                v-model:name="organizationSelectName"
              ></OrgClass>
            </div>
            <!-- <div class="in">
              <a-input
                v-model:value="valuecom"
                maxlength="20"
                style="border-radius: 4px"
              />
              <div class="showcount">{{ valuecom.length }}/20</div>
            </div> -->
          </div>
          <div class="bac">
            <div class="d" style="margin-top: 12px">
              <img
                style="width: 10px; height: 10px"
                src="../../assets/images/basicinfo/asterisk.png"
              />
            </div>
            <div class="inname">路径图背景</div>
            <div class="in learnBg">
              <!-- <img class="im" src="../../assets/px.jpg" />
            <img class="im" src="../../assets/px.jpg" />
            <img class="im" src="../../assets/px.jpg" /> -->
            
              <div
                @click="chooseImg(item)"
                v-for="(item, index) in imgData"
                :key="item.key"
                class="learnBgItem"
                :style="{
                  border:
                    pathBgId === item.dictCode
                      ? '2px solid rgba(78, 166, 255, 1)'
                      : '1px solid #C7CBD2',
                  'background-image': 'url(' + item.dictValue + ')',
                  display: index >= 5 ? 'none' : 'flex',
                }"
                style="background-size: 100% 100%"
              ></div>
              <div
                @click="showLearnBgMore"
                v-if="imgData.length > 5"
                class="learnBgItem learnBgMore"
              >
                查看更多 <img src="../../assets/images/projectadd/go.png" />
              </div>
            </div>
          </div>
          <div class="info">
            <div class="inname">路径说明</div>
            <div class="in">
              <a-textarea v-model:value="pathIntro" maxlength="150" />
              <div class="showcount">{{ pathIntro.length }}/150</div>
            </div>
          </div>
          <div class="btn">
            <button class="samtn btn1" @click="handleOut">取消</button>
            <button class="samtn btn2" @click="createLearnPath">确定</button>
          </div>

          <div
            class="aeLoading"
            :style="{ display: lpLoading ? 'flex' : 'none' }"
          >
            <a-spin :spinning="lpLoading" tip=""/>
          </div>
        </div>
      </div>
    </a-modal>

    <!-- 编辑路径弹窗 -->
    <a-modal
      :closable="sh"
      centered="true"
      v-model:visible="out1"
      :footer="null"
      wrapClassName="CreatePath"
    >
      <div class="out">
        <div class="top">
          <img class="topimg" src="../../assets/images/courseManage/add1.png" />
          <div class="topc">编辑路径</div>
          <div @click="handleOut1" style="margin-left: 500px; cursor: pointer">
            <img
              style="width: 20px; height: 20px"
              src="../../assets/images/basicinfo/close.png"
            />
          </div>
        </div>
        <div class="mid clearfix">
          <div class="name">
            <div class="d" style="margin-top: -4px">
              <img
                style="width: 10px; height: 10px"
                src="../../assets/images/basicinfo/asterisk.png"
              />
            </div>
            <div class="inname">路径图名称</div>
            <div class="in road" >
              <!--              <a-input-->
              <!--                  v-model:value="pathName"-->
              <!--                  maxlength="20"-->
              <!--                  style="border-radius: 4px"-->
              <!--                  placeholder="请输入学习路径名称"-->
              <!--              />-->
              <!--              <div class="showcount">{{ pathName.length }}/20</div>-->
              <NameInput
                placeholder="请输入路径名称"
                v-model:value="pathName"
                v-model:validate="validate"
                :maxlength="20"
                show-count
                :type="3"
                :id="editPathId"
              ></NameInput>
            </div>
          </div>
          <div class="name" style="margin-left: 27px">
            <div class="d" style="margin-top: -4px">
              <img
                style="width: 10px; height: 10px"
                src="../../assets/images/basicinfo/asterisk.png"
              />
            </div>
            <div class="inname">归属组织</div>
            <div class="select in">
              <OrgClass
                v-model:value="organizationSelectId"
                v-model:name="organizationSelectName"
              ></OrgClass>
            </div>
            <!-- <div class="in">
              <a-input
                v-model:value="organization"
                maxlength="20"
                style="border-radius: 4px"
              />
              <div class="showcount">{{ organization.length }}/20</div>
            </div> -->
          </div>
          <div class="bac">
            <div class="d" style="margin-top: 12px">
              <img
                style="width: 10px; height: 10px"
                src="../../assets/images/basicinfo/asterisk.png"
              />
            </div>
            <div class="inname">路径图背景</div>
            <div class="in learnBg">
              <!-- <img class="im" src="../../assets/px.jpg" />
            <img class="im" src="../../assets/px.jpg" />
            <img class="im" src="../../assets/px.jpg" /> -->
       
              <div
                @click="chooseImg2(item)"
                v-for="(item, index) in imgData"
                :key="item.key"
                class="learnBgItem"
                :style="{
                  border:
                    pathBgId === item.dictCode
                      ? '2px solid rgba(78, 166, 255, 1)'
                      : '1px solid #ccc',
                  'background-image': 'url(' + item.dictValue + ')',
                  display: index >= 5 ? 'none' : 'flex',
                }"
                style="background-size: 100% 100%"
              >
                <!-- <img class="im" :src="item.source" /> -->
              </div>
              <div
                @click="showLearnBgMore"
                v-if="imgData.length > 5"
                class="learnBgItem learnBgMore"
              >
                查看更多 <img src="../../assets/images/projectadd/go.png" />
              </div>
            </div>
          </div>
          <div class="info">
            <div class="inname">路径说明</div>
            <div class="in">
              <a-textarea v-model:value="pathIntro" maxlength="150" />
              <div class="showcount">{{ pathIntro.length }}/150</div>
            </div>
          </div>
          <div class="btn">
            <button class="samtn btn1" @click="handleOut1">取消</button>
            <button class="samtn btn2" @click="editLearnPath">确定</button>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 发布弹窗 -->
    <a-modal
      v-model:visible="pub"
      :title="null"
      :footer="null"
      :closable="false"
      wrapClassName="pub"
      width="679px"
      height="437px"
    >
      <div
        class="modalHeader"
        style="
          width: 100%;
          height: 68px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <div class="headerLeft" style="margin-left: 32px">
          <span style="width: 15px; height: 15px"
            ><img src="../../assets/images/taskpage/pub.png"
          /></span>
          <span
            class="headerLeftText"
            style="font-size: 16px; margin-left: 10px"
            >路径发布</span
          >
        </div>
        <div style="cursor: pointer; margin-right: 32px" @click="closePub">
          <img
            style="width: 22px; height: 22px"
            src="../../assets/images/basicinfo/close22.png"
          />
        </div>
      </div>
      <div class="modalMain">
        <div class="projectname">{{ releasePathName }}</div>
        <!-- <div class="projecttime">
          <span class="timeti">路径时间：</span
          ><span class="timeme">2022/08/01-2022/08/30</span>
        </div> -->
        <div class="projectbox">
          <div class="promessage">
            <div class="messageme">路径信息</div>
            <div class="messagege">
              当前路径共{{ routeChapters }}个关卡，{{ routeTasks }}个任务
            </div>
          </div>
          <div class="stumessage">
            <div class="messageme1">学员信息</div>
            <div class="messagege1">路径共{{ routeStudentsNum }}名学员</div>
          </div>
        </div>
        <!-- <div class="send">
          <a-switch v-model:checked="checked" size="small" />
          <span class="sendtext">发送路径通知</span>
        </div>
        <div class="ckb">
          <a-checkbox v-model:checked="checkedTeacher"
            ><span class="sendpeo">发给老师</span></a-checkbox
          >
          <a-checkbox v-model:checked="checkStu"
            ><span class="sendpeo">发给学员</span></a-checkbox
          >
        </div> -->
        <div class="pubtn">
          <a-button class="pubtn1" @click="closePub">取消</a-button>
          <a-button class="pubtn2" @click="releaseLearnPath">发布</a-button>
        </div>
      </div>
      <!--  加载动画 -->
      <div class="aeLoading" :style="{ display: pubLoading ? 'flex' : 'none' }">
        <a-spin :spinning="pubLoading" />
      </div>
    </a-modal>
    <!-- 复制路径弹窗 -->
    <a-modal
      v-model:visible="copyModal"
      :footer="null"
      :closable="closeCopy"
      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="closeCopyModal"></div>
          </div>
          <div class="body">
            <span>您确定要复制此路径吗</span>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn1" @click="closeCopyModal">
              <div class="btnText">取消</div>
            </div>
            <div class="del_btn btn2" @click="copyLearnPath">
              <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> -->
            <span>是否结束项目</span>
            <div class="back">
              （项目结束后学员将无法继续学习，此操作不可逆）
            </div>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn1" @click="closeStopModal">
              <div class="btnText">取消</div>
            </div>
            <div class="del_btn btn2" @click="stopLearnPath">
              <div class="btnText">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 删除路径弹窗 -->
    <a-modal
      v-model:visible="deleteModal"
      :footer="null"
      :closable="closeDelete"
      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="closeDeleteModal"></div>
          </div>
          <div class="body">
            <span>您确定要删除此路径吗</span>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn1" @click="closeDeleteModal">
              <div class="btnText">取消</div>
            </div>
            <div class="del_btn btn2" @click="deleteLearnPath">
              <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="delete_exit">
              <div class="btnText">取消</div>
            </div>
            <div class="del_btn btn2" @click="delete_exit">
              <div class="btnText">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 撤回路径弹窗 -->
    <a-modal
      v-model:visible="backModal"
      :footer="null"
      :closable="closeBack"
      wrapClassName="CopyModal"
      centered="true"
    >
      <div class="delete">
        <div class="del_header"></div>
        <div class="del_main">
          <div class="header">
            <div class="icon"></div>
            <span>提示</span>
            <div class="close_exit" @click="closeBackModal"></div>
          </div>
          <div class="body">
            <span>是否撤回路径</span>
            <div class="back">（路径撤回后学员进度保留，发布后可继续学习）</div>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn1" @click="closeBackModal">
              <div class="btnText">取消</div>
            </div>
            <div class="del_btn btn2" @click="recallPath">
              <div class="btnText">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 归属权抽屉 -->
    <!-- <owner-ship v-model:Ownervisible="Ownervisible" /> -->
    <!-- 查看权抽屉 -->
    <!-- <query-right v-model:Queryvisible="Queryvisible" /> -->
    <!-- 管理权抽屉 -->
    <!-- <manage-right v-model:Managevisible="Managevisible" /> -->
    <!-- 授权名单抽屉 -->
    <!-- <power-list v-model:PLvisible="PLvisible" :selectPathId="selectPathId" /> -->

    <!-- 授权名单抽屉 -->
    <proj-power-list
      v-model:ProjPvisible="PLvisible"
      :selectProjectId="selectPathId"
      classify="learnPath"
    />
    <!-- 归属权抽屉 -->
    <proj-owner-ship
      v-model:ProjOwnervisible="Ownervisible"
      :selectProjectId="selectPathId"
      classify="learnPath"
    />
    <!-- 查看权抽屉 -->
    <proj-check-ship
      v-model:ProjCheckvisible="showCheck"
      v-model:selectProjectId="selectPathId"
      v-model:addAuthList="addAuthList"
      v-model:authClassify="authClassify"
      classify="learnPath"
    />
    <!-- 管理权抽屉 -->
    <!-- <proj-check-ship
      v-model:ProjCheckvisible="Managevisible"
      :selectProjectId="selectPathId"
      v-model:addAuthList="addAuthList"
      :authClassify="authClassify"
      classify="learnPath"
    /> -->
    <!-- 创建路径loading -->

    <!-- 更多背景图 v-model:visible="learnBgMore"  -->
    <a-modal
      :closable="sh"
      centered="true"
      v-model:visible="learnBgMore"
      :footer="null"
      wrapClassName="learnBgMoreModal"
      :z-index="9999"
    >
      <div class="main">
        <div class="top">
          <div class="topc">路径图背景</div>
          <div @click="closeLearnBgMore">
            <img
              style="width: 20px; height: 20px"
              src="../../assets/images/basicinfo/close.png"
            />
          </div>
        </div>
        <div class="imagesBox">
          <div
            @click="chooseImg2(item)"
            v-for="item in imgData"
            :key="item.key"
            class="learnBgItem"
            :style="{
              border:
                pathBgId === item.id
                  ? '2px solid rgba(78, 166, 255, 1)'
                  : '1px solid #ccc',
              'background-image': 'url(' + item.source + ')',
            }"
          >
            <!-- <img class="im" :src="item.source" /> -->
          </div>
        </div>
        <div class="btn">
          <button class="samtn btn1" @click="closeLearnBgMore">取消</button>
          <button class="samtn btn2" @click="closeLearnBgMore">确定</button>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script>
import { reactive, toRefs, onMounted, watch, computed } from "vue";
import { useRouter } from "vue-router";
// import OwnerShip from "../../components/drawers/Ownership";
// import PowerList from "../../components/drawers/PowerList";
// import QueryRight from "../../components/drawers/QueryRight";
import ProjOwnerShip from "../../components/drawers/ProjectOwn";
import ProjPowerList from "../../components/drawers/ProjPowerList";
import ProjCheckShip from "../../components/drawers/ProjCheckPower";
// import ManageRight from "../../components/drawers/ManageRight";
import * as api from "../../api/index1";
import * as apiStu from "../../api/index";
import { message } from "ant-design-vue";
import {
  commonData,
  changeOwnership,
  // setCookie
} from "../../api/method";
import { storage } from "../../api/storage";
import { useStore } from "vuex";
import OrgClass from "@/components/project/OrgClass";
import NameInput from "@/components/project/NameInput";
import {validateName} from "../../api/index1";

export default {
  name: "learningPath",
  components: {
    // OwnerShip,
    // PowerList,
    // QueryRight,
    // ManageRight,
    ProjOwnerShip,
    OrgClass,
    NameInput,
    ProjPowerList,
    ProjCheckShip,
  },

  setup() {
    const store = useStore();
    const router = useRouter();
    const state = reactive({
      out: false,
      out1: false,
      number: null,
      selectTime: null,
      sh: false,
      validate: true,
      tableData: [
        // {
        //   key: 1,
        //   number: 1,
        //   manager: "产品经理上升路径",
        //   state: "已发布",
        //   creater: "管理员",
        //   pubtime: "2022-07-20 14:00:03",
        //   cretime: "2022-07-20 14:00:03",
        // },
      ], //学习路径列表
      currentPage: 1, //当前页
      tableDataTotal: -1, //学习路径列表总数
      pageSize: 10, //每页10条数据

      // learnPathBg: null, //创建路径选择的路径图背景
      // learnPathBg2: null, //编辑路径选择的路径图背景
      pub: false, //发布弹窗
      pubLoading: false, //发布loading
      checked: false, //发布弹窗switch
      checkedTeacher: false, //发布弹窗勾选
      checkStu: false, //发布弹窗勾选
      copyModal: false, //复制弹窗
      closeCopy: false, //复制弹窗关闭图标
      stopModal: false, //停用弹窗
      closeStop: false, //停用弹窗关闭图标
      deleteModal: false, //删除弹窗
      closeDelete: false, //删除弹窗关闭图标
      startModal: false, //启用弹窗
      closeStart: false, //启用弹窗关闭图标
      backModal: false, //撤回弹窗
      closeBack: false, //撤回弹窗关闭图标
      Ownervisible: false, //归属权抽屉
      PLvisible: false, //授权名单抽屉
      Queryvisible: false, //查看权抽屉
      Managevisible: false, //管理权抽屉
      showCheck: false,

      value1: "",
      value2: "",
      //
      //创建、编辑-------------------------
      pathName: "", //创建/编辑路径图名称
      organizationList: [
        // {
        //   id: 1,
        //   value: "组织一",
        //   label: "组织一",
        // },
      ], //归属组织
      organizationSelectName: null, //归属组织选择名称
      organizationSelectId: null, //归属组织选择id
      pathBg: null, //路径图选择背景
      pathBgId: null, //路径图选择id
      pathIntro: "", //路径说明
      createLoading: false, //创建路径loading
      deletePathId: null, //删除路径id
      editPathId: null, //修改路径id
      //搜索------------------------------
      pathnameSearch: null, //搜索路径名称
      statusList: [
        {
          id: 1,
          value: "草稿",
          label: "草稿",
          classify: 0,
        },
        {
          id: 2,
          value: "已发布",
          label: "已发布",
          classify: 1,
        },
        {
          id: 3,
          value: "已结束",
          label: "已结束",
          classify: -1,
        },
      ],
      statusValue: null, //状态
      statusClassify: null, //选择状态类型
      searchdate: null, //选择时间
      startTime: null, //开始时间
      endTime: null, //结束时间
      //发布---------------
      releasePathId: null, //发布路径id
      releasePathName: null, //发布路径的名称
      routeStudentsNum: 0, //学员总数
      routeChapters: 0, //关卡总数
      routeTasks: 0, //任务总数
      recallPathId: null, //撤回路径id
      stopPathId: null, //停用路径id
      copyPathId: null, //复制路径iid

      lpLoading: false,
      learnBgMore: false, //是否显示更多学习路径背景

      selectPathId: null, //选择授权的路径id
      addAuthList: null, //确定授权列表
      authClassify: null, //显示的是管理权还是查看权

      createUser: null, //创建人搜索
    });

    //归属组织
    state.organizationList = computed(() => {
      return store.state.orgtreeList ? store.state.orgtreeList : [];
    });

    const selectProjectName = (value, index) => {
      console.log("value", value, index);
    };
    const expandTable = (e, a) => {
      // console.log("惦记了");
      console.log("e", e, a);
    };
    const handleOut = () => {
      console.log(store.state);
      // console.log("打开创建路径弹窗");
      state.pathName = "";
      state.pathBg = "";
      state.pathBgId = "";
      if(store.state.userInfo.departId && store.state.userInfo.departName){
        state.organizationSelectName = store.state.userInfo.departName;
        state.organizationSelectId = store.state.userInfo.departId;
      }
      state.pathIntro = "";
      state.out = !state.out;
    };
    const handleOut1 = () => {
      state.pathName = "";
      state.pathBg = "";
      state.pathBgId =1;
      state.organizationSelectName = null;
      state.organizationSelectId = null;
      state.pathIntro = "";
      state.out1 = !state.out1;
      state.editPathId = null;
    };
    const chooseImg = (item) => {
      console.log(item);
      state.pathBgId = item.dictCode;
      state.pathBg = item.dictValue;
    };
    const chooseImg2 = (item) => {
      // console.log(item);
      state.pathBgId = item.dictCode;
      state.pathBg = item.dictValue;
    };
    //发布弹窗
    const showPub = (router) => {
      console.log("router", router);
      state.pub = true;
      state.pubLoading = true;
      state.releasePathId = router.id;
      state.releasePathName = router.manager;
      api
        .getLearnCount(router.id)
        .then((res) => {
          console.log("获取关卡、任务、学员统计数据", res.data);
          if (res.status === 200) {
            // state.routeStudentsNum = res.data.students;
            state.routeChapters = res.data.data.chapters;
            state.routeTasks = res.data.data.tasks;
          }
        })
        .catch((err) => {
          console.log("err", err);
        });
      //获取学员列表
      apiStu.projectStudentCount({
          pid: router.id,
          type:2
        }).then((res) => {
            state.routeStudentsNum = res.data.data;
            state.pubLoading = false;
        })
    };
    //确定发布
    const releaseLearnPath = () => {
      // console.log("state.releasePathId", state.releasePathId);
      let obj = {
        routerId: state.releasePathId,
        type: 1,
      };
      api
        .handleLearnPath(obj)
        .then((res) => {
          console.log("发布", res);
          if (res.data.code === 200) {
            message.destroy();
            message.success("发布成功");
            state.pub = false;
            getLearnPath();
          }
          if (res.data.code === -1) {
            message.warning(res.data.msg);
          }
        })
        .catch((err) => {
          console.log("发布失败", err);
        });
    };

    const closePub = () => {
      state.pub = false;
      state.releasePathId = null;
      state.releasePathName = null;
      state.routeChapters = null;
      state.routeTasks = null;
      state.routeStudentsNum = null;
    };
    //显示复制窗口
    const showCopyModal = () => {
      state.copyModal = true;
    };
    //关闭复制窗口
    const closeCopyModal = () => {
      state.copyModal = false;
    };
    //确认复制
    const copyLearnPath = () => {
      let obj = {
        routerId: state.copyPathId,
        type: 2,
      };
      api
        .handleLearnPath(obj)
        .then((res) => {
          if (res.data.code === 200) {
            console.log("复制成功", res);
            message.destroy();
            message.success("复制成功");
            state.copyModal = false;
            getLearnPath();
          }
          if (res.data.code === -1) {
            message.warning(res.data.msg);
          }
        })
        .catch((err) => {
          console.log("复制失败", err);
        });
    };

    //显示结束窗口
    const showStopModal = () => {
      state.stopModal = true;
    };
    //关闭结束窗口
    const closeStopModal = () => {
      state.stopModal = false;
    };
    //确认结束
    const stopLearnPath = () => {
      let obj = {
        routerId: state.stopPathId,
        type: -1,
      };
      api
        .handleLearnPath(obj)
        .then((res) => {
          if (res.data.code === 200) {
            console.log("停用成功", res);
            message.destroy();
            message.success("停用成功");
            state.stopModal = false;
            getLearnPath();
          }
          if (res.data.code === -1) {
            message.warning(res.data.msg);
          }
        })
        .catch((err) => {
          console.log("停用失败", err);
        });
    };

    const showDeleteModal = () => {
      state.deleteModal = true;
    };
    const closeDeleteModal = () => {
      state.deletePathId = null;
      state.deleteModal = false;
    };
    const showStartModal = () => {
      state.startModal = true;
    };
    const closeStartModal = () => {
      state.startModal = false;
    };
    //打开撤回弹窗
    const showBackModal = (routerId) => {
      state.backModal = true;
      state.recallPathId = routerId;
    };
    //关闭撤回弹窗
    const closeBackModal = () => {
      state.backModal = false;
    };
    //确定撤回
    const recallPath = () => {
      let obj = {
        routerId: state.recallPathId,
        type: 0,
      };
      api
        .handleLearnPath(obj)
        .then((res) => {
          if (res.data.code === 200) {
            console.log("撤回成功", res);
            message.destroy();
            message.success("撤回成功");
            state.backModal = false;
            getLearnPath();
          }
          if (res.data.code === -1) {
            message.warning(res.data.msg);
          }
        })
        .catch((err) => {
          console.log("撤回失败", err);
        });
    };

    const showOwner = (id) => {
      state.Ownervisible = true;
      state.selectPathId = id;
    };
    const showPower = (id) => {
      state.PLvisible = true;
      state.selectPathId = id;
    };
    const showQuery = (id) => {
      state.authClassify = 1;
      state.selectPathId = id;
      state.showCheck = true;
    };
    const showManage = (id) => {
      state.authClassify = 2;
      state.selectPathId = id;
      state.showCheck = true;
    };
    const getTableDate = (tableData) => {
      let data = tableData;
      let array = [];
      data.map((value, index) => {
        let obj = {
          id: value.routerId,
          number: (state.currentPage - 1) * state.pageSize + index + 1,
          manager: value.name ? value.name : "-",
          state:
            value.status === 0
              ? "草稿"
              : value.status === 1
              ? "已发布"
              : value.status === -1
              ? "已结束"
              : "-",
          creater: value.createName ? value.createName : "-",
          pubtime: value.publishTime ? value.publishTime : "-",
          cretime: value.createTime ? value.createTime : "-",
          remark: value.remark ? value.remark : "-",
        };
        array.push(obj);
      });
      state.tableData = array;
      console.log(array, tableData);
    };

    const tableDataFunc = () => {
      const columns = [
        // {
        //  title: "序号",
        //   dataIndex: "number",
        //  key: "number",
        // width: 100,
        //  align: "center",
        //  className: "h",
        // },
        {
          title: "路径图名称",
          dataIndex: "manager",
          key: "manager",
          width: "20%",
          align: "center",
          ellipsis: true,
          className: "h",
        },
        {
          title: "状态",
          dataIndex: "state",
          width: "10%",
          key: "state",
          //width: 100,
          align: "center",
          className: "h",
        },
        {
          title: "创建人",
          dataIndex: "creater",
          width: "10%",
          key: "creater",
          // width: 100,
          align: "center",
          className: "h",
        },
        {
          title: "发布时间",
          dataIndex: "pubtime",
          key: "pubtime",
          width: "15%",
          align: "center",
          className: "h",
        },
        {
          title: "创建时间",
          dataIndex: "cretime",
          key: "cretime",
          width: "15%",
          align: "center",
          className: "h",
        },
        {
          title: "操作",
          className: "h",
          dataIndex: "opacation",
          key: "opacation",
          width: "20%",
          align: "center",
          fixed: "right",
          scopedSlots: { customRender: "action" }, //引入的插槽
          customRender: (text) => {
            // console.log(text);
            return (
              <div class="operation">
                <div class="nSelect">
                  {text.record.state === "草稿" ? (
                    <div class="fb">
                      <div
                        style="cursor:pointer"
                        class="jc"
                        onClick={() => {
                          // console.log("text.record.", text.record);
                          showPub(text.record);
                        }}
                      >
                        发布
                      </div>
                      <div
                        class="jc"
                        onClick={() => {
                          // console.log("text.record", text.record);

                          getLearnPathInfo(text.record.id);
                        }}
                      >
                        编辑
                      </div>
                    </div>
                  ) : (
                    <div></div>
                  )}
                  {text.record.state === "已发布" ? (
                    <div class="fb">
                      <div
                        class="jc"
                        onClick={() => {
                          // state.out1 = true;
                          // state.pathName = text.record.manager;
                          // // state.pathBg = "";
                          // // state.organizationSelectName = null;
                          // // state.organizationSelectId = null;
                          // state.pathIntro = text.record.remark;
                          // state.editPathId = text.record.id;
                        }}
                      ></div>
                    </div>
                  ) : (
                    <div></div>
                  )}
                  {
                    // 	text.record.state === "未发布" ? (
                    //   <div class="fb">
                    //     <div
                    //       style="cursor:pointer"
                    //       class="jc"
                    //       onClick={() => {
                    //         showCopyModal();
                    //       }}
                    //     >
                    //       复制
                    //     </div>
                    //   </div>
                    // ) : (
                    //   <div></div>
                    // )
                  }
                </div>
                <div class="tableSelect">
                  <div
                    class="g1"
                    onClick={() => {
                      router.push({
                        path: "/leveladd",
                      });
                      storage.set("routerId", text.record.id);
                    }}
                  >
                    管理
                  </div>
                  {/**
                    // <!-- 2022-12-10注释 后面放开 -->
<a-select
                        style="width: 50px;margin-top:2px;margin-left:25px"
                        value="授权"
                        dropdownClassName="tabledropdown"
                    >
                      <a-select-option value="权限名单" label="权限名单">
                        <div
                            onClick={() => {
                              showPower(text.record.id);
                            }}
                        >
                          权限名单
                        </div>
                      </a-select-option>
                      <a-select-option value="归属权" label="归属权">
                        <div
                            onClick={() => {
                              showOwner(text.record.id);
                            }}
                        >
                          归属权
                        </div>
                      </a-select-option>
                      <a-select-option value="查看权" label="查看权">
                        <div
                            onClick={() => {
                              showQuery(text.record.id);
                            }}
                        >
                          查看权
                        </div>
                      </a-select-option>
                      <a-select-option value="管理权" label="管理权">
                        <div
                            onClick={() => {
                              showManage(text.record.id);
                            }}
                        >
                          管理权
                        </div>
                      </a-select-option>
                    </a-select>
                    */}
                </div>
                <div class="tableSelect">
                  {text.record.state === "草稿" ? (
                    <a-select
                      style="width: 50px;margin-top:2px;margin-right:20px;"
                      value="更多"
                      dropdownClassName="tabledropdown"
                    >
                      <a-select-option
                        value="复制"
                        label="复制"
                        style="padding-left:35px"
                      >
                        <div
                          onClick={() => {
                            state.copyPathId = text.record.id;
                            showCopyModal();
                          }}
                        >
                          复制
                        </div>
                      </a-select-option>

                      <a-select-option
                        value="删除"
                        label="删除"
                        style="padding-left:35px"
                      >
                        <div
                          onClick={() => {
                            state.deletePathId = text.record.id;
                            // console.log("text.record", text.record);
                            showDeleteModal();
                          }}
                        >
                          删除
                        </div>
                      </a-select-option>
                    </a-select>
                  ) : (
                    <div></div>
                  )}
                  {text.record.state === "已发布" ? (
                    <div>
                      <a-select
                        style="width: 50px;margin-top:2px;margin-right:20px;"
                        value="更多"
                        dropdownClassName="tabledropdown"
                      >
                        <a-select-option
                          value="复制"
                          label="复制"
                          style="padding-left:35px"
                        >
                          <div
                            onClick={() => {
                              state.copyPathId = text.record.id;
                              showCopyModal();
                            }}
                          >
                            复制
                          </div>
                        </a-select-option>

                        <a-select-option
                          value="撤回"
                          label="撤回"
                          style="padding-left:35px"
                        >
                          <div
                            onClick={() => {
                              showBackModal(text.record.id);
                            }}
                          >
                            撤回
                          </div>
                        </a-select-option>
                        <a-select-option
                          value="结束"
                          label="结束"
                          style="padding-left:35px"
                        >
                          <div
                            onClick={() => {
                              state.stopPathId = text.record.id;
                              showStopModal();
                            }}
                          >
                            结束
                          </div>
                        </a-select-option>
                      </a-select>
                    </div>
                  ) : (
                    <div></div>
                  )}
                  {text.record.state === "已结束" ? (
                    <div>
                      <a-select
                        style="width: 50px;margin-top:2px;margin-right:20px;"
                        value="更多"
                        dropdownClassName="tabledropdown"
                      >
                        <a-select-option
                          value="复制"
                          label="复制"
                          style="padding-left:35px"
                        >
                          <div
                            onClick={() => {
                              state.copyPathId = text.record.id;
                              showCopyModal();
                            }}
                          >
                            复制
                          </div>
                        </a-select-option>
                        {/**
                             <a-select-option
                             value="启用"
                             label="启用"
                             style="padding-left:35px"
                             >
                             <div
                             onClick={() => {
                              showStartModal();
                            }}
                             >
                             启用
                             </div>
                             </a-select-option>
                             */}

                        <a-select-option
                          value="删除"
                          label="删除"
                          style="padding-left:35px"
                        >
                          <div
                            onClick={() => {
                              state.deletePathId = text.record.id;
                              showDeleteModal();
                            }}
                          >
                            删除
                          </div>
                        </a-select-option>
                      </a-select>
                    </div>
                  ) : (
                    <div></div>
                  )}
                </div>
              </div>
            );
          },
        },
      ];
      return columns;
    };
    const selectorganization = (e, v) => {
      console.log("eee", e, v);
      state.organizationSelectName = v[0];
      state.organizationSelectId = e;
    };
    //创建学习路径图
    const createLearnPath = async() => {
      if (!state.pathName) {
        message.destroy();
        return message.warning("请输入路径图名称");
      }
      if (!state.organizationSelectName) {
        message.destroy();
        return message.warning("请选择归属组织");
      }
      if (!state.pathBg) {
        message.destroy();
        return message.warning("请选择背景图");
      }
      if (!state.validate) {
        message.destroy();
        message.warning("路径图名称重复");
        return;
      }
       const offName = await validateName({
        name: state.pathName,
        type: 3,
        id:state.editPathId,
      }).then(res => {
        return res.data.data == 1;
      });
      if (offName) {
        message.destroy();
        return message.warning("项目名称重复，请重新填写");
      }
      state.lpLoading = true;
      let obj = {
        name: state.pathName,
        remark: state.pathIntro,
        status: 0,
        organizationId: state.organizationSelectId,
        organizationName: state.organizationSelectName,
        picUrl: state.pathBg,
      };
      api
        .createLearnPath(obj)
        .then((res) => {
          console.log("创建学习路径成功", res);
          if (res.data.code === 200) {
            let chapterObj = {
              name: "关卡一",
              remark: "",
              routerId: res.data.data.routerId,
            };
            //创建关卡
            api
              .editChapter(chapterObj)
              .then((chapterRes) => {
                console.log("关卡创建成功", chapterRes);
                setTimeout(() => {
                  console.log("创建成功", res);
                  message.destroy();
                  message.success("创建成功");
                  state.lpLoading = false;
                  state.currentPage = 1;
                  router.push("/leveladd");
                  storage.set("routerId", res.data.data.routerId);
                  // getLearnPath();
                }, commonData.timeout);
              })
              .catch((chapterErr) => {
                console.log("关卡创建失败", chapterErr);
              });
            //添加归属权 [id: '966735050643083264', name: '丁舟航']
            let selectPeopleArr = [
              { id: res.data.data.createId, name: res.data.data.createName },
            ];
            changeOwnership(
              "learnPath",
              res.data.data.routerId,
              selectPeopleArr
            );
          }
        })
        .catch((err) => {
          console.log("创建失败", err);
          // state.createLoading = false;
        });
    };

    //获取学习路径列表
    const getLearnPath = () => {
      let obj = {
        pageNo: state.currentPage,
        pageSize: state.pageSize,
        name: state.pathnameSearch,
        status: state.statusClassify,
        beginTime: state.startTime,
        endTime: state.endTime,
        //添加创建人搜素 createUser
        createName: state.createUser,
      };
      api
        .getLearnPath(obj)
        .then((res) => {
          if (res.data.code === 200) {
            console.log("获取路径列表数据", res.data);
            let arr = res.data.data.rows;
            if (
              arr.length === 0 &&
              res.data.data.total > 0 &&
              state.currentPage > 1
            ) {
              state.currentPage = state.currentPage - 1;
              getLearnPath();
            }
            getTableDate(arr);
            state.tableDataTotal = Number(res.data.data.total);
          }
        })
        .catch((err) => {
          console.log("获取学习路径失败", err);
        });
    };
    //翻页
    const changePagination = (page) => {
      state.currentPage = page;
      getLearnPath();
      // console.log("翻页", page, pageSize);
    };
    //删除学习路径图
    const deleteLearnPath = () => {
      let obj = {
        routerId: state.deletePathId,
        type: -2,
      };
      api
        .handleLearnPath(obj)
        .then((res) => {
          if (res.data.code === 200) {
            console.log("删除成功", res);
            message.destroy();
            message.success("删除成功");
            state.deleteModal = false;
            getLearnPath();
          }
          if (res.data.code === -1) {
            message.warning(res.data.msg);
          }
        })
        .catch((err) => {
          console.log("删除失败", err);
        });
    };

    //获取路径图详细信息
    const getLearnPathInfo = (id) => {
      // console.log("编辑学习路径图id", id);
      //获取学习路径详情
      api
        .getRouterDetail(id)
        .then((res) => {
          if (res.data.code === 200) {
            console.log("获取学习路径详情成功", res.data.data);
            let detail = res.data.data.routerInfo;
            state.pathName = detail.name;
            state.pathBg = detail.picUrl;
            state.pathBgId = "";
            state.organizationSelectName = detail.organizationName;
            state.organizationSelectId = detail.organizationId;
            state.pathIntro = detail.remark;
            state.editPathId = id;
            let arr = imgData.value;
            arr.forEach((item) => {
              if (item.dictValue === state.pathBg) {
                state.pathBgId = item.dictCode;

              }
            });

            //for (let i = 0; i < arr.length; i++) {
             //  console.log("arr[i].dictValue", arr[i].dictValue, state.pathBg);
            //  if (arr[i].dictValue === state.pathBg) {
             //   state.pathBgId = arr[i].dictCode;

           //   }
          //  }
          }
        })
        .catch((err) => {
          console.log("获取详情失败", err);
        });
      state.out1 = true;
    };
    //编辑学习路径图
    const editLearnPath = async () => {
      if (!state.pathName) {
        message.destroy();
        return message.warning("请输入路径图名称");
      }
      if (!state.organizationSelectName) {
        message.destroy();
        return message.warning("请选择归属组织");
      }
      if (!state.pathBgId) {
        message.destroy();
        return message.warning("请选择背景图");
      }
      if (!state.validate) {
        message.destroy();
        return message.warning("路径图名称重复");
      }
      // state.pathName = detail.name;
      //     state.pathBg = detail.picUrl;
      //     state.pathBgId = "";
      //     state.organizationSelectName = detail.organizationName;
      //     state.organizationSelectId = detail.organizationId;
      //     state.pathIntro = detail.remark;
      //     state.editPathId = id;
      // state.createLoading = true;
      const offName = await validateName({
        name: state.pathName,
        type: 3,
        id:state.editPathId,
      }).then(res => {
        return res.data.data == 1;
      });
      if (offName) {
        message.destroy();
        return message.warning("项目名称重复，请重新填写");
      }
      let obj = {
        routerId: state.editPathId,
        name: state.pathName,
        picUrl: state.pathBg,
        remark: state.pathIntro,
        organizationName: state.organizationSelectName,
        organizationId: state.organizationSelectId,
        status: 0,
      };
      api
        .createLearnPath(obj)
        .then((res) => {
          if (res.data.code === 200) {
            console.log("修改成功", res);
            message.destroy();
            message.success("修改成功");
            // state.createLoading = false;
            // state.currentPage = 1;
            state.out1 = false;
            // router.push("/leveladd");
            getLearnPath();
            // setTimeout(() => {
            //   console.log("修改成功", res);
            //   message.success("修改成功");
            //   // state.createLoading = false;
            //   // state.currentPage = 1;
            //   state.out1 = false;
            //   // router.push("/leveladd");
            //   getLearnPath();
            // }, 1000);
          }
          if (res.data.code === -1) {
            message.warning(res.data.msg);
          }
        })
        .catch((err) => {
          console.log("修改失败", err);
          // state.createLoading = false;
        });
    };
    //选择状态
    const selectStatusClassify = (e, v) => {
      // console.log("eee", e, v);
      state.statusValue = e;
      state.statusClassify = v.classify;
    };
    //修改时间
    const searchTimeChange = (e, date) => {
      let startTime = date[0] + " 00:00:00";
      let endTime = date[1] + " 23:59:59";
      state.startTime = new Date(startTime).getTime() / 1000;
      state.endTime = new Date(endTime).getTime() / 1000;
      console.log("e", state.startTime, state.endTime);
    };
    //搜索学习路径
    const searchLearnPath = () => {
      state.currentPage = 1;
      console.log(
        "pathnameSearch",
        state.pathnameSearch,
        state.statusClassify,
        state.startTime,
        state.endTime
      );
      getLearnPath();
    };
    //重置学习路径
    const resetLearnPath = () => {
      state.currentPage = 1;
      state.pathnameSearch = null;
      state.statusValue = null;
      state.statusClassify = null;
      state.searchdate = null;
      state.startTime = null;
      state.endTime = null;
      state.createUser=null;
      getLearnPath();
    };

    //     const choiceEvaluation=()=>{
    //       let obj={
    //         keyword: "",
    // 	user_id: 1
    //       }
    //       api.choiceEvaluation(obj).then(res=>{
    // console.log('获取测评列表',res)
    //       }).catch(err=>{
    // console.log('获取测评列表失败',err)
    //       })
    //     }
    //     choiceEvaluation()

    // //字典获取路径图背景
    // const getDictList = (param) => {
    //   let obj = {
    //     pageNo: 1,
    //     pageSize: 20,
    //     setCode: param,
    //   };
    //   api
    //     .getDict(obj)
    //     .then((res) => {
    //       console.log("获取字典成功", res);
    //       if (res.status === 200) {
    //         if (param === "pathmapPic") {
    //           if (res.data.data.rows.length > 0) {
    //             state.imgData = [res.data.data.rows[0]];
    //           }
    //         }
    //       }
    //     })
    //     .catch((err) => {
    //       console.log("获取字典失败", err);
    //     });
    // };
    // getDictList("pathmapPic");
    //显示更多路径背景弹窗

    const showLearnBgMore = () => {
      state.learnBgMore = true;
    };
    //关闭更多路径背景弹窗
    const closeLearnBgMore = () => {
      state.learnBgMore = false;
    };
    onMounted(() => {
      // console.log("执行");
      getLearnPath();
      // if (store.state.pathmapPic.length > 0) {
      //   console.log("store.state.pathmapPic", store.state.pathmapPic);
      //   state.imgData = ;
      // }
    });
    const imgData = computed(()=>store.state.pathmapPic)
    //添加权限
    watch(
      () => state.addAuthList,
      (res) => {
        console.log("res", res, state.addAuthList);
        let obj = {
          type: 1,
          tag:
            state.authClassify === 1 ? 3 : state.authClassify === 2 ? 4 : null,
          opt: 3,
          deptList: res[1],
          groupList: res[2],
          refId: state.selectPathId,
          pageNo: 20,
          pageSize: 1,
          studentList: res[0],
          keyWord: "",
        };
        console.log("obj", obj);
        api
          .optionAuthPerm(obj)
          .then((res) => {
            console.log("添加授权成功", res);
            message.success("添加授权成功");
          })
          .catch((err) => {
            console.log("添加授权失败", err);
          });
      }
    );

    return {
      ...toRefs(state),
      imgData,
      selectProjectName,
      expandTable,
      handleOut,
      handleOut1,
      showPub,
      releaseLearnPath,
      closePub,
      showCopyModal,
      closeCopyModal,
      showStopModal,
      closeStopModal,
      copyLearnPath,
      stopLearnPath,
      showDeleteModal,
      closeDeleteModal,
      showStartModal,
      closeStartModal,
      showBackModal,
      closeBackModal,
      recallPath,
      showOwner,
      showPower,
      tableDataFunc,
      chooseImg,
      chooseImg2,
      showQuery,
      showManage,
      createLearnPath,
      selectorganization,
      changePagination,
      deleteLearnPath,
      editLearnPath,
      selectStatusClassify,
      searchTimeChange,
      searchLearnPath,
      resetLearnPath,
      showLearnBgMore,
      closeLearnBgMore,
    };
  },
};
</script>
<style lang="scss">
.clearfix:before,
.clearfix:after {
  content: " ";
  display: block;
  clear: both;
}

.CreatePath {
  .ant-modal {
    width: 680px !important;
    height: 528px !important;

    .ant-modal-content {
      width: 680px !important;
      height: 528px !important;

      .ant-modal-body {
        width: 680px !important;
        height: 528px !important;
        padding: 0 !important;

        .out {
          display: block;
          position: absolute;
          top: 90px;
          width: 680px;
          // height: 525px;
          background-color: #fff;

          box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);

          .top {
            width: 100%;
            height: 68px;

            background: linear-gradient(
              rgba(78, 166, 255, 0.2) 0%,
              rgba(78, 166, 255, 0) 100%
            );
            display: flex;
            align-items: center;

            .topimg {
              width: 18px;
              height: 18px;
              margin-left: 27px;
              margin-top: -2px;
            }

            .topc {
              color: #000000;
              font-size: 16px;
              margin-left: 8px;
            }
          }

          .mid {
            width: 100%;
            height: 100%;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;

            .d {
              // margin-top: 8px;
              // color: #ff4e4e;
              margin-left: -5px;
            }

            .name {
              width: 78%;
              // background-color: lightcoral;
              display: flex;
              margin-top: 20px;
              align-items: center;
              height: 40px;
              // border: 1px solid black;

              .inname {
                color: #6f6f6f;
                font-size: 14px;
                margin-left: 7px;
              }

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

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

                .showcount {
                  position: absolute;
                  right: 10px;
                  color: #c7cbd2;
                  bottom: 5px;
                }
              }
            }

            .bac {
              width: 78%;
              // background-color: lightcoral;
              display: flex;
              margin-top: 30px;
              // border: 1px solid black;
              .d {
                margin-top: 18px;
                color: #ff4e4e;
              }

              .inname {
                color: #6f6f6f;
                font-size: 14px;
                margin-left: 7px;
                margin-top: 15px;
              }

              .in {
                margin-left: 14px;
                width: 81%;
                // height: 110px;
                // background-color: red;
                display: flex;
                // justify-content: space-between;
                .im {
                  border-radius: 8px;
                  width: 140px;
                  height: 110px;
                  cursor: pointer;
                }
              }

              .learnBg {
                display: flex;
                flex-wrap: wrap;
                min-height: 110px;
                max-height: 300px;

                .learnBgItem {
                  border-radius: 8px;
                  width: 136px;
                  height: 106px;
                  background-size: 100%;
                  background-repeat: no-repeat;
                  margin-bottom: 20px;
                  margin-right: 6px;
                }

                .learnBgMore {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  border: 1px solid #c7cbd2;
                  font-size: 14px;
                  font-weight: 400;
                  color: #4ea6ff;
                  line-height: 36px;
                  cursor: pointer;
                }
              }
            }

            .info {
              width: 78%;
              // background-color: lightcoral;
              display: flex;
              margin-top: 30px;
              // align-items: center;
              // height: 40px;
              // border: 1px solid black;

              .inname {
                color: #6f6f6f;
                font-size: 14px;
                margin-left: 26px;
                margin-top: 15px;
              }

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

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

                .showcount {
                  position: absolute;
                  right: 10px;
                  color: #c7cbd2;
                  bottom: 5px;
                }
              }
            }

            .btn {
              width: 33%;
              margin-top: 30px;
              display: flex;
              justify-content: space-between;
              margin-bottom: 30px;

              .samtn {
                width: 100px;
                height: 40px;
                font-size: 14px;
                border: 1px solid #4ea6ff;
                border-radius: 8px;
                cursor: pointer;
              }

              .btn1 {
                background-color: #fff;
                color: #4ea6ff;
              }

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

.learnBgMoreModal {
  .ant-modal {
    width: 680px !important;
    height: 528px !important;

    .ant-modal-content {
      width: 680px !important;
      height: 528px !important;

      .ant-modal-body {
        width: 680px !important;
        height: 528px !important;
        padding: 0 !important;

        .main {
          display: flex;
          flex-direction: column;

          .top {
            padding-left: 51px;
            padding-right: 51px;
            padding-top: 28px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;

            .topc {
              font-size: 16px;
              font-weight: bold;
              color: #000000;
              line-height: 36px;
            }
          }

          .imagesBox {
            display: flex;
            //  justify-content: space-between;
            flex-wrap: wrap;
            padding-left: 51px;
            padding-right: 39px;
            margin-top: 20px;
            height: 350px;
            overflow-y: auto;

            .learnBgItem {
              border-radius: 8px;
              width: 136px;
              height: 106px;
              background-size: 100%;
              background-repeat: no-repeat;
              margin-bottom: 20px;
              margin-right: 10px;
            }
          }

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

            .samtn {
              width: 100px;
              height: 40px;
              font-size: 14px;
              border: 1px solid #4ea6ff;
              border-radius: 8px;
              cursor: pointer;
            }

            .btn1 {
              background-color: #fff;
              color: #4ea6ff;
            }

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

.pub {
  .ant-modal {
    .ant-modal-body {
      padding: 0;

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

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

        .projecttime {
          margin-left: 221px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        .pubtn {
          display: flex;
          justify-content: center;
          margin-top: 25px;
          //margin-bottom: 29px;
          .pubtn1 {
            width: 100px;
            height: 40px;
            margin-right: 16px;
            margin-bottom: 29px;
            border: 1px solid #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;
          }
        }
      }
    }
  }
}

.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/taskpage/gan.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;
              }
            }
          }
        }
      }
    }
  }
}

.learningPath {
  width: 100%;
  // height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  // position: relative;
  .datanull {
    display: flex;
    flex: 1;
    width: 100%;
    //background: red;
    justify-content: center;
    align-items: center;

    .nodata_box {
      width: 412px;
      height: 212px;
      position: relative;
      background: linear-gradient(180deg, #fef3dd, #fffaf0);
      border-radius: 10px;

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

      .center {
        position: absolute;
        top: 32px;
        left: 170px;
      }

      .text1 {
        position: absolute;
        top: 128px;
        left: 178px;
        font-size: 20px;
        color: #ffb64e;
        font-weight: 500;
      }

      .text2 {
        position: absolute;
        bottom: 32px;
        left: 174px;
        font-size: 14px;
        color: #878b92;
        font-weight: 500;
      }

      .right {
        position: absolute;
        bottom: 18px;
        right: 0;
      }
    }
  }

  .filter {
    margin-left: 35px;
    margin-right: 35px;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .filterItems {
      display: flex;
      flex-wrap: wrap;

      .pathnameInp {
        margin-right: 20px;
        margin-bottom: 20px;
      }

      .select {
        margin-right: 20px;
        margin-bottom: 20px;
      }

      .addTimeBox {
        position: relative;
        display: flex;
        align-items: center;

        .addTime {
          position: absolute;
          z-index: 10;
          margin-left: 10px;
          color: rgba(0, 0, 0, 0.4);
        }

        .ant-picker {
          padding-left: 85px;
        }

        .ant-picker-range .ant-picker-active-bar {
          margin-left: 85px;
        }
      }

      .btn {
        padding: 0px 26px 0px 26px;
        height: 38px;
        background: #4ea6ff;
        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: #ffffff;
          line-height: 36px;
          margin-left: 5px;
        }
      }

      .btnn {
        padding: 0px 26px 0px 26px;
        height: 38px;
        background: #ffffff;
        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: #4ea6ff;
          line-height: 36px;
          margin-left: 5px;
        }
      }

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

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

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

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

        .btnText {
          color: #ffffff;
        }
      }

      .btn1:active {
        background: #0982ff;
      }

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

      .btn2:active {
        background: rgba(64, 158, 255, 0.2);
      }
    }

    .btns {
      display: flex;
      // flex-wrap: wrap;
      .btn {
        padding: 0px 26px 0px 26px;
        height: 38px;
        background: #4ea6ff;
        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: #ffffff;
          line-height: 36px;
          margin-left: 5px;
        }
      }

      .btn3 {
        margin-right: 0px;

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

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

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

        .btnText {
          color: #ffffff;
        }
      }

      .btn3:active {
        background: #0982ff;
      }
    }
  }

  .tableBox {
    // margin: 20px 38px 30px;
    margin: 10px 35px 0px 35px;

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

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

  .tableBox {
    padding-bottom: 20px;

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

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

    .nSelect {
      .fb {
        display: flex;
        white-space: nowrap;

        .jc {
          color: #4ea6ff;
          font-size: 14px;
          margin-left: 20px;
          white-space: nowrap;
          cursor: pointer;
        }
      }
    }

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

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

  .unout {
    display: none;
  }

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

    .opacation {
      font-size: 14px;
      font-weight: 400;
      color: #4ea6ff;
      display: flex;
      // line-height: 36px;
      .activecls {
        display: inline-block;
      }

      .errorCls {
        display: none;
      }

      .more {
        position: relative;
        height: 100%;

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

        .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: 30px;
          z-index: 999;
        }
      }

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

      .more:hover .moreItems {
        display: block;
      }
    }
  }
}
</style>
