<template>
  <div class="leveladddetail">
    <div class="left clearfix">
      <div class="leftmain">
        <div class="tit" style="margin-left: 18px">关卡</div>
        <div class="btn btn3" style="margin-left: 19px">
          <div class="search"></div>
          <div class="btnText" @click="showModal">添加关卡</div>
        </div>
        <div class="maincon" style="background-color: #fff">
          <!-- <div
            class="items"
            :class="{ active: isActive == true }"
            @click="changebgc"
            v-for="item in level"
            :key="item.id"
          > -->
          <div
            class="items"
            :class="isactive == index ? 'active' : ''"
            @click="changebgc(index)"
            v-for="(item, index) in level"
            :key="item.chapterId"
          >
            <div class="items1">
              <div class="boxs_left">
                <div class="script">
                  <span style="font-size: 12px; color: #ffffff">说明</span>
                </div>
                <div class="imgIcon"></div>
              </div>
              <div class="boxs_right">
                <div class="imgIcon"></div>
              </div>
            </div>
            <div class="items2">
              <div class="nname">{{ item.name }}</div>
            </div>
            <!-- <div class="itemle">
              <div class="tit">{{ item.remark }}</div>
              <div class="name">{{ item.name }}</div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <a-modal
      v-model:visible="modal"
      centered="true"
      :footer="null"
      :closable="clos"
      wrapClassName="AddLevell"
    >
      <div class="header">
        <div class="headmain">
          <div class="add">添加关卡</div>
          <div class="img" style="cursor: pointer" @click="closeModal"></div>
        </div>
      </div>
      <div class="main">
        <div class="inma">
          <div class="name">
            <div class="d" style="margin-top: 2px;margin-right:2px">
              <img
                style="width: 10px; height: 10px"
                src="../../assets/images/basicinfo/asterisk.png"
              />
            </div>
            <div class="fir">关卡名称：</div>
            <div class="input">
              <a-input
                style="width: 100%"
                v-model:value="value1"
                :maxlength="20"
                placeholder="请输入关卡名称"
              />
            </div>
            <div class="co">{{ value1.length }}/20</div>
          </div>
          <div class="name">
          <div class="d" style="width: 10px;height: 10px;margin-top: 2px;margin-right:2px">
            </div>
            <div class="fir">关卡说明：</div>
            <div class="input">
              <a-textarea
                style="width: 100%"
                v-model:value="value2"
                :maxlength="100"
                placeholder="请输入关卡说明"
                :rows="5"
              />
            </div>
            <div class="co1">{{ value2.length }}/100</div>
          </div>
          <div class="btn">
            <button class="btn1" @click="closeModal">取消</button>
            <button class="btn2" @click="editChapter">确定</button>
          </div>
        </div>
      </div>
    </a-modal>
    <div class="right" :style="{ display: gqxy_hs ? 'block' : 'none' }">
      <div class="addhead">
        <div class="filt">
          <div class="le">
            <div class="leftimg">
              <img class="img" src="../../assets/px.jpg" />
            </div>
            <div class="imgfor">
              <div class="forz">产品经理进阶路径</div>
              <div class="fort">创建时间：2022-07-21 00:00</div>
            </div>
          </div>
          <div class="rightt">
            <div class="select">
              <span>学习模式：</span>
              <div class="inputbox">
                <input type="text" placeholder="按学习时间解锁" />
                <div class="bottonbox"><div class="btnText">切换模式</div></div>
              </div>
            </div>
            <div class="line"></div>
            <router-link to="/leveladd">
              <div style="display: flex">
                <img class="img2" src="../../assets/images/leveladd/back.png" />
                <div class="return">返回</div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
      <div class="mid">
        <div class="item">
          <div class="itcon">
            <div class="img">
              <img src="../../assets/images/leveladd/zai.png" />
            </div>
            <div class="text">在线</div>
          </div>
          <div class="lin"></div>
        </div>
        <div class="item">
          <div class="itcon">
            <div class="img">
              <img src="../../assets/images/leveladd/mian.png" />
            </div>
            <div class="text">面授</div>
          </div>
          <div class="lin"></div>
        </div>
        <div class="item">
          <div class="itcon">
            <div class="img">
              <img src="../../assets/images/leveladd/an.png" />
            </div>
            <div class="text">案例</div>
          </div>
          <div class="lin"></div>
        </div>
        <div class="item">
          <div class="itcon">
            <div class="img" @click="showDrawerAddHomework">
              <img src="../../assets/images/leveladd/zuo.png" />
            </div>
            <div class="text">作业</div>
          </div>
          <!-- 添加作业侧弹窗 -->
          <div>
            <add-homework 
            flag=0  routerTaskId=ListChoosedId
            v-model:addhomeworkVisible="addhomeworkvisible" />
          </div>
          <div class="lin"></div>
        </div>
        <div class="item">
          <div class="itcon">
            <div class="img" @click="showDrawerAddTest">
              <img src="../../assets/images/leveladd/kao.png" />
            </div>
            <div class="text">考试</div>
          </div>
          <!-- 添加考试侧弹窗 -->
          <div>
            <add-test v-model:addtestVisible="addtestvisible" />
          </div>
          <div class="lin"></div>
        </div>
        <div class="item">
          <div class="itcon">
            <div class="img">
              <img src="../../assets/images/leveladd/zhi.png" />
            </div>
            <div class="text">直播</div>
          </div>
          <div class="lin"></div>
        </div>
        <div class="item">
          <div class="itcon">
            <div class="img">
              <img src="../../assets/images/leveladd/wai.png" />
            </div>
            <div class="text">外链</div>
          </div>
          <div class="lin"></div>
        </div>
        <div class="item">
          <div class="itcon">
            <div class="img">
              <img src="../../assets/images/leveladd/tao.png" />
            </div>
            <div class="text">讨论</div>
          </div>
          <div class="lin"></div>
        </div>
        <div class="item">
          <div class="itcon">
            <div class="img">
              <img src="../../assets/images/leveladd/huo.png" />
            </div>
            <div class="text">活动</div>
          </div>
          <div class="lin"></div>
        </div>
        <div class="item">
          <div class="itcon">
            <div class="img">
              <img src="../../assets/images/leveladd/ce.png" />
            </div>
            <div class="text">测评</div>
          </div>
          <div class="lin"></div>
        </div>
        <div class="item">
          <div class="itcon">
            <div class="img">
              <img src="../../assets/images/leveladd/diao.png" />
            </div>
            <div class="text">评估</div>
          </div>
          <div class="lin"></div>
        </div>
        <div class="item">
          <div class="itcon">
            <div class="img">
              <img src="../../assets/images/leveladd/tou.png" />
            </div>
            <div class="text">投票</div>
          </div>
          <div class="lin"></div>
        </div>
        <div class="item">
          <div class="itcon">
            <div class="img">
              <img
                src="../../assets/images/leveladd/xiang.png"
                @click="showDrawer"
              />
            </div>
            <div class="text">项目</div>
          </div>
        </div>
      </div>
      <div class="boom">
        <div class="boomcen">
          <div class="title">
            <div class="tit_left">
              <span>任务列表</span>
            </div>
            <div class="tit_right">
              <div class="btn btn1">
                <div class="btnText">移动到任务阶段</div>
              </div>
              <div class="btn btn2">
                <div class="imgIcon"></div>
                <div class="btnText" @click="showDeleteALLModal">批量删除</div>
              </div>
            </div>
          </div>
          <div class="tableBox">
            <a-table
              style="border: 1px solid #f2f6fe"
              :columns="tableDataFunc()"
              :data-source="tableData"
              :loading="tableDataTotal === -1 ? true : false"
              expandRowByClick="true"
              @expand="expandTable"
              :pagination="false"
              :row-selection="{
                columnWidth: 30,
                selectedRowKeys: selectedRowKeys,
                onChange: onSelectChange,
              }"
            />
          </div>
          <!-- 无数据样式 -->
          <div class="notable" :style="{ display: stm_hs ? 'block' : 'none' }">
            <div class="notablebox">
              <div class="boxbody">
                <div class="boximg"></div>
                <div class="boxtitle">
                  <span style="color: #ffb64e; font-size: 20px">无任务</span>
                </div>
                <div class="boxtitle2">
                  <span style="color: #878b92">请点击上方，创建任务</span>
                </div>
              </div>
              <div class="smallleft"></div>
              <div class="smallright"></div>
            </div>
          </div>
          <!-- 无数据样式 -->
        </div>
      </div>
      <div class="footbtn">
        <div class="btnbox">
          <div class="btn btn2">
            <div class="btnText">暂存</div>
          </div>
          <div class="btn btn2">
            <div class="btnText">确定</div>
          </div>
          <div class="btn btn1" @click="gqxy_hShow">
            <div class="btnText">下一步</div>
          </div>
        </div>
      </div>
      <div class="draw" style="position: relative">
        <a-drawer
          v-model:visible="visible"
          class="drawerStyle ProjectDrawer"
          title="关联项目"
          placement="right"
          width="80%"
          @after-visible-change="afterVisibleChange"
        >
          <div class="drawerMain">
            <div class="header">
              <div class="headerTitle">关联项目</div>
              <img
                style="width: 29px; height: 29px; cursor: pointer"
                src="../../assets/images/basicinfo/close.png"
                @click="closeDrawer"
              />
            </div>
            <div class="drawerbox">
              <a-table
                :columns="drawertableColumns()"
                :data-source="drawertableData"
                :loading="tableDataTotal === -1 ? true : false"
                :scroll="{ x: 700 }"
                @expand="expandTable"
                :pagination="false"
              >
              </a-table>
            </div>
            <div class="btnn">
              <button @click="showDrawer" class="btn1">取消</button>
              <button @click="showDrawer" class="btn2">确定</button>
            </div>
          </div>
        </a-drawer>
      </div>
    </div>
    <div class="right" :style="{ display: gqxy_hs ? 'none' : 'block' }">
      <div class="addhead">
        <div class="filt">
          <div class="le">
            <div class="leftimg">
              <img class="img" src="../../assets/px.jpg" />
            </div>
            <div class="imgfor">
              <div class="forz">产品经理进阶路径</div>
              <div class="fort">创建时间：2022-07-21 00:00</div>
            </div>
          </div>
          <div class="rightt">
            <div class="select">
              <span>学习模式：</span>
              <div class="inputbox">
                <input type="text" placeholder="按学习时间解锁" />
                <div class="bottonbox"><div class="btnText">切换模式</div></div>
              </div>
            </div>
            <div class="line"></div>
            <router-link to="/leveladd">
              <div style="display: flex">
                <img class="img2" src="../../assets/images/leveladd/back.png" />
                <div class="return">返回</div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
      <div class="boom">
        <div class="boomcen">
          <div class="xwid">
            <div class="xin">
              <div class="xheadb">
                <button class="addx" @click="showAddStu">添加学员</button>
                <!-- 点击抽屉组件在LevelAdd，此处没添加showAddStu、showImpStu -->
                <button class="addd" @click="showImpStu">导入学员</button>
                <button class="addd" @click="showDeleteALLModal">
                  批量删除
                </button>
              </div>
              <!-- <div class="talk">
                <img class="im" src="../../assets/images/leveladd/gan.png" />
                <div class="xu">
                  <span class="yi">已选择</span>
                  <div style="width: 5px; display: inline-block"></div>
                  <span class="th">3</span>
                  <div style="width: 5px; display: inline-block"></div>
                  <span class="yi">项</span>
                  <span class="zon">列表选项总数：</span>
                  <span class="yi">5</span>
                  <span class="yi">条</span>
                </div>
              </div> -->
              <div class="tablebox1" style="margin-top: 20px">
                <a-table
                  style="border: 1px solid #f2f6fe"
                  :columns="tableDataFunc2()"
                  :data-source="tableData2"
                  :loading="tableDataTotal === -1 ? true : false"
                  expandRowByClick="true"
                  @expand="expandTable"
                  :pagination="false"
                  :row-selection="{
                    columnWidth: 30,
                    selectedRowKeys: selectedRowKeys,
                    onChange: onSelectChange,
                  }"
                />
                <!-- <div class="pa">
                  <a-pagination
                    showSizeChanger="true"
                    showQuickJumper="true"
                    hideOnSinglePage="true"
                    :pageSize="pageSize"
                    :current="currentPage"
                    :total="tableDataTotal"
                    class="pagination"
                  />
                </div> -->
                <!-- 无数据样式 -->
                <div
                  class="notable"
                  :style="{ display: stm_hs ? 'block' : 'none' }"
                >
                  <div class="notablebox">
                    <div class="boxbody">
                      <div class="boximg"></div>
                      <div class="boxtitle">
                        <span style="color: #ffb64e; font-size: 20px"
                          >无学员</span
                        >
                      </div>
                      <div class="boxtitle2">
                        <span style="color: #878b92">请添加学员或导入学员</span>
                      </div>
                    </div>
                    <div class="smallleft"></div>
                    <div class="smallright"></div>
                  </div>
                </div>
                <!-- 无数据样式 -->
              </div>
            </div>
            <div class="pad"></div>
          </div>
        </div>
      </div>
      <div class="footbtn">
        <div class="btnbox">
          <div class="btn btn1" @click="gqxy_hShow">
            <div class="btnText">上一步</div>
          </div>
          <div class="btn btn2">
            <div class="btnText">保存</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 添加学员抽屉 -->
    <add-stu v-model:AddSvisible="AddSvisible" />
    <!-- 导入学员抽屉 -->
    <imp-stu v-model:AddImpStuvisible="AddImpStuvisible" />
    <!-- 批量删除学员弹窗 -->
    <a-modal
      v-model:visible="deleteAll"
      :footer="null"
      :closable="closeDeleteAll"
      wrapClassName="CopyModal"
      centered="true"
    >
      <div class="delete">
        <div class="del_header"></div>
        <div class="del_main">
          <div class="header">
            <div class="icon"></div>
            <span>提示</span>
            <div class="close_exit" @click="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>
</template>

<script>
import { reactive, toRefs, onMounted, onUnmounted } from "vue";
import AddStu from "../../components/drawers/AddLevelAddStu";
import ImpStu from "../../components/drawers/AddLevelImportStu";
import AddHomework from "../../components/drawers/AddHomework.vue";
import AddTest from "../../components/drawers/AddTest.vue";
import * as api from "../../api/indexLevel";
import { GetRouterDetail, RouterDeleteTask } from "../../api/indexTask";
import { message } from "ant-design-vue";
export default {
  name: "LevelAddDetail",
  components: {
    AddStu,
    ImpStu,
    AddHomework,
    AddTest
  },
  setup() {
    const state = reactive({
      level: [
        {
          chapterId: "1",
          remark: "关卡说明",
          name: "默认关卡",
        }
      ],
      tableData: [
        {
          key: 1,
          lei: "在线",
          // state: "已发布",
          creater: "管理者课程",
          // pubtime: "2022-07-20 14:00:03",
          cretime: "60分钟",
          haspub: false,
          checked1: false,
          checkedd: false,
        },
      ],
      tableData2: [
        {
          key: 1,
          name: "张三",
          com: "产研部",
          gang: "产品经理",
          cur: "关卡2",
          jin: "2/10",
          time: "2022-07-15 14:00",
        },
        {
          key: 2,
          name: "张三",
          com: "产研部",
          gang: "产品经理",
          cur: "关卡2",
          jin: "2/10",
          time: "2022-07-15 14:00",
        },
        {
          key: 3,
          name: "张三",
          com: "产研部",
          gang: "产品经理",
          cur: "关卡2",
          jin: "2/10",
          time: "2022-07-15 14:00",
        },
        {
          key: 4,
          name: "张三",
          com: "产研部",
          gang: "产品经理",
          cur: "关卡1",
          jin: "2/10",
          time: "2022-07-15 14:00",
        },
        {
          key: 5,
          name: "张三",
          com: "产研部",
          gang: "产品经理",
          cur: "关卡1",
          jin: "2/10",
          time: "2022-07-15 14:00",
        },
        {
          key: 6,
          name: "张三",
          com: "产研部",
          gang: "产品经理",
          cur: "关卡2",
          jin: "2/10",
          time: "2022-07-15 14:00",
        },
        {
          key: 7,
          name: "张三",
          com: "产研部",
          gang: "产品经理",
          cur: "关卡2",
          jin: "2/10",
          time: "2022-07-15 14:00",
        },
        {
          key: 8,
          name: "张三",
          com: "产研部",
          gang: "产品经理",
          cur: "关卡2",
          jin: "2/10",
          time: "2022-07-15 14:00",
        },
      ],
      drawertableData: [
        {
          key: 1,
          projectName: "管理者进阶",
          manager: "黄华  刘俊",
          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
          children: [
            {
              key: "1-1",
              projectName: "管理者进阶-腾飞班",
              manager: "黄华  刘俊",
              creater: "毛继禹",
              time: "2022-07-20 14:00:03",
              children: [
                {
                  key: "1-1-1",
                  projectName: "管理者进阶-腾飞班K1",
                  manager: "黄华  刘俊",
                  creater: "毛继禹",
                  time: "2022-07-20 14:00:03",
                },
              ],
            },
          ],
        },
        {
          key: 2,
          projectName: "管理者进阶",
          manager: "黄华  刘俊",
          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
          children: [
            {
              key: "2-1",
              projectName: "管理者进阶-腾飞班",
              manager: "黄华  刘俊",

              creater: "毛继禹",
              time: "2022-07-20 14:00:03",
              children: [
                {
                  key: "2-1-1",
                  projectName: "管理者进阶-腾飞班K1",
                  manager: "黄华  刘俊",
                  creater: "毛继禹",
                  time: "2022-07-20 14:00:03",
                },
              ],
            },
          ],
        },

        {
          key: 3,
          projectName: "管理者进阶-腾飞班K1",
          manager: "黄华  刘俊",

          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
        },
        {
          key: 4,
          projectName: "管理者进阶-腾飞班K1",
          manager: "黄华  刘俊",

          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
        },
        {
          key: 5,
          projectName: "管理者进阶-腾飞班K1",
          manager: "黄华  刘俊",

          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
        },
        {
          key: 6,
          projectName: "管理者进阶-腾飞班K1",
          manager: "黄华  刘俊",

          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
        },
        {
          key: 7,
          projectName: "管理者进阶-腾飞班K1",
          manager: "黄华  刘俊",

          creater: "毛继禹",
          time: "2022-07-20 14:00:03",
        },
      ],
      currentPage: 1,
      tableDataTotal: 100,
      pageSize: 10,
      visible: false,
      AddSvisible: false, //添加学员抽屉
      AddImpStuvisible: false, //导入学员抽屉
      modal: false,
      clos: false,
      stm_hs: false,
      deleteAll: false,
      closeDeleteAll: false,
      value1: "",
      value2: "",
      selectedRowKeys: [],
      gqxy_hs: true,
      isactive: 0,
      projectChecked: null, //项目单选框
      addhomeworkvisible: false,
      addtestvisible:false,
      updateChapterID: null, //修改关卡id
      // 表示当前触发列表的id,用来发送编辑和删除
      ListChoosedId:0
    });

    //新建关卡
    const editChapter = () => {
       if(!state.value1) return message.warning("请输入关卡名称");
      let obj = {
        name: state.value1,
        remark: state.value2,
        routerId: 0,
      };
      api
        .editChapter(obj)
        .then((res) => {
          setTimeout(() => {
            console.log("创建成功", res);
            message.success("创建成功");
            state.value1 = "";
            state.value2 = "";
            state.modal = false;
            // state.createLoading = false;
            //state.currentPage = 1;
            // getLearnPath();
          }, 1000);
        })
        .catch((err) => {
          console.log("创建失败", err);
        });
    }

    //编辑关卡
    // const updateChapter = () => {
    //   let obj = {
    //     chapterId: state.updateChapterID,
    //     name: "",
    //     remark:"",
    //     routerId: 0,
    //   };
    //   api
    //     .updateChapter(obj)
    //     .then((res) => {
    //       console.log("修改成功",res);
    //       message.success("修改成功");
    //     })
    //     .catch((err) => {
    //       console.log("修改失败",err);
    //     })
    // };
    const showDrawer = () => {
      state.visible = true;
    };
    // 作业和考试的抽屉
    const showDrawerAddHomework = () => {
      state.addhomeworkvisible = true;
      state.ListChoosedId = 0
    };
    const showDrawerAddTest = () => {
      state.addtestvisible = true;
      state.ListChoosedId = 0
    };

    // tableData数据赋值方法
    const dataAssignment = () => {
      console.log((state.level));
      state.level[0].taskList.forEach((element,index) => {
        state.tableData[index] = {
          key:element.routerTaskId,
          lei:checkType(element.type),
          creater:element.name,
          cretime:element.duration,
          checked1:element.flag
        }
      });
    }
    const getDetail = (index) => {
      GetRouterDetail(92).then((res) => {
        state.level = res.data.data.chapterList
        console.log(state.level);
        if(index == 0) {
        //   state.tableData[1] = {
        //   key: 2,
        //   lei: "在线",
        //   creater: "管理者课程",
        //   cretime: "60",
        //   checked1: true,
        // }
        dataAssignment(0)
        }
      }).catch((err) => {
        message.error(err)
      })
    }
    const closeDrawer = () => {
      state.visible = false;
    };
    const showModal = () => {
      state.modal = true;
    };
    const closeModal = () => {
      state.modal = false;
      state.value1 = "";
      state.value2 = "";
    };
    const afterVisibleChange = (bool) => {
      console.log("visible", bool);
    };
    const showAddStu = () => {
      state.AddSvisible = true;
    };
    const showImpStu = () => {
      state.AddImpStuvisible = true;
    };
    const tableDataFunc = () => {
      const columns = [
        {
          title: "类型",
          dataIndex: "state",
          // width: "30%",
          key: "state",
          width: 60,
          align: "left",
          className: "classify",
          scopedSlots: { customRender: "action" }, //引入的插槽
          customRender: (text) => {
            // console.log(text.record.checked1);
            return (
              <div class="racona">
                <div
                  class="img"
                  style={{ cursor: "pointer" }}
                  onClick={() => {
                    console.log("点击了");
                  }}
                ></div>
                <span> {text.record.lei}</span>

                {/**
								<div class="img"></div>
                <a-checkbox class="ch" checked={text.record.checkedd}>
                  {text.record.lei}
                </a-checkbox>
*/}
              </div>
            );
          },
        },
        {
          title: "任务名称",
          dataIndex: "creater",
          // width: "30%",
          key: "creater",
          width: 200,
          align: "center",
          className: "h",
        },
        {
          title: "必修/选修",
          dataIndex: "pubtime",
          key: "pubtime",
          // width: 100,
          align: "center",
          className: "h",
          scopedSlots: { customRender: "action" }, //引入的插槽
          customRender: (text) => {
            // console.log(text.record.checked1);
            return (
              <div class="opat">
                <div class="opacationt clearfix">
                  <a-switch
                    style="margin-left:-50px;margin-top:3px"
                    checked={text.record.checked1}
                    size="small"
                    active-color="red"
                    onClick={() => {
                      console.log("点击了");
                      text.record.checked1 = !text.record.checked1;
                    }}
                  />
                  <div class="showt clearfix">
                    <div
                      class="bi"
                      style={
                        text.record.checked1 ? "z-index:999" : "z-index:998"
                      }
                    >
                      必修
                    </div>
                    <div class="xuan">选修</div>
                  </div>
                </div>
              </div>
            );
          },
        },
        {
          title: "时长",
          dataIndex: "cretime",
          key: "cretime",
          // width: 100,
          align: "center",
          className: "h",
        },
        {
          title: "操作",
          className: "h",
          dataIndex: "opacation",
          key: "opacation",
          // width: 100,
          align: "center",
          scopedSlots: { customRender: "action" }, //引入的插槽
          customRender: () => {
            return (
              <div class="opa">
                <div class="opacation">
                  <span style="color:#4EA6FF;margin-right:25px;cursor:pointer">
                    编辑
                  </span>
                  <span style="color:#4EA6FF;cursor:pointer" onClick={() => {
                    deleteLevelTask()
                  }}>删除</span>
                </div>
              </div>
            );
          },
        },
      ];
      return columns;
    };
    const checkType = (index) => {
      let typeRules = ["","在线","面授","案例","作业","考试","直播","外链","讨论","测评","评估","投票"];
      return typeRules[index];
    }
    const tableDataFunc2 = () => {
      const columns = [
        {
          title: "姓名",
          dataIndex: "name",
          // width: "30%",
          key: "name",
          width: 60,
          align: "left",
          ellipsis: true,
          className: "classify",
          scopedSlots: { customRender: "action" }, //引入的插槽
          customRender: (text) => {
            return (
              <div class="racona">
                <span> {text.record.name}</span>

                {/**
								<div class="img"></div>
                <a-checkbox class="ch" checked={text.record.checkedd}>
                  {text.record.lei}
                </a-checkbox>
*/}
              </div>
            );
          },
        },
        {
          title: "部门",
          dataIndex: "com",
          // width: "30%",
          key: "com",
          width: 110,
          align: "center",
          className: "h",
        },
        {
          title: "岗位",
          dataIndex: "gang",
          key: "gang",
          width: 110,
          align: "center",
          className: "h",
        },
        {
          title: "当前关卡",
          dataIndex: "cur",
          key: "cur",
          width: 110,
          align: "center",
          className: "h",
        },
        {
          title: "进度",
          dataIndex: "jin",
          key: "jin",
          width: 110,
          align: "center",
          className: "h",
        },
        {
          title: "开始时间",
          dataIndex: "time",
          key: "time",
          width: 120,
          align: "center",
          className: "h",
        },
        {
          title: "操作",
          className: "h",
          dataIndex: "opacation",
          key: "opacation",
          width: 140,
          align: "center",
          scopedSlots: { customRender: "action" }, //引入的插槽
          customRender: () => {
            return (
              <div class="opa">
                <div class="opacation">
                  <span style="color:#4EA6FF;cursor:pointer">删除</span>
                </div>
              </div>
            );
          },
        },
      ];
      return columns;
    };

    const onSelectChange = (selectedRowKeys) => {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      state.selectedRowKeys = selectedRowKeys;
    };

    const drawertableColumns = () => {
      // let arr = state.drawertableData;
      // function traverse(arr) {
      //   for (var a in arr) {
      //     // console.log(arr[a]);
      //     if (arr[a].children) {
      //       traverse(arr[a].children); //递归遍历
      //     } else {
      // 			console.log(arr[a].children); //如果是值就显示

      //     }
      //   }
      // }
      // traverse(arr);
      const drawercolumns = [
        {
          title: "项目名称",
          dataIndex: "projectName",
          key: "projectName",
          width: 200,
          // align: "center",
          ellipsis: true,
          // scopedSlots: { customRender: "action" }, //引入的插槽
          customRender: (text) => {
            // console.log(text.record.key);
            if (!text.record.children) {
              return (
                <div style={{ display: "flex" }}>
                  <a-checkbox
                    checked={
                      state.projectChecked === text.record.key ? true : false
                    }
                    value={text.record.key}
                    onChange={() => {
                      // console.log("改变了", text.record.key);
                      if (state.projectChecked === text.record.key) {
                        state.projectChecked = null;
                      } else {
                        state.projectChecked = text.record.key;
                      }
                    }}
                  ></a-checkbox>
                  <span style="margin-left: 5px">{text.text}</span>
                </div>
              );
            } else {
              return <span>{text.text}</span>;
            }
          },
        },
        {
          title: "项目经理",
          dataIndex: "manager",
          key: "manager",
          width: 100,
          align: "center",
        },

        {
          title: "创建人",
          dataIndex: "creater",
          // width: "30%",
          key: "creater",
          width: 100,
          align: "center",
        },
        {
          title: "创建时间",
          dataIndex: "time",
          key: "time",
          width: 180,
          align: "center",
        },
      ];
      return drawercolumns;
    };
    // const getClientHeight = () => {
    //   state.rightheight =
    //     document.getElementsByClassName("addhead")[0].offsetHeight +
    //     document.getElementsByClassName("mid")[0].offsetHeight +
    //     document.getElementsByClassName("boom")[0].offsetHeight +
    //     40 +
    //     "px";
    // };

    onMounted(() => {
      document.getElementsByTagName("main")[0].style.background =
        "rgb(245, 247, 250,1)";
      document.getElementsByTagName("main")[0].style.boxShadow = "none";
      getDetail(0)
    });
    onUnmounted(() => {
      document.getElementsByTagName("main")[0].style.background = "#ffffff";
      document.getElementsByTagName("main")[0].style.boxShadow =
        "0px 1px 35px 0px rgba(118, 136, 166, 0.07)";
    });
    const changebgc = (index) => {
      state.isactive = index;
      dataAssignment(index);
    };
    const gqxy_hShow = () => {
      state.gqxy_hs = !state.gqxy_hs;
    };
    const showDeleteALLModal = () => {
      state.deleteAll = true;
    };
    const delete_exit = () => {
      state.deleteAll = false;
    };
    const deleteLevelTask = () => {
      RouterDeleteTask(state.listChoosedId).then((res) => {
        console.log(`删除成功${res}`);
        message.success('删除成功')
      }).catch((err) => {
        console.log(`删除失败${err}`);
      })
    }

    return {
      ...toRefs(state),
      tableDataFunc,
      tableDataFunc2,
      showDrawer,
      closeDrawer,
      showModal,
      closeModal,
      afterVisibleChange,
      showAddStu,
      showImpStu,
      // drawercolumns,
      onSelectChange,
      changebgc,
      gqxy_hShow,
      showDeleteALLModal,
      delete_exit,
      drawertableColumns,
      editChapter,
      // updateChapter,
      showDrawerAddHomework,
      showDrawerAddTest,
      deleteLevelTask,
    };
  },
};
</script>

<style lang="scss">
.clearfix:after,
.clearfix:before {
  content: " ";
  display: block;
  clear: both;
}
.AddLevell {
  .ant-modal {
    width: 624px !important;
    height: 388px !important;
    .ant-modal-content {
      width: 624px !important;
      height: 388px !important;
      border-radius: 4px !important;
      .ant-modal-body {
        // background-color: blue;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;

        .header {
          width: 624px;
          height: 68px;
          background: linear-gradient(
            180deg,
            rgba(78, 166, 255, 0.2) 0%,
            rgba(78, 166, 255, 0) 100%
          );
          display: flex;
          justify-content: center;
          .headmain {
            width: 90%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .add {
              font-size: 16px;
              font-weight: 600;
              color: #333333;
            }
            .img {
              width: 20px;
              height: 20px;
              background-image: url(../../assets/images/basicinfo/close22.png);
              background-size: 100% 100%;
            }
          }
        }
        .main {
          width: 100%;
          height: calc(100% - 68px);
          // background-color: #bfa;
          display: flex;
          justify-content: center;
          .inma {
            width: 75%;
            height: 100%;
            // background-color: lightblue;
            .name {
              display: flex;
              position: relative;
              margin-top: 30px;
              .fir {
                font-size: 14px;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.85);
                white-space: nowrap;
                margin-top: 3px;
              }
              .input {
                width: 100%;
                .ant-input {
                  border-radius: 8px;
                  border: 1px solid #c7cbd2;
                  &::placeholder {
                    font-size: 12px;
                    position: absolute;
                    top: 5px;
                  }
                }
                .ant-textarea {
                  border-radius: 8px;
                  border: 1px solid #c7cbd2;
                  &::placeholder {
                    font-size: 12px;
                    position: absolute;
                    top: 5px;
                  }
                }
              }
              .co {
                position: absolute;
                right: 10px;
                top: 4px;

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

                font-size: 14px;
                font-weight: 400;
                color: #c7cbd2;
              }
            }
            .btn {
              margin-top: 40px;
              width: 100%;
              display: flex;
              justify-content: center;
              .btn1 {
                width: 100px;
                height: 40px;
                border-radius: 4px;
                border: 1px solid #409EFF;
                font-size: 14px;
                color: #409EFF;
                cursor: pointer;
                background: #ffffff;
                margin-right: 20px;
              }
              .btn2 {
                width: 100px;
                height: 40px;
                border-radius: 4px;
                font-size: 14px;
                color: #fff;
                cursor: pointer;
                border: 0;
                background: #409EFF;
              }
            }
          }
        }
      }
    }
  }
}
.ProjectDrawer {
  // .ant-drawer-content-wrapper {

  //   .ant-drawer-header {
  //     display: none !important;
  //   }
  //   .ant-drawer-body {
  //     padding: 0;
  //   }
  // }
  .drawerMain {
    min-width: 600px;
    margin: 0px 32px 0px 32px;
    overflow-x: scroll;
    display: flex;
    flex-direction: column;
    .header {
      height: 73px;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // background-color: red;
      margin-bottom: 20px;
      flex-shrink: 0;
      .headerTitle {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
        line-height: 25px;
        // margin-left: 24px;
      }
    }
    .drawerbox {
      margin: 20px 38px 30px;
      th {
        background-color: #eff4fc !important;
      }

      .ant-table-tbody
        > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
        > td {
        background: #f6f9fd;
      }
    }
    .btnn {
      height: 72px;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
      background-color: #ffffff;
      .btn1 {
        width: 100px;
        height: 40px;
        border: 1px solid #4ea6ff;
        border-radius: 8px;
        color: #4ea6ff;
        background-color: #fff;
        cursor: pointer;
      }
      .btn2 {
        cursor: pointer;
        width: 100px;
        height: 40px;
        background: #4ea6ff;
        border-radius: 8px;
        border: 0;
        margin-left: 15px;
        color: #fff;
      }
    }
  }
}
.leveladddetail {
  width: 100%;
  display: flex;
  min-width: 933px;
  background-color: rgba(245, 247, 250, 1);
  .left {
    margin-right: 20px;
    width: 208px;
    background: #ffffff;
    box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
    display: flex;
    justify-content: center;
    .leftmain {
      // width: 86%;
      margin-top: 20px;
      .tit {
        font-size: 18px;
        color: #363636;
      }
      .btn {
        margin-top: 20px;
        height: 38px;
        background: #fff6e8;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        cursor: pointer;
        .search {
          background-size: 100%;
        }
        .btnText {
          font-size: 14px;
          font-weight: 400;
          color: #ffb64e;
          margin-top: 4px;
          margin-left: 5px;
        }
      }

      .btn3 {
        width: 171px;
        margin-right: 0px;
        .search {
          width: 17px;
          height: 18px;
          background-image: url("../../assets/images/leveladd/add.png");
          background-size: 100% 100%;
        }
      }
      .maincon {
        margin-top: 17px;
        width: 208px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .items {
          width: 171px;
          // height: 83px;
          background: rgba(255, 182, 78, 0.1);
          border: 1px solid #ffb64e;
          opacity: 0.45;
          border-radius: 8px;
          margin-bottom: 16px;
          align-items: center;
          padding: 16px;
          opacity: 0.5;
          cursor: pointer;
          .items1 {
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .boxs_left {
              display: flex;
              align-items: center;
              .script {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 56px;
                height: 24px;
                background: #ffb64e;
                border-radius: 6px;
                margin-right: 12px;
                white-space: nowrap;
              }
              .imgIcon {
                width: 14px;
                height: 14px;
                background-image: url(@/assets/images/leveladd/edit.png);
                background-size: 100% 100%;
              }
            }
            .boxs_right {
              .imgIcon {
                width: 14px;
                height: 14px;
                background-image: url(@/assets/images/leveladd/z1.png);
                background-size: 100% 100%;
              }
            }
          }
          .items2 {
            .nname {
              width: 100px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-weight: bold;
            }
          }
        }
        .active {
          opacity: 1;
          transition: all 0.5s;
        }
      }
    }
  }
  .right {
    flex: 1;
    // background-color: #fff;
    display: flex;
    flex-direction: column;
    .addhead {
      width: 100%;
      // min-width: 500px;
      // height: 130px;
      // flex: 1;
      background-color: #fff;
      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
      display: flex;
      align-items: center;
      position: relative;
      .filt {
        margin: 16px 30px 16px 22px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
        flex-wrap: wrap;
        .le {
          display: flex;
          align-items: center;
          // margin-bottom: 10px;
          .leftimg {
            width: 151px;
            height: 100px;
            border: 10px solid #e7f2ff;
            border-radius: 8px;
            margin-left: 20px;
            .img {
              width: 100%;
              height: 100%;
            }
          }
          .imgfor {
            margin-left: 32px;
            .forz {
              color: #363636;
              font-size: 16px;
            }
            .fort {
              color: #878b92;
              font-size: 14px;
              margin-top: 20px;
            }
          }
        }

        .rightt {
          height: 100%;
          display: flex;
          align-items: center;
          .select {
            display: flex;
            align-items: center;
            white-space: nowrap;
            margin-right: 56px;
            .inputbox {
              display: flex;
              align-items: center;
              border: 1px solid #c7cbd2;
              width: 238px;
              height: 40px;
              border-radius: 8px;
              input {
                border: none;
                outline: none;
              }
              .bottonbox {
                width: 100px;
                height: 40px;
                background: #409eff;
                border-radius: 8px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                flex-shrink: 0;
                .btnText {
                  font-size: 14px;
                  font-weight: 400;
                  color: #ffffff;
                  line-height: 36px;
                  margin-left: 5px;
                }
              }
            }
          }
          .line {
            height: 60px;
            width: 1px;
            background-color: #e8effa;
            margin-right: 18px;
          }
          .return {
            color: #4ea6ff;
            font-size: 14px;
            margin-top: 13px;
            margin-right: 20px;
            white-space: nowrap;
          }
        }
      }
    }

    .mid {
      width: 100%;
      // height: 130px;
      margin-top: 20px;
      background-color: #fff;
      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .item {
        height: 115px;
        // width: 7.7%;
        display: flex;
        align-items: center;
        .itcon {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 100%;
          width: 100%;
          margin-left: 38px;
          margin-right: 38px;
          .img {
            cursor: pointer;
          }
          .text {
            font-size: 16px;
            color: #363636;
            margin-top: 5px;
            white-space: nowrap;
          }
        }
        .lin {
          width: 1px;
          height: 60%;
          background-color: #e8effa;
        }
        .no {
          display: none;
        }
      }
    }
    .boom {
      width: 100%;
      margin-top: 20px;
      flex: 1;
      background-color: #fff;
      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
      display: flex;
      justify-content: center;
      .boomcen {
        width: 95%;
        // height: 100%;
        // background-color: #bfa;
        .title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .tit_left {
            font-size: 16px;
            font-weight: 500;
            color: #363636;
            line-height: 36px;
            margin-top: 30px;
          }
          .tit_right {
            display: flex;
            align-items: center;
            margin-top: 30px;
            .btn {
              padding: 0px 26px 0px 26px;
              height: 38px;
              border-radius: 8px;
              border: 1px solid rgba(64, 158, 255, 1);
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 14px;
              flex-shrink: 0;
              cursor: pointer;
              white-space: nowrap;
              .btnText {
                font-size: 14px;
                font-weight: 400;
                line-height: 36px;
                margin-left: 5px;
              }
            }
            .btn1 {
              background-color: #409eff;
              .btnText {
                color: #ffffff;
              }
            }
            .btn2 {
              background-color: #ffffff;
              .imgIcon {
                width: 16px;
                height: 16px;
                background-image: url(@/assets/images/projectadd/delete.png);
                background-size: 100%;
              }
              .btnText {
                color: #409eff;
              }
            }
          }
        }
        .tableBox {
          margin-top: 21px;
          margin-bottom: 20px;
          .classify {
            margin-left: 10px !important;
            padding-left: 9px !important;
          }
          .ant-checkbox-wrapper {
            align-items: center;
            margin-top: -2px;
          }
          .ant-table-selection-column {
            padding: 0px !important;
            padding-left: 60px !important;
          }
          .ant-table-thead > tr > th {
            background-color: rgba(239, 244, 252, 1);
          }
          th.h {
            background-color: #eff4fc !important;
          }

          .ant-table-tbody
            > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
            > td {
            background: #f6f9fd;
          }
        }
        .xwid {
          position: relative;
          margin-top: 30px;
          display: flex;
          margin-bottom: 20px;
          .xin {
            width: 100%;
            .xheadb {
              display: flex;
              .addx {
                width: 130px;
                height: 40px;
                background: #4ea6ff;
                border-radius: 8px;
                color: #fff;
                border: 0;
                cursor: pointer;
                margin-right: 20px;
              }
              .addd {
                width: 130px;
                height: 40px;
                background: #fff;
                border-radius: 8px;
                border: 1px solid #4ea6ff;
                color: #4ea6ff;
                cursor: pointer;
                margin-right: 20px;
              }
              .select {
                .ant-select {
                  //
                  // border: 0 !important;
                  border-radius: 11px;
                  .ant-select-selector {
                    border: 1px solid #4ea6ff !important;
                    .ant-select-selection-placeholder {
                      padding-left: 15px;
                      color: #4ea6ff;
                    }
                  }
                }
              }
            }
            .talk {
              margin-top: 24px;
              margin-bottom: 11px;
              width: 100%;
              height: 50px;
              background: #f5faff;
              border: 1px solid #4ea6ff;
              // opacity: 0.22;
              display: flex;
              align-items: center;
              .im {
                width: 14px;
                height: 15px;
                margin-left: 27px;
                margin-top: -3px;
              }
              .xu {
                height: 100%;
                line-height: 50px;
                margin-left: 13px;
                .yi {
                  color: #4f5156;
                  font-size: 14px;
                }
                .zon {
                  color: #999ba3;
                  font-size: 14px;
                  margin-left: 34px;
                }
                .th {
                  color: #4ea6ff;
                }
              }
            }
            .tableBox {
              margin-block-end: 20px;
              .classify {
                margin-left: 11px !important;
                padding-left: 9px !important;
              }
              .ant-checkbox-wrapper {
                align-items: center;
                margin-top: -2px;
              }
              .ant-table-selection-column {
                padding: 0px !important;
                padding-left: 38px !important;
              }
              .ant-table-thead > tr > th {
                background-color: rgba(239, 244, 252, 1);
              }
              th.h {
                background-color: #eff4fc !important;
              }

              .ant-table-tbody
                > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
                > td {
                background: #f6f9fd;
              }
              .pa {
                left: 0;
                width: 100%;
                // height: 20px;
                // background-color: red;
                display: flex;
                justify-content: center;
                position: absolute;
                bottom: 0px;
              }
            }
            .tablebox1 {
              margin-bottom: 80px;
              .pa {
                left: 0;
                width: 100%;
                // height: 20px;
                // background-color: red;
                display: flex;
                justify-content: center;
                position: absolute;
                bottom: 0px;
              }
            }
          }
        }
        .Gcon {
          display: flex;
          .pad {
            height: 100%;
            width: 40px;
          }
          .Gin {
            // background-color: #bfa;
            margin-top: 30px;
            .headone {
              // background-color: red;
              display: flex;
              text-align: center;
              .box {
                width: 4px;
                height: 20px;
                background-color: #4ea6ff;
                border-radius: 2px;
              }
              .onetitle {
                margin-left: 15px;
                color: #333333;
                font-size: 14px;
              }
              .oneedi {
                margin-left: 15px;
                color: #4ea6ff;
                cursor: pointer;
              }
              .twobtn {
                display: flex;
                .btnone {
                  width: 42px;
                  height: 24px;
                  border: 1px solid rgba(64, 158, 255, 1);
                  border-radius: 4px;
                  color: rgba(64, 158, 255, 1);
                  margin-left: 20px;
                  cursor: pointer;
                }
                .btntwo {
                  width: 42px;
                  height: 24px;
                  border: 1px solid rgba(64, 158, 255, 1);
                  border-radius: 4px;
                  color: #ffffff;
                  margin-left: 20px;
                  background: #409eff;
                  cursor: pointer;
                }
              }
            }
            .onemain {
              margin-top: 20px;
              margin-left: 55px;
              color: #6f6f6f;
              font-size: 14px;
              .checkcon {
                position: relative;
                .in {
                  position: absolute;
                  // margin-top: 10px;
                  left: 0;
                  top: 3px;
                }
                .yulan {
                  // color: yellow;
                  margin-left: 22px;
                  // display: inline-block;
                }
                .yulan2 {
                  margin-left: 22px;
                }
                .ant-input-number {
                  height: 24px;
                  width: 24px;
                  margin: 10px;
                  border-radius: 4px;
                  border: 1px solid #6d7584;
                  .ant-input-number-input {
                    width: 100%;
                    height: 100%;
                    font-size: 14px;
                    padding: 0;
                    color: #409eff;
                    text-align: center;
                  }
                }
              }
            }
            .twomain {
              margin-left: 20px;
              margin-top: 20px;
              .ant-switch-checked {
                background-color: #5dc988;
              }
              .info {
                margin-left: 10px;
                color: #6f6f6f;
                font-size: 14px;
                // margin-top: 10px;
              }
              .infor {
                margin-left: 38px;
                margin-top: 10px;
                color: #c7cbd2;
                font-size: 14px;
              }
              .chooseshow {
                // background-color: red;
                margin-left: 38px;
                margin-top: 12px;
                .fane {
                  color: #6f6f6f;
                  font-size: 14px;
                }
              }
              .choo {
                display: none;
              }
              .btm {
                margin-left: 38px;
                margin-top: 20px;
                .bmo {
                  color: #6f6f6f;
                  font-size: 14px;
                }
                .bmt {
                  color: #c7cbd2;
                  font-size: 14px;
                  margin-top: 3px;
                }
                .chosecon {
                  display: flex;
                  margin-top: 6px;
                  margin-bottom: 20px;
                  .chose {
                    position: relative;
                    .inl {
                      position: absolute;
                      top: 2px;
                    }
                    .sh {
                      margin-left: 23px;
                      color: #6f6f6f;
                    }
                  }
                }
              }
            }
          }
        }
        .notable {
          width: 100%;
          height: 100%;
          .notablebox {
            width: 412px;
            height: 212px;
            background: linear-gradient(180deg, #fef3dd 0%, #fffaf0 100%);
            border-radius: 10px;
            display: flex;
            justify-content: center;
            text-align: center;
            margin: 77px auto 109px auto;
            cursor: pointer;
            position: relative;
            .smallleft {
              position: absolute;
              top: 18px;
              left: 0px;
              width: 8px;
              height: 21px;
              border-radius: 0px 4px 4px 0px;
              background-color: #ffb64e;
            }
            .smallright {
              position: absolute;
              bottom: 18px;
              right: 0px;
              width: 8px;
              height: 21px;
              border-radius: 4px 0px 0px 4px;
              background-color: #ffb64e;
            }
            .boxbody {
              .boximg {
                width: 72px;
                height: 72px;
                margin: 32px auto 20px auto;
                background-image: url(@/assets/images/coursewareManage/nostate.png);
                background-size: 100% 100%;
              }
              .boxtitle {
                margin-bottom: 4px;
              }
            }
          }
        }
      }
    }
    .footbtn {
      width: 100%;
      flex: 1;
      background-color: #fff;
      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
      display: flex;
      justify-content: end;
      .btnbox {
        display: flex;
        margin-right: 36px;
        .btn {
          padding: 0px 26px 0px 26px;
          height: 38px;
          border-radius: 8px;
          border: 1px solid rgba(64, 158, 255, 1);
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          margin: 21px 0px 19px 14px;
          cursor: pointer;
          white-space: nowrap;
          .btnText {
            font-size: 14px;
            font-weight: 400;
            line-height: 36px;
            margin-left: 5px;
          }
        }
        .btn1 {
          background-color: #409eff;
          .btnText {
            color: #ffffff;
          }
        }
        .btn2 {
          background-color: #ffffff;
          .btnText {
            color: #409eff;
          }
        }
      }
    }
  }

  .opat {
    .opacationt {
      display: flex;
      align-items: center;
      justify-content: center;
      .ant-switch-checked {
        background-color: #5dc988;
      }
      .showt {
        // margin-top: 10px;
        display: flex;
        margin-left: 10px;
        height: 23px;
        .bi {
          // margin-top: 10px;
          width: 63px;
          height: 23;
          background-color: #5dc988;
          line-height: 23px;
          position: absolute;
          z-index: 998;
          color: #ffffff;
          border-radius: 4px;
        }
        .xuan {
          width: 63px;
          height: 23px;
          background-color: #f2f6fc;
          line-height: 23px;
          // display: none;
          position: absolute;
          z-index: 998;
          color: #5dc988;
          border-radius: 4px;
        }
      }
    }
  }
  .racona {
    // background-color: #bfa;
    display: flex;
    align-items: center;
    // justify-content: center;
    height: 100%;
    .img {
      // margin-left: -40px;
      // margin-top: -2px;
      width: 17px;
      height: 14px;
      background-image: url("../../assets/images/leveladd/z1.png");
      position: absolute;
      left: -40px;
    }
    .ch {
      margin-left: 10px;
    }
  }
}
.CopyModal {
  .ant-modal {
    width: 424px !important;
    height: 258px !important;
    .ant-modal-content {
      width: 424px !important;
      height: 258px !important;
      .ant-modal-body {
        width: 424px !important;
        height: 258px !important;
        padding: 0 !important;
        .delete {
          z-index: 999;
          width: 424px;
          height: 258px;
          background: #ffffff;
          box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
          border-radius: 4px;
          // position: absolute;
          // left: 50%;
          // top: 10%;
          // transform: translate(-50%, -50%);
          .del_header {
            position: absolute;
            width: calc(100%);
            height: 40px;
            background: linear-gradient(
              rgba(78, 166, 255, 0.2) 0%,
              rgba(78, 166, 255, 0) 100%
            );
          }
          .del_main {
            width: 100%;
            position: relative;
            .header {
              display: flex;
              align-items: center;
              padding-top: 20px;
              padding-left: 26px;
              font-size: 16px;
              .icon {
                width: 16px;
                height: 16px;
                margin-right: 10px;
                background-image: url(@/assets/images/coursewareManage/QR.png);
                background-size: 100% 100%;
              }
              .close_exit {
                position: absolute;
                right: 42px;
                cursor: pointer;
                width: 20px;
                height: 20px;
                background-image: url(@/assets/images/coursewareManage/close.png);
                background-size: 100% 100%;
              }
            }
            .body {
              width: 100%;
              margin: 34px auto 56px auto;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              // background-color: red;
              position: relative;
              .back {
                position: absolute;
                top: 30px;
                font-size: 12px;
                font-weight: 400;
                color: #666666;
              }
            }
            .del_btnbox {
              display: flex;
              margin: 30px auto;
              justify-content: center;
              .del_btn {
                width: 100px;
                height: 40px;
                background: rgba(64, 158, 255, 0);
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;

                flex-shrink: 0;
                cursor: pointer;
                .btnText {
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 40px;
                }
              }
              .btn1 {
                border: 1px solid rgba(64, 158, 255, 1);
                color: #4ea6ff;
                margin-right: 14px;
              }
              .btn2 {
                background-color: #4ea6ff;
                color: #ffffff;
              }
            }
          }
        }
      }
    }
  }
}
</style>
