<!-- 课件管理页面 -->
<template>
  <div class="courseManage">
    <div class="headerf">
      <!-- 搜索框及按钮 -->
      <div class="filter">
        <div class="filterItems">
          <div class="fi_input fitems">
            <a-input
              v-model:value="value1"
              style="width: 270px; height: 40px; border-radius: 8px"
              placeholder="请输入项目名称"
            />
          </div>
          <div class="fi_input fitems">
            <a-input
              v-model:value="value2"
              style="width: 270px; height: 40px; border-radius: 8px"
              placeholder="请输入名称"
            />
          </div>
          <div class="fi_input fitems">
            <a-input
              v-model:value="value3"
              style="width: 270px; height: 40px; border-radius: 8px"
              placeholder="请输入所属项目"
            />
          </div>
          <div class="select fitems">
            <a-select
              dropdownClassName="dropdown-style"
              style="width: 200px"
              placeholder="请选择状态"
              :options="options1"
              allowClear
              showSearch
            >
            </a-select>
          </div>
          <div class="select fitems">
            <a-select
              dropdownClassName="dropdown-style"
              style="width: 200px"
              placeholder="请选择内容分类"
              :options="options2"
              allowClear
              showSearch
            ></a-select>
          </div>
          <div class="select fitems">
            <a-range-picker
              v-model:value="value4"
              separator="至"
              :placeholder="['        开始时间', '        结束时间']"
            />
          </div>
        </div>
      </div>
      <div class="btns">
        <div class="btn btn1">
          <div class="search"></div>
          <div class="btnText">搜索</div>
        </div>
        <div class="btn btn2">
          <div class="search"></div>
          <div class="btnText">重置</div>
        </div>
        <div class="btn btn3">
          <div class="search"></div>
          <div class="btnText" @click="openMessage">导出</div>
        </div>
        <div class="btn btn4">
          <div class="search"></div>
          <div class="btnText" @click="of_hShow">新建课程</div>
        </div>
      </div>
      <!-- 搜索框及按钮 -->
    </div>
    <!-- 选择线上还是面授课弹窗 -->
    <a-modal
      v-model:visible="of_hs"
      :closable="closableQR"
      wrapClassName="sofModal"
      :footer="null"
      style="margin-top: 400px"
      @cancel="of_exit"
    >
      <div
        class="selectonlineface"
        :style="{ display: of_hs ? 'block' : 'none' }"
      >
        <div class="of_header"></div>
        <div class="of_main">
          <div class="ofm_header">
            <div class="add_icon"></div>
            <span>请选择课程类型</span>
            <div class="close_exit" @click="of_exit"></div>
          </div>
          <div class="ofm_body">
            <div class="ofmb_items">
              <div class="signbox">
                <div class="sign">
                  <img
                    src="@/assets/images/coursewareManage/asterisk.png"
                    alt=""
                  />
                </div>
                <span style="margin-right: 3px">课程名称：</span>
              </div>
              <div class="b_input">
                <a-input
                  v-model:value="xzinputV1"
                  maxlength="20"
                  style="width: 440px; height: 40px; border-radius: 8px"
                  placeholder="请输入课程名称"
                />
                <div class="inp_num">
                  <span style="color: #c7cbd2">{{ xzinputV1.length }}/20</span>
                </div>
              </div>
            </div>
            <div class="b_sub">
              <div class="bs_header">
                <div class="b_left"><span style="color:#999BA3;">课程命名规则</span></div>
                <div class="b_right" @click="hideShow" style="cursor: pointer">
                  <div
                    class="b_zk"
                    :style="{ display: hideshow ? 'block' : 'none' }"
                  >
                    <div class="zksqbox" style="display: flex">
                      <span style="color: #4ea6ff; margin-right: 5px"
                        >收起</span
                      >
                      <div class="b_icon">
                        <img
                          src="@/assets/images/coursewareManage/up.png"
                          alt=""
                        />
                      </div>
                    </div>
                  </div>
                  <div
                    class="b_sq"
                    :style="{ display: hideshow ? 'none' : 'block' }"
                  >
                    <div class="zksqbox" style="display: flex">
                      <span style="color: #4ea6ff; margin-right: 5px"
                        >展开</span
                      >
                      <div class="b_icon">
                        <img
                          src="@/assets/images/coursewareManage/down.png"
                          alt=""
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="bl_detail"
                :style="{ display: hideshow ? 'block' : 'none' }"
              >
                <span style="color: #999ba3">
                  1、课程名称统一不加书名号。<br />
                  2、项目名称、属地等信息如需体现在课程名称中，请放在课程名称信息
                  之后，如“时间管理（GROW180项目）”或“时间管理（B*）”确保首先
                  看到的是课程内容主题。<br />
                  3、同一课程如先后有多个版本，原则上仅开放最新版本，旧版本应停用
                  版本如必须以年份标明，请以“沟通技巧（2022年）”的方式呈现。
                </span>
              </div>
            </div>
            <div class="ofmb_items">
              <div class="signbox">
                <div class="sign">
                  <img
                    src="@/assets/images/coursewareManage/asterisk.png"
                    alt=""
                  />
                </div>
                <span>授课形式</span>
              </div>
              <a-radio-group v-model:value="valueE1">
                <div class="bc_box">
                  <div class="bc_boxl">
                    <div class="ol_checkbox">
                      <a-radio
                        v-model:checked="checked"
                        :value="1"
                        @click="bs_hShow"
                        >线上</a-radio
                      >
                    </div>
                  </div>
                  <div class="bc_boxr">
                    <div class="ol_checkbox">
                      <a-radio
                        v-model:checked="checked"
                        :value="2"
                        @click="clear_valueE1"
                        >面授</a-radio
                      >
                    </div>
                  </div>
                </div>
              </a-radio-group>
            </div>
            <div class="b_sup" :style="{ display: bs_hs ? 'block' : 'none' }">
              <div class="ofmb_items">
                <div class="signbox">
                  <div class="sign">
                    <img
                      src="@/assets/images/coursewareManage/asterisk.png"
                      alt=""
                    />
                  </div>
                  <span>是否设置目录</span>
                </div>
                <a-radio-group v-model:value="valueE2">
                  <div class="bc_box">
                    <div class="ol_checkbox">
                      <a-radio
                        v-model:checked="checked"
                        :value="3"
                        @click="clear_valueE2"
                        >是</a-radio
                      >
                    </div>
                    <div class="ol_checkbox">
                      <a-radio
                        v-model:checked="checked"
                        :value="4"
                        @click="clear_valueE2"
                        >否</a-radio
                      >
                    </div>
                  </div>
                </a-radio-group>
              </div>
            </div>
            <div class="b_footer">
              <div class="btn btn5">
                <div class="btnText" @click="of_exit">取消</div>
              </div>
              <div class="btn btn6">
                <div class="btnText" @click="createft">确定</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 选择线上还是面授课弹窗 -->
    <!-- 确定新建面授课弹窗 -->
    <a-modal
      v-model:visible="ft_hs"
      title="Title"
      @ok="closeModal"
      :footer="null"
      :closable="false"
      wrapClassName="modalStyle facteachModal"
      width="80%"
      @cancel="ft_exit"
    >
      <div class="modalHeader">
        <div class="headerLeft">
          <img
            style="width: 17px; height: 18px; margin-right: 8px"
            src="../../assets/images/basicinfo/add.png"
          />
          <span class="headerLeftText">新建面授课</span>
        </div>
        <div style="margin-right: 57px; cursor: pointer">
          <img
            @click="ft_exit"
            style="width: 22px; height: 22px"
            src="../../assets/images/basicinfo/close22.png"
          />
        </div>
      </div>
      <div class="modalMain">
        <div class="faceteach" :style="{ display: ft_hs ? 'block' : 'none' }">
          <div class="ft_main">
            <div class="m_title">课程信息</div>
            <div class="m_body">
              <div class="mb_left">
                <div class="mbl_items">
                  <div class="item_nam">
                    <div class="asterisk_icon">
                      <img
                        src="@/assets/images/coursewareManage/asterisk.png"
                        alt=""
                      />
                    </div>
                    <span style="margin-right: 14px">课程名称</span>
                  </div>
                  <div class="item_inp">
                    <div class="i1_input">
                      <a-input
                        v-model:value="qdms_inputV1"
                        maxlength="90"
                        style="width: 440px; height: 40px; border-radius: 8px"
                        placeholder="请输入课程名称"
                      />
                      <div class="inp_num">
                        <span style="color: #c7cbd2"
                          >{{ qdms_inputV1.length }}/90</span
                        >
                      </div>
                    </div>
                  </div>
                </div>
                <div class="i2_cz">
                  <div class="i2_top">
                    <div class="i2_left"><span style="color:#999BA3;">课程命名规则</span></div>
                    <div
                      class="i2_right"
                      @click="hideShow"
                      style="cursor: pointer"
                    >
                      <div
                        class="b_zk"
                        :style="{ display: hideshow ? 'block' : 'none' }"
                      >
                        <span style="color: #4ea6ff">收起</span>
                      </div>
                      <div
                        class="b_sq"
                        :style="{ display: hideshow ? 'none' : 'block' }"
                      >
                        <span style="color: #4ea6ff">展开</span>
                      </div>
                      <div class="b_icon"></div>
                    </div>
                  </div>
                  <div
                    class="i2_detail"
                    :style="{ display: hideshow ? 'block' : 'none' }"
                  >
                    <span style="color: #999ba3">
                      1、课程名称统一不加书名号。<br />
                      2、项目名称、属地等信息如需体现在课程名称中，请放在课程名称信息
                      之后，如“时间管理（GROW180项目）”或“时间管理（B*）”确保首先
                      看到的是课程内容主题。<br />
                      3、同一课程如先后有多个版本，原则上仅开放最新版本，旧版本应停用
                      版本如必须以年份标明，请以“沟通技巧（2022年）”的方式呈现。
                    </span>
                  </div>
                </div>
                <div class="mbl_items2">
                  <div class="item_nam">
                    <div class="asterisk_icon">
                      <img
                        src="@/assets/images/coursewareManage/asterisk.png"
                        alt=""
                      />
                    </div>
                    <span style="margin-right: 14px">封面图</span>
                  </div>
                  <div class="item_inp">
                    <div class="i_upload">
                      <div class="addimg">
                        <div class="heng"></div>
                        <div class="shu"></div>
                      </div>
                    </div>
                    <div class="i_bottom">
                      <span style="color: #999ba3"
                        >高宽比为16:9 (如:800*450) png或jpg图片</span
                      >
                    </div>
                  </div>
                </div>
                <div class="mbl_items">
                  <div class="item_nam">
                    <div class="asterisk_icon">
                      <img
                        style="width: 10px; height: 10px"
                        src="@/assets/images/coursewareManage/asterisk.png"
                        alt=""
                      />
                    </div>
                    <span style="margin-right: 14px">目标人群</span>
                  </div>
                  <div class="item_inp">
                    <div class="i1_input">
                      <a-input
                        v-model:value="qdms_inputV2"
                        maxlength="50"
                        style="width: 440px; height: 40px; border-radius: 8px"
                        placeholder="请输入目标人群"
                      />
                      <div class="inp_num">
                        <span style="color: #c7cbd2"
                          >{{ qdms_inputV2.length }}/50</span
                        >
                      </div>
                    </div>
                  </div>
                </div>
                <div class="mbl_items">
                  <div class="item_nam">
                    <span style="margin-right: 14px">课程价值</span>
                  </div>
                  <div class="item_inp">
                    <div class="i1_input">
                      <a-input
                        v-model:value="qdms_inputV3"
                        maxlength="200"
                        style="width: 440px; height: 40px; border-radius: 8px"
                        placeholder="请输入课程价值"
                      />
                      <div class="inp_num">
                        <span style="color: #c7cbd2"
                          >{{ qdms_inputV3.length }}/200</span
                        >
                      </div>
                    </div>
                  </div>
                </div>
                <div class="mbl_items">
                  <div class="item_nam">
                    <div class="asterisk_icon">
                      <img
                        src="@/assets/images/coursewareManage/asterisk.png"
                        alt=""
                      />
                    </div>
                    <span style="margin-right: 14px">内容分类</span>
                  </div>
                  <div class="item_inp">
                    <div class="select i6_input">
                      <a-select
                        dropdownClassName="dropdown-style"
                        style="width: 440px"
                        placeholder="请选择"
                        :options="options2"
                        allowClear
                        showSearch
                      ></a-select>
                    </div>
                  </div>
                </div>
                <div class="mbl_items">
                  <div class="item_nam">
                    <span style="margin-right: 14px">场景</span>
                  </div>
                  <div class="item_inp">
                    <div class="select i7_input">
                      <a-select
                        dropdownClassName="dropdown-style"
                        style="width: 440px"
                        placeholder="请选择"
                        :options="options2"
                        allowClear
                        showSearch
                      ></a-select>
                    </div>
                  </div>
                </div>
                <div class="mbl_items">
                  <div class="item_nam">
                    <span style="margin-right: 14px">内容标签</span>
                  </div>
                  <div class="item_inp">
                    <a-input
                      v-model:value="qdms_inputV4"
                      style="width: 440px; height: 40px; border-radius: 8px"
                      placeholder="请输入按回车键创建成功"
                    />
                  </div>
                </div>
                <div class="i8_bottom">
                  <a-tag closable @close="log">Tag 2</a-tag>
                  <a-tag closable @close.prevent>Prevent Default</a-tag>
                </div>
              </div>
              <div class="mb_right">
                <div class="mbl_items">
                  <div class="item_nam">
                    <div class="asterisk_icon">
                      <img
                        src="@/assets/images/coursewareManage/asterisk.png"
                        alt=""
                      />
                    </div>
                    <span style="margin-right: 14px">授课教师</span>
                  </div>
                  <div class="item_inp">
                    <div class="i1_input">
                      <a-input
                        v-model:value="qdms_inputV5"
                        style="width: 440px; height: 40px; border-radius: 8px"
                        placeholder="请输入"
                      />
                    </div>
                  </div>
                </div>
                <div class="mbl_items2">
                  <div class="item_nam">
                    <span style="margin-right: 14px">课程简介</span>
                  </div>
                  <div class="item_inp">
                    <div class="i10_textarea">
                      <a-textarea
                        v-model:value="qdms_inputV6"
                        maxlength="150"
                        style="width: 440px; height: 100px; border-radius: 8px"
                        placeholder="请输入"
                      />
                      <div class="inp_num">
                        <span style="color: #c7cbd2"
                          >{{ qdms_inputV6.length }}/150</span
                        >
                      </div>
                    </div>
                  </div>
                </div>
                <div class="mbl_items">
                  <div class="item_nam">
                    <span style="margin-right: 10px">附件</span>
                  </div>
                  <div class="item_inp">
                    <div class="accessory" style="cursor: pointer">
                      <div class="accessory_icon">
                        <img
                          src="@/assets/images/coursewareManage/enclosure.png"
                          alt=""
                        />
                      </div>
                      <span style="color: #4ea6ff">添加附件</span>
                    </div>
                  </div>
                </div>
                <div class="mbl_items12">
                  <div class="i12_box1">
                    <div class="file_img"></div>
                    <div class="file_detail">
                      <div class="file_name">
                        <span style="color: #6f6f6f">图片1.png</span>
                      </div>
                      <div class="file_size">
                        <span style="color: #999ba3">152.77K</span>
                      </div>
                    </div>
                    <div class="file_operation">
                      <div class="fobox">
                        <span style="color: #4ea6ff">删除</span>
                      </div>
                    </div>
                  </div>
                  <div class="i12_box1">
                    <div class="file_img"></div>
                    <div class="file_detail">
                      <div class="file_name">
                        <span style="color: #6f6f6f">图片2.png</span>
                      </div>
                      <div class="file_updata">
                        <div class="updatabox">
                          <div class="updatacolor"></div>
                          <div class="updataxq">上传完成</div>
                        </div>
                        <div class="upjd">
                          <span style="margin: auto 5px">100%</span>
                        </div>
                      </div>
                    </div>
                    <div class="file_operation">
                      <div class="fobox">
                        <span style="color: #4ea6ff">删除</span>
                      </div>
                    </div>
                  </div>
                  <div class="i12_box1">
                    <div class="file_img"></div>
                    <div class="file_detail">
                      <div class="file_name">
                        <span style="color: #6f6f6f">图片3.png</span>
                      </div>
                      <div class="file_updata">
                        <div class="updatabox">
                          <div class="updatacolor2"></div>
                          <div class="updataxq2">上传失败</div>
                        </div>
                        <div class="upjd">
                          <span style="margin: auto 5px">80%</span>
                        </div>
                      </div>
                    </div>
                    <div class="file_operation">
                      <div class="fobox">
                        <span style="color: #4ea6ff">重传</span>
                      </div>
                      <div class="fobox">
                        <span style="color: #4ea6ff">取消</span>
                      </div>
                    </div>
                  </div>
                  <div class="i12_box1">
                    <div class="file_img"></div>
                    <div class="file_detail">
                      <div class="file_name">
                        <span style="color: #6f6f6f">图片4.png</span>
                      </div>
                      <div class="file_updata">
                        <div class="updatabox">
                          <div class="updatacolor3"></div>
                          <div class="updataxq3">正在上传</div>
                        </div>
                        <div class="upjd">
                          <span style="margin: auto 5px">50%</span>
                        </div>
                      </div>
                    </div>
                    <div class="file_operation">
                      <div class="fobox">
                        <span style="color: #4ea6ff; margin-right: 5px"
                          >暂停</span
                        >
                      </div>
                      <div class="fobox">
                        <span style="color: #4ea6ff">取消</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="m_footer">
              <div class="fotnam">
                <span>课程大纲</span>
              </div>
              <div class="fotarea">
                <div class="fuwenben"></div>
                <a-textarea
                  v-model:value="value25"
                  style="
                    width: 926px;
                    height: 130px;
                    border-radius: 8px;
                    padding-top: 20px;
                  "
                  placeholder=""
                />
              </div>
            </div>
            <div class="m_btn">
              <div class="btn btn5">
                <div class="btnText" @click="ft_exit">取消</div>
              </div>
              <div class="btn btn6">
                <div class="btnText" @click="ft_exit">确定</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 确定新建面授课弹窗 -->
    <!-- 表格 -->
    <div class="tableBox">
      <a-table
        :columns="columns1"
        :data-source="tableData1"
        :loading="tableDataTotal === -1 ? true : false"
        :scroll="{ x: 600 }"
        expandRowByClick="true"
        @expand="expandTable"
        :pagination="false"
      />
    </div>
    <!-- 表格 -->
    <!-- 操作在线面授课程管理页面 -->
    <a-modal
      v-model:visible="om_1"
      title="Title"
      @ok="closeModal"
      :footer="null"
      :closable="false"
      wrapClassName="modalStyle onlmanageModal"
      width="80%"
    >
      <div class="modalHeader">
        <div class="headerLeft">
          <img
            style="width: 17px; height: 18px; margin-right: 8px"
            src="@/assets/images/coursewareManage/pc.png"
          />
          <div :style="{ display: ft_1 ? 'none' : 'block' }">
            <span class="headerLeftText">在线课程管理</span>
          </div>
          <div :style="{ display: ft_1 ? 'block' : 'none' }">
            <span class="headerLeftText">面授课程管理</span>
          </div>
        </div>
        <div style="margin-right: 57px; cursor: pointer">
          <img
            @click="om_exit"
            style="width: 22px; height: 22px"
            src="../../assets/images/basicinfo/close22.png"
          />
        </div>
      </div>
      <div class="modalMain">
        <div class="onlinemanage" :style="{ display: om_1 ? 'block' : 'none' }">
          <div class="om_main">
            <div class="om_body">
              <div class="b_title">
                课程：BMOT2021年职级晋升-安全管理（高级）
              </div>
              <div class="b_sub">
                <div class="bs_type">类型：</div>
                <div class="bs_right">录播课</div>
                <div class="bs_left">内容分类：</div>
                <div class="bs_right">领导力</div>
                <div class="bs_left">状态：</div>
                <div class="bs_right">已审核</div>
              </div>
              <a-tabs
                class="b_menu"
                v-model:activeKey="faceManageTab"
                size="large"
                :tabBarStyle="{ marginLeft: '10px' }"
                @change="faceManageChange"
              >
                <a-tab-pane key="1" tab="报名管理">
                  <div class="b_menunav">
                    <div class="bm_select">
                      <a-select
                        class="select"
                        ref="select"
                        placeholder="请选择状态"
                        v-model:value="gl_selectV1"
                        style="width: 200px"
                        @focus="focus"
                        @change="handleChange"
                      >
                        <a-select-option value="status">状态</a-select-option>
                        <a-select-option value="passed">已通过</a-select-option>
                        <a-select-option value="weishenhe"
                          >未审核</a-select-option
                        >
                        <a-select-option value="reject"
                          >管理员拒绝</a-select-option
                        >
                      </a-select>
                    </div>
                    <div class="bm_input">
                      <a-input
                        v-model:value="gl_inputv1"
                        style="width: 200px; height: 40px; border-radius: 8px"
                        placeholder="姓名"
                      />
                    </div>
                    <div class="bm_btn">
                      <div class="btn btn1">
                        <div class="search"></div>
                        <div class="btnText">搜索</div>
                      </div>
                    </div>
                  </div>
                  <div class="bm_table" style="margin-bottom: 20px">
                    <a-table
                      :columns="columns2"
                      :data-source="tableData2"
                      :loading="tableDataTotal === -1 ? true : false"
                      :pagination="false"
                    />
                  </div>
                </a-tab-pane>
                <a-tab-pane key="2" tab="学习记录">
                  <div class="b_menunav">
                    <div class="bm_select">
                      <a-select
                        class="select"
                        ref="select"
                        placeholder="请选择状态"
                        v-model:value="gl_selectV2"
                        style="width: 200px"
                        @focus="focus"
                        @change="handleChange"
                      >
                        <a-select-option value="status">状态</a-select-option>
                        <a-select-option value="passed">已通过</a-select-option>
                        <a-select-option value="weishenhe"
                          >未审核</a-select-option
                        >
                        <a-select-option value="reject"
                          >管理员拒绝</a-select-option
                        >
                      </a-select>
                    </div>
                    <div class="bm_input">
                      <a-input
                        v-model:value="gl_inputV2"
                        style="width: 200px; height: 40px; border-radius: 8px"
                        placeholder="姓名"
                      />
                    </div>
                    <div class="bm_btn">
                      <div class="btn btn1">
                        <div class="search"></div>
                        <div class="btnText">搜索</div>
                      </div>
                    </div>
                  </div>
                  <div class="bm_table" style="margin-bottom: 20px">
                    <a-table
                      :columns="columns2"
                      :data-source="tableData3"
                      :loading="tableDataTotal === -1 ? true : false"
                      :pagination="false"
                    >
                      <template #bodyCell="{ column }">
                        <template v-if="column.key === 'opacation'">
                          <a @click="ckxq_hs">查看详情</a>
                        </template>
                      </template>
                    </a-table>
                  </div>
                </a-tab-pane>
              </a-tabs>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 操作在线面授课程管理页面 -->
    <!-- 面授课程管理查看详情页面 -->
    <a-modal
      v-model:visible="om_ckxq"
      title="Title"
      @ok="closeModal"
      :footer="null"
      :closable="false"
      wrapClassName="modalStyle coursewareDetail"
      width="80%"
    >
      <div class="modalHeader">
        <div class="headerLeft">
          <img
            style="width: 17px; height: 18px; margin-right: 8px"
            src="@/assets/images/coursewareManage/detail.png"
          />
          <span class="headerLeftText">查看详情</span>
        </div>
        <div style="margin-right: 57px; cursor: pointer">
          <img
            @click="ftsr_exit"
            style="width: 22px; height: 22px"
            src="../../assets/images/basicinfo/close22.png"
          />
        </div>
      </div>
      <div class="modalMain">
        <div
          class="ftsturecord"
          :style="{ display: om_ckxq ? 'block' : 'none' }"
        >
          <div class="ftsr_main">
            <div class="ftsr_table">
              <a-table
                :columns="columns4"
                :data-source="tableData4"
                :loading="tableDataTotal === -1 ? true : false"
                :pagination="false"
              >
              </a-table>
            </div>
            <div class="ftsr_btn" @click="ftsr_exit">
              <div class="btnText">取消</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 面授课程管理查看详情页面 -->
    <!--开课页面 -->
    <a-modal
      v-model:visible="stm_hs"
      title="Title"
      @ok="closeModal"
      :footer="null"
      :closable="false"
      wrapClassName="modalStyle schtimeModal"
      width="80%"
      @cancel="stm_exit"
    >
      <div class="modalHeader">
        <div class="headerLeft">
          <img
            style="width: 17px; height: 18px; margin-right: 8px"
            src="@/assets/images/coursewareManage/scht.png"
          />
          <span class="headerLeftText">开课</span>
        </div>
        <div style="margin-right: 57px; cursor: pointer">
          <img
            @click="stm_exit"
            style="width: 22px; height: 22px"
            src="../../assets/images/basicinfo/close22.png"
          />
        </div>
      </div>
      <div class="modalMain">
        <div class="schooltime" :style="{ display: stm_hs ? 'block' : 'none' }">
          <div class="st_main">
            <div class="stm_inputbtn">
              <a-input
                v-model:value="kk_inputV1"
                style="
                  width: 270px;
                  height: 40px;
                  border-radius: 8px;
                  margin-right: 14px;
                "
                placeholder="请输入创建人"
              />
              <a-input
                v-model:value="kk_inputV2"
                style="
                  width: 270px;
                  height: 40px;
                  border-radius: 8px;
                  margin-right: 14px;
                "
                placeholder="请输入教师名称"
              />
              <div class="select">
                <a-date-picker
                  v-model="selectTime"
                  type="date"
                  placeholder="创建时间"
                  style="width: 270px; margin-right: 14px"
                />
              </div>
              <div class="stm_btn btn1">
                <div class="search"></div>
                <div class="btnText">搜索</div>
              </div>
              <div class="stm_btn btn2">
                <div class="reset"></div>
                <div class="btnText">重置</div>
              </div>
              <div class="stm_btn3 btn3">
                <div class="add"></div>
                <div class="btnText" @click="createkk">
                  <span style="color: #ffffff">新建开课</span>
                </div>
              </div>
            </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
              class="stm_table"
              :style="{ display: stm_hs ? 'block' : 'none' }"
            >
              <a-table
                :columns="columns6"
                :data-source="tableData6"
                :loading="tableDataTotal === -1 ? true : false"
                :scroll="{ x: 700, y: 800 }"
                expandRowByClick="true"
                @expand="expandTable"
                :pagination="false"
              />
              <div class="pa">
                <a-pagination
                  showSizeChanger="true"
                  showQuickJumper="true"
                  hideOnSinglePage="true"
                  :pageSize="pageSize"
                  :current="currentPage"
                  :total="tableDataTotal"
                  class="pagination"
                />
              </div>
            </div>
            <!-- 有数据表格 -->
          </div>
        </div>
      </div>
    </a-modal>
    <!--开课页面 -->
    <!--新建开课页面 -->
    <a-modal
      v-model:visible="cstm_hs"
      style="margin-top: 400px"
      @cancel="cstm_exit"
    >
      <div
        class="createschooltime"
        :style="{ display: cstm_hs ? 'block' : 'none' }"
      >
        <div class="cst_header"></div>
        <div class="cst_main">
          <div class="cstm_header">
            <div class="add_icon"></div>
            <span>新建开课</span>
            <div class="close_exit" @click="cstm_exit"></div>
          </div>
          <div class="cstm_title">
            <span>面授名称：管理者的专属面授课</span>
          </div>
          <div class="cstm_items">
            <div class="signbox">
              <div class="sign">
                <img
                  src="@/assets/images/coursewareManage/asterisk.png"
                  alt=""
                />
              </div>
              <span style="margin-right: 3px">开课名称</span>
            </div>
            <div class="b_input">
              <a-input
                v-model:value="xjkkinputV1"
                style="width: 440px; height: 40px; border-radius: 8px"
                placeholder="请输入开课名称"
              />
            </div>
          </div>
          <div class="cstm_items">
            <div class="signbox">
              <div class="sign">
                <img
                  src="@/assets/images/coursewareManage/asterisk.png"
                  alt=""
                />
              </div>
              <span style="margin-right: 3px">地点</span>
            </div>
            <div class="b_input">
              <a-input
                v-model:value="xjkkinputV2"
                maxlength="50"
                style="width: 440px; height: 40px; border-radius: 8px"
                placeholder="请输入详细地点"
              />
              <div class="inp_num">
                <span style="color: #c7cbd2">{{ xjkkinputV2.length }}/50</span>
              </div>
            </div>
          </div>
          <div class="cstm_items">
            <div class="signbox">
              <div class="sign">
                <img
                  src="@/assets/images/coursewareManage/asterisk.png"
                  alt=""
                />
              </div>
              <span style="margin-right: 3px">面授时间</span>
            </div>
            <div class="select fitems">
              <a-range-picker
                style="width: 440px; height: 40px; border-radius: 8px"
                v-model:value="xjkkinputV3"
                separator="至"
                :placeholder="['        开始时间', '        结束时间']"
              />
            </div>
          </div>
          <div class="cstm_items">
            <div class="signbox">
              <div class="sign">
                <img
                  src="@/assets/images/coursewareManage/asterisk.png"
                  alt=""
                />
              </div>
              <span style="margin-right: 3px">授课教师</span>
            </div>
            <div class="b_input">
              <a-input
                v-model:value="xjkkinputV4"
                style="width: 440px; height: 40px; border-radius: 8px"
                placeholder="请输入教师"
              />
            </div>
          </div>
          <div class="cstm_items">
            <div class="signbox">
              <span style="margin-right: 3px">报名设置</span>
            </div>
            <div class="b_input">
              <a-checkbox v-model:checked="checked">
                <span style="color: #6d7584">是否允许公开报名</span>
              </a-checkbox>
            </div>
          </div>
          <div class="cstm_items">
            <div class="signbox">
              <span style="margin-right: 3px">签到设置</span>
            </div>
            <div class="b_input">
              <a-radio-group v-model:value="xjkkradioV1">
                <a-radio
                  v-model:checked="checked"
                  :value="1"
                  @click="clear_xjkkradioV1"
                  ><span style="color: #6d7584; margin-right: 30px"
                    >是否允许未报名的学员签到</span
                  ></a-radio
                >
                <a-radio
                  v-model:checked="checked"
                  :value="2"
                  @click="clear_xjkkradioV1"
                  ><span style="color: #6d7584">签到是否需要口令</span></a-radio
                >
              </a-radio-group>
            </div>
          </div>
          <div class="cstm_items">
            <div class="signbox">
              <span style="margin-right: 3px">评估设置</span>
            </div>
            <div class="b_input">
              <a-checkbox v-model:checked="checked">
                <span style="color: #6d7584">是否需要评估</span>
              </a-checkbox>
            </div>
          </div>
          <div class="cstm_items">
            <div class="signbox">
              <span style="margin-right: 3px">完成规则</span>
            </div>
            <div class="b_input">
              <a-radio-group v-model:value="xjkkradioV2">
                <a-radio
                  v-model:checked="checked"
                  :value="1"
                  @click="clear_xjkkradioV2"
                  ><span style="color: #6d7584; margin-right: 30px"
                    >报名即完成</span
                  ></a-radio
                >
                <a-radio
                  v-model:checked="checked"
                  :value="2"
                  @click="clear_xjkkradioV2"
                  ><span style="color: #6d7584; margin-right: 30px"
                    >签到即完成</span
                  ></a-radio
                >
                <a-radio
                  v-model:checked="checked"
                  :value="3"
                  @click="clear_xjkkradioV2"
                  ><span style="color: #6d7584">请假算完成</span></a-radio
                >
              </a-radio-group>
            </div>
          </div>
          <div class="cstm_items items_fj">
            <div class="signbox">
              <span style="margin-right: 3px">附件</span>
            </div>
            <div class="b_input">
              <div class="upload_box">
                <div class="upload_icon">
                  <img
                    src="@/assets/images/coursewareManage/enclosure.png"
                    alt=""
                  />
                </div>
                <span style="color: #4ea6ff">上传附件</span>
              </div>
            </div>
          </div>
          <div class="cstm_items">
            <div class="signbox">
              <span style="margin-right: 3px"> </span>
            </div>
            <div class="b_input">
              <span style="color: #999ba3"
                >支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip</span
              >
            </div>
          </div>
          <div class="items_btn">
            <div class="cstm_btn btn5">
              <div class="btnText" @click="cstm_exit">取消</div>
            </div>
            <div class="cstm_btn btn6">
              <div class="btnText" @click="cstm_exit">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!--新建开课页面 -->
    <!--开课学员管理页面 -->
    <a-modal
      v-model:visible="sm_hs"
      title="Title"
      @ok="closeModal"
      :footer="null"
      :closable="false"
      wrapClassName="modalStyle stusmanageModal"
      width="80%"
      @cancel="sm_exit"
    >
      <div class="modalHeader">
        <div class="headerLeft">
          <img
            style="width: 17px; height: 18px; margin-right: 8px"
            src="@/assets/images/coursewareManage/stum.png"
          />
          <span class="headerLeftText">学员管理</span>
        </div>
        <div style="margin-right: 57px; cursor: pointer">
          <img
            @click="sm_exit"
            style="width: 22px; height: 22px"
            src="../../assets/images/basicinfo/close22.png"
          />
        </div>
      </div>
      <div class="modalMain">
        <div
          class="studentsmanage"
          :style="{ display: sm_hs ? 'block' : 'none' }"
        >
          <div class="stm_main">
            <div class="stmmitems">
              <div class="stmm_i1">
                <span style="margin-right: 52px">XXX课程-第1期-20220726</span
                ><span style="color: #ffb751">已开课 4.5</span>
              </div>
              <div class="stmm_i2">
                <span style="color: #999ba3">时间：</span
                ><span>2022-07-26 14：30-15：00</span>
              </div>
              <div class="stmm_i3">
                <span style="color: #999ba3">地点：</span
                ><span>核心能力大楼培训教室</span>
              </div>
              <div class="stmm_i4">
                <span style="color: #999ba3">授课教师：</span
                ><span>王雪han</span>
              </div>
              <div class="stmm_i5">
                <div class="i5_left">
                  <a-input
                    v-model:value="xygl_inputV1"
                    style="
                      width: 270px;
                      height: 40px;
                      border-radius: 8px;
                      margin-right: 14px;
                    "
                    placeholder="请输入姓名"
                  />
                  <div class="stmm_btn btn1">
                    <div class="search"></div>
                    <div class="btnText">搜索</div>
                  </div>
                  <div class="stmm_btn btn2">
                    <div class="reset"></div>
                    <div class="btnText">重置</div>
                  </div>
                </div>
                <div class="i5_right">
                  <div class="stmm_btn btn3">
                    <span style="color: #ffffff">添加学员</span>
                  </div>
                  <div class="stmm_btn btn4" @click="hideShow">
                    <div class="btn4_sub">
                      <span style="color: #4ea6ff; margin-right: 4px"
                        >批量操作</span
                      >
                      <div
                        class="b_zk"
                        :style="{ display: hideshow ? 'block' : 'none' }"
                      ></div>
                      <div
                        class="b_sq"
                        :style="{ display: hideshow ? 'none' : 'block' }"
                      ></div>
                    </div>
                    <div
                      class="btn4_sup"
                      :style="{ display: hideshow ? 'none' : 'block' }"
                    >
                    <div class="btnsbox">
                      <div class="btn4_tit">
                        <span style="color: #4ea6ff">批量录入成绩</span>
                      </div>
                      <div class="btn4_op1">
                        <span >批量结业</span>
                      </div>
                      <div class="btn4_op2">
                        <span >批量通过</span>
                      </div>
                      <div class="btn4_op3">
                        <span>批量拒绝</span>
                      </div>
                    </div>
                    </div>
                  </div>
                  <div class="stmm_btn btn5">
                    <div class="export"></div>
                    <div class="btnText">导出</div>
                  </div>
                </div>
              </div>
              <div class="stmm_i6">
                <a-table
                  :columns="columns7"
                  :data-source="tableData7"
                  :loading="tableDataTotal === -1 ? true : false"
                  :scroll="{ x: 800 }"
                  expandRowByClick="true"
                  @expand="expandTable"
                  :pagination="false"
                />
                <div class="pa">
                  <a-pagination
                    showSizeChanger="true"
                    showQuickJumper="true"
                    hideOnSinglePage="true"
                    :pageSize="pageSize"
                    :current="currentPage"
                    :total="tableDataTotal"
                    class="pagination"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!--开课学员管理页面 -->
    <!--二维码页面 -->
    <a-modal
      v-model:visible="QR_hs"
      :footer="null"
      :closable="closableQR"
      wrapClassName="QRModal"
      style="margin-top: 400px"
      :zIndex="9999"
      @cancel="qr_exit"
    >
      <div class="QR" :style="{ display: QR_hs ? 'block' : 'none' }">
        <div class="qr_header"></div>
        <div class="qr_main">
          <div class="qrm_header">
            <div class="qr_icon"></div>
            <div :style="{ display: qrQR_hs ? 'block' : 'none' }">
              <span>二维码</span>
            </div>
            <div :style="{ display: olQR_hs ? 'block' : 'none' }">
              <span>在线课</span>
            </div>
            <div :style="{ display: ftQR_hs ? 'block' : 'none' }">
              <span>面授课</span>
            </div>
            <div :style="{ display: ftsQR_hs ? 'block' : 'none' }">
              <span>面授课签到</span>
            </div>
            <div :style="{ display: vipftQR_hs ? 'block' : 'none' }">
              <span>管理者面授课</span>
            </div>
            <div class="close_exit" @click="qr_exit"></div>
          </div>
          <div class="qrm_body"><div class="QR_img"></div></div>
          <div class="qrm_footer">
            <span style="margin-left: 52px">下载二维码</span>
            <div class="qrmbtn"><div class="btntext">200*200</div></div>
            <div class="qrmbtn"><div class="btntext">400*400</div></div>
            <div class="qrmbtn"><div class="btntext">800*800</div></div>
          </div>
        </div>
      </div>
    </a-modal>
    <!--二维码页面 -->
    <!--录入成绩页面 -->
    <a-modal
      v-model:visible="rg_hs"
      :footer="null"
      :closable="closableQR"
      wrapClassName="recgradeModal"
      style="margin-top: 400px"
      :zIndex="9999"
      @cancel="rg_exit"
    >
      <div class="recordgrade" :style="{ display: rg_hs ? 'block' : 'none' }">
        <div class="rg_header"></div>
        <div class="rg_main">
          <div class="rgm_header">
            <div class="rg_icon"></div>
            <span>录入成绩</span>
            <div class="close_exit" @click="rg_exit"></div>
          </div>
          <div class="rgm_body">
            <div class="rgmb_items">
              <div class="items_left">
                <div class="sign">
                  <img
                    src="@/assets/images/coursewareManage/asterisk.png"
                    alt=""
                  />
                </div>
                <span>得分</span>
              </div>
              <div class="rgmb_input">
                <a-input
                  v-model:value="lrcj_inputV1"
                  maxlength="20"
                  style="width: 440px; height: 40px; border-radius: 8px"
                  placeholder=""
                />
              </div>
            </div>
          </div>
          <div class="qrm_btnbox">
            <div class="qrm_btn btn1">
              <div class="btnText" @click="rg_exit">取消</div>
            </div>
            <div class="qrm_btn btn2">
              <div class="btnText" @click="rg_exit">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!--录入成绩页面 -->
    <!--结业页面 -->
    <a-modal
      v-model:visible="graduate_hs"
      :footer="null"
      :closable="closableQR"
      wrapClassName="graModal"
      style="margin-top: 400px"
      :zIndex="9999"
      @cancel="graduate_exit"
    >
      <div
        class="graduate"
        :style="{ display: graduate_hs ? 'block' : 'none' }"
      >
        <div class="gra_header"></div>
        <div class="gra_main">
          <div class="gram_header">
            <div class="gra_icon"></div>
            <span>结业</span>
            <div class="close_exit" @click="graduate_exit"></div>
          </div>
          <div class="gram_body">
            <div class="gramb_items">
              <div class="items_left">
                <div class="sign">
                  <img
                    src="@/assets/images/coursewareManage/asterisk.png"
                    alt=""
                  />
                </div>
                <span>结业</span>
              </div>
              <div class="gramb_input">
                <a-radio-group v-model:value="jyradioV1">
                  <div class="bc_box">
                    <div class="ol_checkbox">
                      <a-radio
                        v-model:checked="checked"
                        :value="1"
                        @click="clear_jyradioV1"
                        >结业</a-radio
                      >
                    </div>
                    <div class="ol_checkbox">
                      <a-radio
                        v-model:checked="checked"
                        :value="2"
                        @click="clear_jyradioV1"
                        >不结业</a-radio
                      >
                    </div>
                  </div>
                </a-radio-group>
              </div>
            </div>
          </div>
          <div class="qrm_btnbox">
            <div class="qrm_btn btn1">
              <div class="btnText" @click="graduate_exit">取消</div>
            </div>
            <div class="qrm_btn btn2">
              <div class="btnText" @click="graduate_exit">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!--结业页面 -->
    <!--请确定是否同意拒绝此学员学习此课程弹窗 -->
    <a-modal
      v-model:visible="agreereject_hs"
      :footer="null"
      :closable="closableQR"
      wrapClassName="agrstudyModal"
      centered="true"
      @cancel="agreereject_exit"
    >
      <div
        class="agreestudy"
        :style="{ display: agreereject_hs ? 'block' : 'none' }"
      >
        <div class="agree_header"></div>
        <div class="agree_main">
          <div class="agreem_header">
            <div class="agreem_icon"></div>
            <span>提示</span>
            <div class="close_exit" @click="agreereject_exit"></div>
          </div>
          <div class="agreem_body">
            <div class="body_box" :style="{ display: agreestudy_hs ? 'block' : 'none' }">
              <div>请确定是否同意此学员学习此课程</div>
            </div>
            <div class="body_box" :style="{ display: rejectstudy_hs ? 'block' : 'none' }">
              <div>请确定是否拒绝此学员学习此课程</div>
            </div>
          </div>
          <div class="qrm_btnbox">
            <div class="qrm_btn btn1">
              <div class="btnText" @click="agreereject_exit">取消</div>
            </div>
            <div class="qrm_btn btn2">
              <div class="btnText" @click="agreereject_exit">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!--请确定是否同意拒绝此学员学习此课程弹窗 -->
    <!--删除 复制 停用弹窗 -->
    <a-modal
      v-model:visible="delete_hs"
      :footer="null"
      :closable="closableQR"
      wrapClassName="DelModal"
      style="margin-top: 400px"
      :zIndex="9999"
      @cancel="delete_exit"
    >
      <div
        class="delete"
        :style="{
          display: del_hs || copy_hs || nouse_hs ? 'block' : 'none',
        }"
      >
        <div class="del_header"></div>
        <div class="del_main">
          <div class="header">
            <div
              class="del-icons"
              :style="{ display: del_hs ? 'block' : 'none' }"
            >
              <img src="@/assets/images/coursewareManage/notice.png" alt="" />
            </div>
            <div
              class="del-icons"
              :style="{ display: copy_hs || nouse_hs ? 'block' : 'none' }"
            >
              <img src="@/assets/images/coursewareManage/QR.png" alt="" />
            </div>
            <span>提示</span>
            <div class="close_exit" @click="delete_exit"></div>
          </div>
          <div class="body">
            <div :style="{ display: del_hs ? 'block' : 'none' }">
              <span>您确定要删除此课程吗</span>
            </div>
            <div :style="{ display: copy_hs ? 'block' : 'none' }">
              <span>您确定要复制此课程吗</span>
            </div>
            <div :style="{ display: nouse_hs ? 'block' : 'none' }">
              <span>您确定要停用此课程吗</span>
            </div>
          </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>
    <!--删除 复制 停用弹窗 -->
    <!-- 学员管理课程库-归属权抽屉 -->
    <own-power v-model:ownpowervisible="ownpowervisible" />
    <!-- 学员管理课程库-归属权抽屉 -->
    <!-- 添加授权侧弹窗 -->
    <corpowerlist v-model:corpowerlistVisible="corpowerlistvisible" />
    <!-- 添加授权侧弹窗 -->
  </div>
</template>
<script>
import { reactive, toRefs, defineComponent, ref } from "vue";
import { message } from "ant-design-vue";
import OwnPower from "../../components/drawers/OwnPower.vue";
import Corpowerlist from "../../components/drawers/CorPowerlist.vue";
//列表表格
const columns1 = [
  {
    title: "序号",
    width: 100,
    dataIndex: "num",
    key: "num",
    align: "center",
  },
  {
    title: "名称",
    width: 200,
    dataIndex: "name",
    key: "name",
    ellipsis: true,
    align: "center",
  },
  {
    title: "内容分类",
    width: 100,
    dataIndex: "content",
    key: "1",
    align: "center",
  },
  {
    title: "课程形式",
    width: 100,
    dataIndex: "courseform",
    key: "2",
    align: "center",
  },
  {
    title: " 所属项目",
    width: 200,
    dataIndex: "project",
    key: "3",
    align: "center",
    ellipsis: true,
  },
  {
    title: "学习人数",
    width: 110,
    dataIndex: "stunum",
    key: "4",
    align: "center",
  },
  {
    title: "评分",
    width: 100,
    dataIndex: "grade",
    key: "5",
    align: "center",
  },
  {
    title: "状态",
    width: 100,
    dataIndex: "status",
    key: "6",
    align: "center",
  },
  {
    title: "是否发布",
    width: 100,
    dataIndex: "ynpub",
    key: "7",
    align: "center",
  },
  {
    title: "创建人",
    width: 100,
    dataIndex: "creator",
    key: "8",
    align: "center",
  },
  {
    title: "创建时间",
    width: 160,
    dataIndex: "createtime",
    key: "9",
    align: "center",
  },
  {
    title: "上线时间",
    width: 160,
    dataIndex: "pubtime",
    key: "10",
    align: "center",
  },
  {
    title: "是否停用",
    width: 100,
    key: "either",
    dataIndex: "ynuse",
    align: "center",
  },
  {
    title: "操作",
    width: 300,
    className: "h",
    dataIndex: "operation",
    key: "operation",
    fixed: "right",
    align: "center",
  },
];
//列表操作在线面授管理
const columns2 = [
  {
    title: "姓名",
    dataIndex: "projectName",
    key: "projectName",
    width: "16%",
    align: "center",
  },
  {
    title: "工号",
    dataIndex: "numb",
    key: "numb",
    width: "16%",
    align: "center",
  },
  {
    title: "报名时间",
    dataIndex: "applytime",
    key: "applytime",
    width: "16%",
    align: "center",
  },
  {
    title: "签到时间",
    dataIndex: "signtime",
    key: "signtime",
    width: "16%",
    align: "center",
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
    width: "16%",
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "opacation",
    key: "opacation",
    width: "16%",
    align: "center",
  },
];
//管理查看详情
const columns4 = [
  {
    title: "开课名称",
    dataIndex: "projectName",
    key: "projectName",
    width: "30%",
    align: "center",
  },
  {
    title: "地点",
    dataIndex: "address",
    key: "address",
    width: "30%",
    align: "center",
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
    width: "40%",
    align: "center",
  },
];
//开课表格
const columns6 = [
  {
    title: "序号",
    dataIndex: "num",
    key: "num",
    width: "8%",
    align: "center",
  },
  {
    title: "归属组织",
    dataIndex: "organization",
    key: "organization",
    width: "10%",
    align: "center",
  },
  {
    title: "场地",
    dataIndex: "address",
    key: "saddress",
    width: "10%",
    align: "center",
  },
  {
    title: "开始时间",
    dataIndex: "starttime",
    key: "starttime",
    width: "18%",
    align: "center",
  },
  {
    title: "创建时间",
    dataIndex: "createtime",
    key: "createtime",
    width: "18%",
    align: "center",
  },
  {
    title: "操作",
    width: "30%",
    dataIndex: "operation",
    key: "operation",
    align: "center",
  },
];
//开课学员管理
const columns7 = [
  {
    title: "序号",
    width: 200,
    dataIndex: "num",
    key: "num",
    align: "center",
  },
  {
    title: "姓名",
    width: 200,
    dataIndex: "name",
    key: "name",
  },
  {
    title: "工号",
    width: 200,
    dataIndex: "number",
    key: "1",
    align: "center",
  },
  {
    title: "部门",
    width: 200,
    dataIndex: "department",
    key: "2",
    align: "center",
  },
  {
    title: " 岗位",
    width: 300,
    dataIndex: "postion",
    key: "3",
    align: "center",
  },
  {
    title: "Band",
    width: 200,
    dataIndex: "band",
    key: "4",
    align: "center",
  },
  {
    title: "报名状态",
    width: 200,
    dataIndex: "status",
    key: "5",
    align: "center",
  },
  {
    title: "加入方式",
    width: 200,
    dataIndex: "join",
    key: "6",
    align: "center",
  },
  {
    title: "签到状态",
    width: 200,
    dataIndex: "signstatus",
    key: "7",
    align: "center",
  },
  {
    title: "评估状态",
    width: 200,
    dataIndex: "evastatus",
    key: "8",
    align: "center",
  },
  {
    title: "结业状态",
    width: 280,
    dataIndex: "overstatus",
    key: "9",
    align: "center",
  },
  {
    title: "操作",
    width: 280,
    className: "h",
    dataIndex: "operation",
    key: "operation",
    fixed: "right",
    align: "center",
  },
];
export default defineComponent({
  components: {
    OwnPower,
    Corpowerlist,
  },
  setup() {
    const state = reactive({
      //列表表格
      tableData1: [
        {
          key: "1",
          num: 1,
          name: "时间管理",
          content: "领导力",
          courseform: "线上",
          project: "管理者进阶-腾飞班1",
          stunum: "50",
          grade: "5",
          status: "未提交",
          ynpub: "未发布",
          creator: "管理员",
          createtime: "2022-07-20 9:30",
          pubtime: "2022-07-20 9:30",
          kkty: false,
        },
        {
          key: "2",
          num: 2,
          name: "智能制造初级课程",
          content: "专业力",
          courseform: "线上",
          project: "-",
          stunum: "200",
          grade: "5",
          status: "待审核",
          ynpub: "未发布",
          creator: "管理员",
          createtime: "2022-07-20 9:30",
          pubtime: "2022-07-20 9:30",
          kkty: true,
        },
        {
          key: "3",
          num: 3,
          name: "产业必备技能",
          content: "专业力",
          courseform: "线上",
          project: "-",
          stunum: "200",
          grade: "5",
          status: "已审核",
          ynpub: "已发布",
          creator: "管理员",
          createtime: "2022-07-20 9:30",
          pubtime: "2022-07-20 9:30",
          kkty: true,
        },
        {
          key: "4",
          num: 4,
          name: "B11入模培训",
          content: "专业力",
          courseform: "线上",
          project: "-",
          stunum: "200",
          grade: "5",
          status: "审核未通过",
          ynpub: "未发布",
          creator: "管理员",
          createtime: "2022-07-20 9:30",
          pubtime: "2022-07-20 9:30",
          kkty: true,
        },
        {
          key: "5",
          num: 5,
          name: "入职培训",
          content: "通用力",
          courseform: "面授",
          project: "-",
          stunum: "5",
          grade: "5",
          status: "未提交",
          ynpub: "未发布",
          creator: "管理员",
          createtime: "2022-07-20 9:30",
          pubtime: "2022-07-20 9:30",
          kkty: true,
        },
        {
          key: "6",
          num: 6,
          name: "入职培训",
          content: "通用力",
          courseform: "面授",
          project: "-",
          stunum: "5",
          grade: "6",
          status: "已审核",
          ynpub: "已发布",
          creator: "管理员",
          createtime: "2022-07-20 9:30",
          pubtime: "2022-07-20 9:30",
          kkty: true,
        },
      ],
      //在线面授管理报名管理
      tableData2: [
        {
          key: 1,
          projectName: "刘莉",
          numb: "10064511",
          applytime: "2022-07-20 14:00:00",
          signtime: "-",
          status: "已通过",
        },
        {
          key: 2,
          projectName: "",
          numb: "",
          applytime: "2022-07-20 14:00:00",
          signtime: "2022-09-26 13:30:30",
          status: "已完成",
        },
      ],
      //在线面授管理学习记录
      tableData3: [
        {
          key: 1,
          projectName: "刘莉",
          numb: "10064511",
          applytime: "2022-07-20 14:00:00",
          signtime: "-",
          status: "已通过",
        },
      ],
      //管理查看详情
      tableData4: [
        {
          key: 1,
          projectName: "刘莉",
          address: "10064511",
          status: "已通过",
        },
      ],
      //开课
      tableData6: [
        {
          key: 1,
          num: 1,
          organization: "管理者面授课1",
          address: "核心能力大楼培训",
          starttime: "2022-07-20 14:00:00",
          createtime: "2022-07-14 14:00:00",
        },
        {
          key: 2,
          num: 2,
          organization: "管理者面授课2",
          address: "核心能力大楼培训",
          starttime: "2022-07-20 14:00:00",
          createtime: "2022-07-14 14:00:00",
        },
        {
          key: 3,
          num: 3,
          organization: "管理者面授课3",
          address: "核心能力大楼培训",
          starttime: "2022-07-20 14:00:00",
          createtime: "2022-07-14 14:00:00",
        },
        {
          key: 4,
          num: 4,
          organization: "管理者面授课4",
          address: "核心能力大楼培训",
          starttime: "2022-07-20 14:00:00",
          createtime: "2022-07-14 14:00:00",
        },
        {
          key: 5,
          num: 5,
          organization: "管理者面授课5",
          address: "核心能力大楼培训",
          starttime: "2022-07-20 14:00:00",
          createtime: "2022-07-14 14:00:00",
        },
      ],
      //开课学员管理
      tableData7: [
        {
          key: "1",
          num: 1,
          name: "李梦",
          number: "1000",
          department: "显示事业",
          postion: "产品经理",
          band: "Band9",
          status: "待审核",
          join: "手动加入",
          signstatus: "-",
          evastatus: "-",
          overstatus: "-",
        },
        {
          key: "2",
          num: 2,
          name: "李梦",
          number: "1001",
          department: "智慧医工",
          postion: "产品经理",
          band: "Band10",
          status: "已通过",
          join: "手动加入",
          signstatus: "已签到",
          evastatus: "已评估",
          overstatus: "-",
        },
        {
          key: "3",
          num: 3,
          name: "李梦",
          number: "1002",
          department: "业务支援",
          postion: "产品经理",
          band: "Band10",
          status: "已拒绝",
          join: "手动加入",
          signstatus: "-",
          evastatus: "-",
          overstatus: "-",
        },
        {
          key: "4",
          num: 4,
          name: "李梦",
          number: "1003",
          department: "业务支援",
          postion: "产品经理",
          band: "Band9",
          status: "已通过",
          join: "报名加入",
          signstatus: "已签到",
          evastatus: "-",
          overstatus: "90/已结业",
        },
        {
          key: "5",
          num: 5,
          name: "李梦",
          number: "1004",
          department: "业务支援",
          postion: "产品经理",
          band: "Band9",
          status: "已通过",
          join: "报名加入",
          signstatus: "请假",
          evastatus: "-",
          overstatus: "",
        },
      ],
      currentPage: 1,
      tableDataTotal: 100,
      pageSize: 10,
      selectedRowKeys: [],
      faceManageTab: "1",
      of_hs: false,
      hideshow: true,
      bs_hs: true,
      ft_hs: false,
      om_1: false,
      ft_1: false,
      om_ckxq: false,
      stm_hs: false,
      cstm_hs: false,
      sm_hs: false,
      QR_hs: false,
      closableQR: false,
      rg_hs: false,
      graduate_hs: false,
      agreereject_hs:false,
      agreestudy_hs: false,
      rejectstudy_hs: false,
      delete_hs: false,
      del_hs: false,
      copy_hs: false,
      nouse_hs: false,
      // 二维码标题状态
      qrQR_hs: false,
      olQR_hs: false,
      ftQR_hs: false,
      ftsQR_hs: false,
      vipftQR_hs: false,
      //抽屉状态
      ownpowervisible: false,
      corpowerlistvisible: false,
      //列表
      value1: "",
      value2: "",
      value3: "",
      value4: "",
      //选择线上还是面授
      xzinputV1: "",
      valueE1: "",
      valueE2: "",
      //确定面授
      qdms_inputV1: "",
      qdms_inputV2: "",
      qdms_inputV3: "",
      qdms_inputV4: "",
      qdms_inputV5: "",
      qdms_inputV6: "",
      //在线面授管理
      gl_selectV1: "",
      gl_selectV2: "",
      gl_inputV1: "",
      gl_inputV2: "",
      //开课
      kkinputV1: "",
      kkinputV2: "",
      //新建开课
      xjkkradioV1: "",
      xjkkradioV2: "",
      xjkkinputV1: "",
      xjkkinputV2: "",
      xjkkinputV3: "",
      xjkkinputV4: "",
      //开课学员管理
      xygl_inputV1: "",
      //录入成绩
      lrcj_inputV1: "",
      //结业
      jyradioV1: "",
    });
    // 渲染列表1操作
    const getTableDate = () => {
      let datas = state.tableData1;
      datas.map((value) => {
        {
          //单层项目
          value.operation = (
            <div class="operation" style="justify-content: flex-start;">
              <div class="nSelect">
                {value.status === "已审核" ? (
                  <div class="nselect">
                    <div class="ops1">
                      <div
                        class="jc"
                        style={{ width: "30px" }}
                        onClick={() => {
                          state.stm_hs = true;
                        }}
                      >
                        开课
                      </div>
                    </div>
                    <div class="ops2">
                      <div
                        class="jc"
                        style={{ width: "30px" }}
                        onClick={() => {
                          if (value.courseform === "线上") {
                            state.om_1 = true;
                            state.ft_1 = false;
                          } else if (value.courseform === "面授") {
                            state.om_1 = true;
                            state.ft_1 = true;
                          }
                        }}
                      >
                        管理
                      </div>
                    </div>
                    <div class="ops3">
                      <div
                        class="jc"
                        onClick={() => {
                          state.delete_hs = true;
                          state.copy_hs = true;
                        }}
                        style={{ width: "30px" }}
                      >
                        复制
                      </div>
                    </div>
                    <div class="tableSelect">
                      <div class="ops4">
                        <a-select
                          style="width: 50px;margin-top:2px;margin-left:25px"
                          value="授权"
                          // options={state.projectNameList}
                          dropdownClassName="tabledropdown"
                        >
                          <a-select-option value="权限名单" label="权限名单">
                            <div
                              onClick={() => {
                                state.corpowerlistvisible = true;
                              }}
                            >
                              权限名单
                            </div>
                          </a-select-option>
                          <a-select-option value="归属权" label="归属权">
                            <div
                              onClick={() => {
                                state.ownpowervisible = true;
                              }}
                            >
                              归属权
                            </div>
                          </a-select-option>
                          <a-select-option value="查看权" label="查看权">
                            <div>查看权</div>
                          </a-select-option>
                          <a-select-option value="管理权" label="管理权">
                            <div>管理权</div>
                          </a-select-option>
                        </a-select>
                      </div>
                    </div>
                    <div class="tableSelect">
                      <div class="ops5">
                        <a-select
                          style="width: 50px;margin-top:2px;margin-left:25px;margin-right:10px"
                          value="更多"
                          // options={state.projectNameList}
                          dropdownClassName="tabledropdown"
                        >
                          <a-select-option
                            value="二维码"
                            label="二维码"
                            style="padding-left:35px"
                          >
                            <div
                              onClick={() => {
                                if (value.courseform === "线上") {
                                  state.QR_hs = true;
                                  state.olQR_hs = true;
                                } else if (value.courseform === "面授") {
                                  state.QR_hs = true;
                                  state.ftQR_hs = true;
                                }
                              }}
                            >
                              二维码
                            </div>
                          </a-select-option>
                          <a-select-option
                            value="取消"
                            label="取消"
                            style="padding-left:35px"
                          >
                            <div
                              onClick={() => {
                                console.log("点击了");
                              }}
                            >
                              取消
                            </div>
                          </a-select-option>
                        </a-select>
                      </div>
                    </div>
                  </div>
                ) : (
                  <div></div>
                )}
                {value.status === "待审核" ? (
                  <div class="nselect">
                    <div class="ops1">
                      <div
                        class="jc"
                        style={{ width: "30px" }}
                        onClick={() => {
                          state.stm_hs = true;
                        }}
                      >
                        开课
                      </div>
                    </div>
                    <div class="ops1">
                      <div class="jc" style={{ width: "30px" }}></div>
                    </div>
                    <div class="ops1">
                      <div class="jc" style={{ width: "30px" }}></div>
                    </div>
                    <div class="tableSelect">
                      <div class="ops4">
                        <a-select
                          style="width: 50px;margin-top:2px;margin-left:25px"
                          value="授权"
                          // options={state.projectNameList}
                          dropdownClassName="tabledropdown"
                        >
                          <a-select-option value="权限名单" label="权限名单">
                            <div
                              onClick={() => {
                                state.corpowerlistvisible = true;
                              }}
                            >
                              权限名单
                            </div>
                          </a-select-option>
                          <a-select-option value="归属权" label="归属权">
                            <div
                              onClick={() => {
                                state.ownpowervisible = true;
                              }}
                            >
                              归属权
                            </div>
                          </a-select-option>
                          <a-select-option value="查看权" label="查看权">
                            <div>查看权</div>
                          </a-select-option>
                          <a-select-option value="管理权" label="管理权">
                            <div>管理权</div>
                          </a-select-option>
                        </a-select>
                      </div>
                    </div>
                    <div class="ops5">
                      <div class="jc" style="margin-left:22px">
                        撤回
                      </div>
                    </div>
                  </div>
                ) : (
                  <div></div>
                )}
                {value.status === "未提交" ? (
                  <div class="nselect">
                    <div class="ops1">
                      <div
                        class="jc"
                        style={{ width: "30px" }}
                        onClick={() => {
                          state.stm_hs = true;
                        }}
                      >
                        开课
                      </div>
                    </div>
                    <div class="ops2">
                      <div class="jc" style={{ width: "30px" }}>
                        编辑
                      </div>
                    </div>
                    <div class="ops3" style={{ "margin-right": "10px" }}>
                      <div
                        class="jc"
                        onClick={() => {
                          state.delete_hs = true;
                          state.copy_hs = true;
                        }}
                        style={{ width: "30px" }}
                      >
                        复制
                      </div>
                    </div>
                  </div>
                ) : (
                  <div></div>
                )}
                {value.status === "审核未通过" ? (
                  <div class="nselect">
                    <div class="ops1">
                      <div
                        class="jc"
                        style={{ width: "30px" }}
                        onClick={() => {
                          state.stm_hs = true;
                        }}
                      >
                        开课
                      </div>
                    </div>
                    <div class="ops2">
                      <div class="jc" style={{ width: "30px" }}>
                        编辑
                      </div>
                    </div>
                    <div class="ops3">
                      <div
                        class="jc"
                        onClick={() => {
                          state.delete_hs = true;
                          state.copy_hs = true;
                        }}
                        style={{ width: "30px" }}
                      >
                        复制
                      </div>
                    </div>
                    <div class="tableSelect">
                      <div class="ops4">
                        <a-select
                          style="width: 50px;margin-top:2px;margin-left:25px"
                          value="授权"
                          // options={state.projectNameList}
                          dropdownClassName="tabledropdown"
                        >
                          <a-select-option value="权限名单" label="权限名单">
                            <div
                              onClick={() => {
                                state.corpowerlistvisible = true;
                              }}
                            >
                              权限名单
                            </div>
                          </a-select-option>
                          <a-select-option value="归属权" label="归属权">
                            <div
                              onClick={() => {
                                state.ownpowervisible = true;
                              }}
                            >
                              归属权
                            </div>
                          </a-select-option>
                          <a-select-option value="查看权" label="查看权">
                            <div>查看权</div>
                          </a-select-option>
                          <a-select-option value="管理权" label="管理权">
                            <div>管理权</div>
                          </a-select-option>
                        </a-select>
                      </div>
                    </div>
                    <div class="ops5">
                      <div
                        class="jc"
                        onClick={() => {
                          state.delete_hs = true;
                          state.del_hs = true;
                        }}
                        style="margin-left:22px"
                      >
                        删除
                      </div>
                    </div>
                  </div>
                ) : (
                  <div></div>
                )}
              </div>
            </div>
          );
        }
      });
      state.tableData = datas;
    };
    getTableDate();
    //渲染学员管理操作
    const getTableDate2 = () => {
      let data2 = state.tableData7;
      data2.map((value) => {
        {
          //单层项目
          value.operation = (
            <div class="operation">
              <div class="nSelect">
                {value.status === "待审核" ? (
                  <div class="nselect">
                    <div class="ops1">
                      <div
                        class="jc"
                        onClick={() => {
                          state.agreereject_hs = true;
                          state.agreestudy_hs = true;
                        }}
                      >
                        通过
                      </div>
                    </div>
                    <div class="ops1">
                      <div
                        class="jc"
                        onClick={() => {
                          state.agreereject_hs = true;
                          state.rejectstudy_hs = true;
                        }}
                      >
                        拒绝
                      </div>
                    </div>
                    <div class="ops2">
                      <div
                        class="jc"
                        onClick={() => {
                          state.delete_hs = true;
                          state.del_hs = true;
                        }}
                      >
                        删除
                      </div>
                    </div>
                  </div>
                ) : (
                  <div></div>
                )}
                {value.status === "已通过" ? (
                  <div class="nselect">
                    <div class="ops2">
                      <div
                        class="jc"
                        onClick={() => {
                          state.delete_hs = true;
                          state.del_hs = true;
                        }}
                      >
                        删除
                      </div>
                    </div>
                  </div>
                ) : (
                  <div></div>
                )}
                {value.status === "已拒绝" ? (
                  <div class="nselect">
                    <div class="ops2">
                      <div
                        class="jc"
                        onClick={() => {
                          state.delete_hs = true;
                          state.del_hs = true;
                        }}
                      >
                        删除
                      </div>
                    </div>
                  </div>
                ) : (
                  <div></div>
                )}
              </div>
            </div>
          );
        }
      });
      state.tableData = data2;
    };
    getTableDate2();
    // 渲染开课操作
    const getTableDate3 = () => {
      let datas = state.tableData6;
      datas.map((value) => {
        {
          //单层项目
          value.operation = (
            <div class="operation">
              <div class="nSelect">
                <div class="nselect">
                  <div
                    class="jc"
                    onClick={() => {
                      state.QR_hs = true;
                      state.ftsQR_hs = true;
                    }}
                  >
                    签到
                  </div>
                  <div class="jc">编辑</div>
                  <div
                    class="jc"
                    onClick={() => {
                      state.sm_hs = true;
                    }}
                  >
                    管理
                  </div>
                  <div class="tableSelect">
                    <a-select
                      style="width: 50px;margin-top:2px;margin-left:25px"
                      value="更多"
                      // options={state.projectNameList}
                      dropdownClassName="tabledropdown"
                    >
                      <a-select-option
                        value="复制"
                        label="复制"
                        style="padding-left:35px"
                      >
                        <div
                          onClick={() => {
                            state.delete_hs = true;
                            state.copy_hs = true;
                          }}
                        >
                          复制
                        </div>
                      </a-select-option>
                      <a-select-option
                        value="删除"
                        label="删除"
                        style="padding-left:35px"
                      >
                        <div
                          onClick={() => {
                            state.delete_hs = true;
                            state.del_hs = true;
                          }}
                        >
                          删除
                        </div>
                      </a-select-option>
                      <a-select-option
                        value="QR"
                        label="QR"
                        style="padding-left:35px"
                      >
                        <div
                          onClick={() => {
                            state.QR_hs = true;
                            state.vipftQR_hs = true;
                          }}
                        >
                          二维码
                        </div>
                      </a-select-option>
                    </a-select>
                  </div>
                </div>
              </div>
            </div>
          );
        }
      });
      state.tableData = datas;
    };
    getTableDate3();
    //渲染学员管理结业状态
    const getTableDate4 = () => {
      let data2 = state.tableData7;
      data2.map((value) => {
        {
          //单层项目
          value.overstatus = (
            <div class="operation">
              <div class="nSelect">
                {value.status === "待审核" ? (
                  <div class="nselect">
                    <div class="ops2">
                      <div class="jc">-</div>
                    </div>
                  </div>
                ) : (
                  <div></div>
                )}
                {value.status === "已通过" ? (
                  <div class="nselect">
                    <div class="ops1">
                      <div
                        class="jc"
                        onClick={() => {
                          state.rg_hs = true;
                        }}
                      >
                        成功录入
                      </div>
                    </div>
                    <div class="ops1">
                      <div
                        class="jc"
                        onClick={() => {
                          state.graduate_hs = true;
                        }}
                      >
                        结业
                      </div>
                    </div>
                  </div>
                ) : (
                  <div></div>
                )}
                {value.status === "已拒绝" ? (
                  <div class="nselect">
                    <div class="ops2">
                      <div
                        class="jc"
                        onClick={() => {
                          state.delete_hs = true;
                          state.del_hs = true;
                        }}
                      >
                        删除
                      </div>
                    </div>
                  </div>
                ) : (
                  <div></div>
                )}
              </div>
            </div>
          );
        }
      });
      state.tableData = data2;
    };
    getTableDate4();
    //渲染列表是否停用
    const getTableDate5 = () => {
      let data2 = state.tableData1;
      data2.map((value) => {
        {
          //单层项目
          value.ynuse = (
            <div class="ynuse">
              <div class="nSelect">
                {value.status === "审核未通过" ? (
                  <div
                    class="use"
                    onClick={() => {
                      state.delete_hs = true;
                      state.nouse_hs = true;
                    }}
                  >
                    停用
                  </div>
                ) : (
                  <div></div>
                )}
                {value.status !== "审核未通过" ? (
                  <div class="use">启用</div>
                ) : (
                  <div></div>
                )}
              </div>
            </div>
          );
        }
      });
      state.tableData = data2;
    };
    getTableDate5();
    const options1 = ref([
      {
        value: "value1",
        label: "请选择状态",
      },
      {
        value: "uncommitted",
        label: "未提交",
      },
      {
        value: "tocheck",
        label: "待审核",
      },
      {
        value: "checked",
        label: "已审核",
      },
      {
        value: "uncheck",
        label: "审核未通过",
      },
    ]);
    const options2 = ref([
      {
        value: "value2",
        label: "请选择内容分类",
      },
      {
        value: "leadership",
        label: "领导力",
      },
      {
        value: "ingeneral",
        label: "通用力",
      },
      {
        value: "profession",
        label: "专业力",
      },
    ]);
    const of_hShow = () => {
      if (state.of_hs == false) {
        state.of_hs = true;
      }
    };
    const of_exit = () => {
      state.of_hs = false;
      state.valueE1 = "";
      state.valueE2 = "";
      state.hideshow = true;
    };
    const hideShow = () => {
      if (state.hideshow == true) {
        state.hideshow = false;
      } else {
        state.hideshow = true;
      }
    };
    const bs_hShow = (value) => {
      state.bs_hs = true;
      if (value != "") {
        state.valueE1 = "";
      }
    };
    const createft = () => {
      if (state.bs_hs == false) {
        state.of_hs = false;
        state.ft_hs = true;
        state.valueE1 = "";
      }
    };
    const ft_exit = () => {
      state.ft_hs = false;
      state.hideshow = true;
    };
    const om_exit = () => {
      state.om_1 = false;
      state.faceManageTab = "1";
    };
    const ckxq_hs = () => {
      state.om_ckxq = true;
    };
    const ftsr_exit = () => {
      state.om_ckxq = false;
    };
    const stm_exit = () => {
      state.stm_hs = false;
    };
    const createkk = () => {
      state.cstm_hs = true;
    };
    const cstm_exit = () => {
      state.cstm_hs = false;
      state.xjkkradioV1 = "";
      state.xjkkradioV2 = "";
      state.xjkkinputV1 = "";
      state.xjkkinputV2 = "";
      state.xjkkinputV3 = "";
      state.xjkkinputV4 = "";
    };
    const sm_exit = () => {
      state.sm_hs = false;
      state.hideshow = true;
    };
    const clear_valueE1 = () => {
      state.bs_hs = false;
      state.valueE1 = "";
    };
    const clear_valueE2 = () => {
      state.valueE2 = "";
    };
    const clear_xjkkradioV1 = (value) => {
      if (value != "") {
        state.xjkkradioV1 = "";
      }
    };
    const clear_xjkkradioV2 = (value) => {
      if (value != "") {
        state.xjkkradioV2 = "";
      }
    };
    const clear_jyradioV1 = (value) => {
      if (value != "") {
        state.jyradioV1 = "";
      }
    };
    const qr_exit = () => {
      state.QR_hs = false;
      state.qrQR_hs = false;
      state.olQR_hs = false;
      state.ftQR_hs = false;
      state.ftsQR_hs = false;
      state.vipftQR_hs = false;
    };
    const rg_exit = () => {
      state.rg_hs = false;
    };
    const graduate_exit = () => {
      state.graduate_hs = false;
    };
    const agreereject_exit = () => {
      state.agreereject_hs = false;
      state.agreestudy_hs = false;
      state.rejectstudy_hs = false;
    };
    const delete_exit = () => {
      state.delete_hs = false;
      state.del_hs = false;
      state.copy_hs = false;
      state.nouse_hs = false;
    };
    const onSelectChange = (selectedRowKeys) => {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      state.selectedRowKeys = selectedRowKeys;
    };

    const faceManageChange = (e) => {
      state.faceManageTab = e;
    };
    const key = "updatable";
    const openMessage = () => {
      message.loading({
        content: "Loading...",
        key,
      });
      setTimeout(() => {
        message.success({
          content: "导出成功",
          key,
          duration: 2,
        });
      }, 1000);
    };
    return {
      ...toRefs(state),
      columns1,
      columns2,
      columns4,
      columns6,
      columns7,
      options1,
      options2,
      of_hShow,
      of_exit,
      hideShow,
      bs_hShow,
      createft,
      ft_exit,
      om_exit,
      ckxq_hs,
      ftsr_exit,
      stm_exit,
      createkk,
      cstm_exit,
      sm_exit,
      clear_valueE1,
      clear_valueE2,
      clear_xjkkradioV1,
      clear_xjkkradioV2,
      clear_jyradioV1,
      qr_exit,
      rg_exit,
      graduate_exit,
      agreereject_exit,
      delete_exit,
      onSelectChange,
      faceManageChange,
      openMessage,
    };
  },
});
</script>
<style lang="scss">
.courseManage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  .headerf {
    .filter {
      margin-left: 38px;
      margin-right: 38px;
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .filterItems {
        display: flex;
        flex-wrap: wrap;
        .fitems {
          margin-right: 20px;
          margin-bottom: 20px;
        }
      }
    }
    .btns {
      display: flex;
      margin-left: 38px;
      .btn {
        padding: 0px 26px 0px 26px;
        height: 38px;
        background: rgba(64, 158, 255, 0);
        border-radius: 8px;
        border: 1px solid rgba(64, 158, 255, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 14px;
        flex-shrink: 0;
        cursor: pointer;
        .search {
          background-size: 100%;
        }
        .btnText {
          font-size: 14px;
          font-weight: 400;
          color: rgba(64, 158, 255, 1);
          line-height: 36px;
          margin-left: 5px;
        }
      }
      .btn1 {
        .search {
          width: 15px;
          height: 17px;
          background-image: url("../../assets/images/courseManage/search1.png");
        }
      }
      .btn2 {
        .search {
          width: 16px;
          height: 18px;
          background-image: url("../../assets/images/courseManage/reset1.png");
        }
      }
      .btn3 {
        .search {
          width: 17px;
          height: 18px;
          background-image: url("../../assets/images/coursewareManage/export.png");
        }
      }
      .btn4 {
        margin-right: 0px;
        .search {
          width: 17px;
          height: 18px;
          background-image: url("../../assets/images/courseManage/add1.png");
        }
      }
      .btn1:hover {
        background: rgba(64, 158, 255, 1);
        .search {
          background-image: url("../../assets/images/courseManage/search0.png");
        }
        .btnText {
          color: #ffffff;
        }
      }
      .btn2:hover {
        background: rgba(64, 158, 255, 1);
        .search {
          background-image: url("../../assets/images/courseManage/reset0.png");
        }
        .btnText {
          color: #ffffff;
        }
      }
      .btn3:hover {
        background: rgba(64, 158, 255, 1);
        .search {
          background-image: url("../../assets/images/coursewareManage/export1.png");
        }
        .btnText {
          color: #ffffff;
        }
      }
      .btn4:hover {
        background: rgba(64, 158, 255, 1);
        .search {
          background-image: url("../../assets/images/courseManage/add0.png");
        }
        .btnText {
          color: #ffffff;
        }
      }
    }
  }
  .tableBox {
    margin: 20px 38px 30px;
    .operation {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #4ea6ff;
      .nselect {
        justify-content: center;
        align-items: center;
        display: flex;
        .jc {
          margin-left: 20px;
          cursor: pointer;
        }
      }
      .tableSelect {
        // margin-right: 10px;
        margin-left: -5px;
        display: flex;
        align-items: center;
        justify-content: right;
      }
    }
    .ynuse {
      display: flex;
      justify-content: center;
      align-items: center;
      .use {
        cursor: pointer;
      }
    }
  }
}

.selectonlineface {
  z-index: 999;
  width: 679px;
  background: #ffffff;
  box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  .of_header {
    position: absolute;
    width: 100%;
    height: 40px;
    background: linear-gradient(
      rgba(78, 166, 255, 0.2) 0%,
      rgba(78, 166, 255, 0) 100%
    );
  }
  .of_main {
    width: 100%;
    position: relative;
    .ofm_header {
      display: flex;
      align-items: center;
      padding-top: 20px;
      padding-left: 26px;
      font-size: 16px;
      .add_icon {
        width: 16px;
        height: 16px;
        margin-right: 10px;
        background-image: url(@/assets/images/coursewareManage/add1.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%;
      }
    }
    .ofm_body {
      width: 80%;
      margin: 3px auto;
      .ofmb_items {
        display: flex;
        align-items: center;
        justify-content: end;
        margin: 14px auto;
        .signbox {
          width: 110px;
          display: flex;
          justify-content: end;
          .sign {
            width: 10px;
            height: 10px;
            margin-top: -3px;
            margin-right: 6px;
            background-size: 100% 100%;
          }
        }
        .b_input {
          flex: 1;
          position: relative;
          .inp_num {
            position: absolute;
            right: 10px;
            top: 10px;
          }
        }
        .bc_box {
          display: flex;
          width: 440px;
          flex: 1;
          .bc_boxl,
          .bc_boxr {
            display: flex;
            align-items: center;
          }
        }
      }
      .ol_checkbox {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 6px;
      }
      .b_sub {
        width: 440px;
        margin-left: 110px;
        .bs_header {
          display: flex;
          justify-content: space-between;
          .b_right {
            display: flex;
          }
        }
      }
      .bl_detail {
        top: 24px;
      }
      .b_footer {
        width: 100%;
        margin-left: 212px;
        margin-top: 25px;
        margin-bottom: 20px;
        display: flex;
        .btn {
          width: 100px;
          height: 40px;
          background: rgba(64, 158, 255, 0);
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 14px;
          flex-shrink: 0;
          cursor: pointer;
          .btnText {
            font-size: 14px;
            font-weight: 400;
            line-height: 40px;
          }
        }
        .btn5 {
          border: 1px solid rgba(64, 158, 255, 1);
          color: #4ea6ff;
        }
        .btn6 {
          background-color: #4ea6ff;
          color: #ffffff;
        }
      }
    }
  }
}

.createschooltime {
  z-index: 999;
  width: 679px;
  background: #ffffff;
  box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translate(-50%, -50%);
  .cst_header {
    position: absolute;
    width: 100%;
    height: 40px;
    background: linear-gradient(
      rgba(78, 166, 255, 0.2) 0%,
      rgba(78, 166, 255, 0) 100%
    );
  }
  .cst_main {
    width: 100%;
    position: relative;
    .cstm_header {
      display: flex;
      align-items: center;
      padding-top: 20px;
      padding-left: 26px;
      font-size: 16px;
      .add_icon {
        width: 16px;
        height: 16px;
        margin-right: 10px;
        background-image: url(@/assets/images/coursewareManage/add1.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%;
      }
    }
    .cstm_title {
      margin: 10px auto 20px 51px;
      font-weight: bold;
    }
    .cstm_items {
      display: flex;
      width: 80%;
      margin: auto;
      align-items: center;
      margin-bottom: 23px;
      .signbox {
        display: flex;
        justify-content: end;
        width: 100px;
        margin-right: 6px;
        .sign {
          margin-top: -5px;
          margin-right: 4px;
        }
      }
      .b_input {
        flex: 1;
        position: relative;
        .upload_box {
          display: flex;
          cursor: pointer;
          .upload_icon {
            width: 16px;
            height: 16px;
            margin-right: 5px;
          }
        }
        .inp_num {
          position: absolute;
          top: 9px;
          right: 10px;
        }
      }
    }
    .items_fj {
      margin-bottom: 1px;
    }
    .items_btn {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      margin-bottom: 20px;
      .cstm_btn {
        width: 100px;
        height: 40px;
        background: rgba(64, 158, 255, 0);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 14px;
        flex-shrink: 0;
        cursor: pointer;
        .btnText {
          font-size: 14px;
          font-weight: 400;
          line-height: 40px;
        }
      }
      .btn5 {
        border: 1px solid rgba(64, 158, 255, 1);
        color: #4ea6ff;
      }
      .btn6 {
        background-color: #4ea6ff;
        color: #ffffff;
      }
    }
  }
}
.QRModal {
  .ant-modal {
    .ant-modal-content {
      width: 479px !important;
      .ant-modal-body {
        .QR {
          z-index: 9999;
          width: 520px;
          background: #ffffff;
          box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
          position: absolute;
          left: 50%;
          top: 10%;
          transform: translate(-50%, -50%);
          .qr_header {
            position: absolute;
            width: calc(100%);
            height: 40px;
            background: linear-gradient(
              rgba(78, 166, 255, 0.2) 0%,
              rgba(78, 166, 255, 0) 100%
            );
          }
          .qr_main {
            width: 100%;
            position: relative;
            .qrm_header {
              display: flex;
              align-items: center;
              padding-top: 20px;
              padding-left: 26px;
              font-size: 16px;
              .qr_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%;
              }
            }
            .qrm_body {
              width: 100%;
              margin-top: 22px;
              margin-bottom: 32px;
              .QR_img {
                width: 176px;
                height: 176px;
                margin: 1px auto;
                background-image: url(@/assets/images/taskpage/QR.png);
                background-size: 100% 100%;
              }
            }
            .qrm_footer {
              display: flex;
              align-items: center;
              margin-bottom: 44px;
              .qrmbtn {
                width: 80px;
                height: 32px;
                display: flex;
                line-height: 32px;
                justify-content: center;
                border-radius: 4px;
                border: 1px solid #387df7;
                margin-left: 16px;
                cursor: pointer;
                .btntext {
                  color: #387df7;
                }
              }
            }
          }
        }
      }
    }
  }
}
.recgradeModal {
  .ant-modal {
    .ant-modal-content {
      // width:679px !important;
      .ant-modal-body {
        .recordgrade {
          z-index: 9999;
          width: 679px;
          background: #ffffff;
          box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
          position: absolute;
          left: 50%;
          top: 10%;
          transform: translate(-50%, -50%);
          .rg_header {
            position: absolute;
            width: calc(100%);
            height: 40px;
            background: linear-gradient(
              rgba(78, 166, 255, 0.2) 0%,
              rgba(78, 166, 255, 0) 100%
            );
          }
          .rg_main {
            width: 100%;
            position: relative;
            .rgm_header {
              display: flex;
              align-items: center;
              padding-top: 20px;
              padding-left: 26px;
              font-size: 16px;
              .rg_icon {
                width: 16px;
                height: 16px;
                margin-right: 10px;
                background-image: url(@/assets/images/coursewareManage/grade.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%;
              }
            }
            .rgm_body {
              width: 100%;
              .rgmb_items {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 80%;
                margin: 21px auto 10px auto;
                .items_left {
                  display: flex;
                  margin-right: 14px;
                  .sign {
                    margin-right: 7px;
                  }
                }
              }
            }
            .qrm_btnbox {
              display: flex;
              margin: 30px auto;
              justify-content: center;
              .qrm_btn {
                width: 100px;
                height: 40px;
                background: rgba(64, 158, 255, 0);
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 14px;
                flex-shrink: 0;
                cursor: pointer;
                .btnText {
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 40px;
                }
              }
              .btn1 {
                border: 1px solid rgba(64, 158, 255, 1);
                color: #4ea6ff;
              }
              .btn2 {
                background-color: #4ea6ff;
                color: #ffffff;
              }
            }
          }
        }
      }
    }
  }
}
.graModal {
  .ant-modal {
    .ant-modal-content {
      // width:679px !important;
      .ant-modal-body {
        .graduate {
          z-index: 9999;
          width: 679px;
          background: #ffffff;
          box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
          position: absolute;
          left: 50%;
          top: 10%;
          transform: translate(-50%, -50%);
          .gra_header {
            position: absolute;
            width: calc(100%);
            height: 40px;
            background: linear-gradient(
              rgba(78, 166, 255, 0.2) 0%,
              rgba(78, 166, 255, 0) 100%
            );
          }
          .gra_main {
            width: 100%;
            position: relative;
            .gram_header {
              display: flex;
              align-items: center;
              padding-top: 20px;
              padding-left: 26px;
              font-size: 16px;
              .gra_icon {
                width: 16px;
                height: 16px;
                margin-right: 10px;
                background-image: url(@/assets/images/coursewareManage/graduate.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%;
              }
            }
            .gram_body {
              width: 100%;
              .gramb_items {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 80%;
                margin: 21px auto 10px auto;
                .items_left {
                  display: flex;
                  margin-right: 14px;
                  .sign {
                    margin-right: 7px;
                  }
                }
              }
              .gramb_input {
                .bc_box {
                  display: flex;
                }
              }
            }
            .qrm_btnbox {
              display: flex;
              margin: 30px auto;
              justify-content: center;
              .qrm_btn {
                width: 100px;
                height: 40px;
                background: rgba(64, 158, 255, 0);
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 14px;
                flex-shrink: 0;
                cursor: pointer;
                .btnText {
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 40px;
                }
              }
              .btn1 {
                border: 1px solid rgba(64, 158, 255, 1);
                color: #4ea6ff;
              }
              .btn2 {
                background-color: #4ea6ff;
                color: #ffffff;
              }
            }
          }
        }
      }
    }
  }
}
.agrstudyModal {
  .ant-modal {
      width:429px !important;
      height:258px !important;
    .ant-modal-content {
      width:429px !important;
      height:258px !important;
      .ant-modal-body {
        width:429px !important;
        height:258px !important;
        padding:0px !important;
        .agreestudy {
          z-index: 9999;
          width: 429px;
          height:258px;
          background: #ffffff;
          box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
          .agree_header {
            position: absolute;
            width: 100%;
            height: 40px;
            background: linear-gradient(
              rgba(78, 166, 255, 0.2) 0%,
              rgba(78, 166, 255, 0) 100%
            );
          }
          .agree_main {
            width: 100%;
            position: relative;
            .agreem_header {
              display: flex;
              align-items: center;
              padding-top: 20px;
              padding-left: 26px;
              font-size: 16px;
              .agreem_icon {
                width: 16px;
                height: 16px;
                margin-right: 10px;
                background-image: url(@/assets/images/coursewareManage/notice.png);
                background-size: 100% 100%;
              }
              .close_exit {
                position: absolute;
                right: 42px;
                cursor: pointer;
                width: 20px;
                height: 20px;
                background-image: url(@/assets/images/coursewareManage/close.png);
                background-size: 100% 100%;
              }
            }
            .agreem_body {
              display: flex;
              justify-content: center;
              align-items: center;
                width: 100%;
                margin: 45px auto 62px auto;
            }
            .qrm_btnbox {
              display: flex;
              margin: 30px auto;
              justify-content: center;
              .qrm_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;
              }
            }
          }
        }
      }
    }
  }
}
.onlmanageModal {
  .ant-modal {
    .ant-modal-content {
      // width:1358px !important;
      .ant-modal-body {
        .modalHeader {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .headerLeft {
            margin-left: 27px;
            display: flex;
            align-items: center;
            .headerLeftText {
              font-size: 16px;
              font-weight: 400;
              color: #000000;
              line-height: 36px;
            }
          }
        }
        .onlinemanage {
          display: none;
          min-width: 1000px;
          background: #ffffff;
          .om_main {
            width: 100%;
            .om_body {
              margin-right: 50px;
              .b_title {
                color: #4f5156;
                font-weight: 500;
                margin-bottom: 19px;
              }
              .b_sub {
                display: flex;
                margin-bottom: 10px;
                .bs_type {
                  color: #999ba3;
                }
                .bs_left {
                  color: #999ba3;
                  margin-left: 35px;
                }
                .bs_right {
                  color: #4f5156;
                }
              }
              .b_menu {
                width: calc(100%);
              }
              .b_menunav {
                display: flex;
                margin-top: 20px;
                margin-bottom: 20px;
                .bm_select {
                  margin-right: 20px;
                }
                .bm_input {
                  margin-right: 20px;
                }
                .bm_btn {
                  display: flex;
                  cursor: pointer;
                  .btn {
                    padding: 0px 26px 0px 26px;
                    height: 40px;
                    background: rgba(64, 158, 255, 0);
                    border-radius: 8px;
                    border: 1px solid rgba(64, 158, 255, 1);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 14px;
                    flex-shrink: 0;
                    .search {
                      background-size: 100%;
                    }
                    .btnText {
                      font-size: 14px;
                      font-weight: 400;
                      color: rgba(64, 158, 255, 1);
                      line-height: 36px;
                      margin-left: 5px;
                    }
                  }
                  .btn1 {
                    .search {
                      width: 15px;
                      height: 17px;
                      background-image: url("@/assets/images/coursewareManage/search1.png");
                    }
                  }
                  .btn1:hover {
                    background: rgba(64, 158, 255, 1);
                    .search {
                      background-image: url("@/assets/images/coursewareManage/search0.png");
                    }
                    .btnText {
                      color: #ffffff;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
.facteachModal {
  .ant-modal {
    .ant-modal-content {
      // width:1358px !important;
      .ant-modal-body {
        .modalHeader {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .headerLeft {
            margin-left: 27px;
            display: flex;
            align-items: center;
            .headerLeftText {
              font-size: 16px;
              font-weight: 400;
              color: #000000;
              line-height: 36px;
            }
          }
        }
        .modalMain {
          .m_title {
            margin-bottom: 20px;
          }
          .m_body {
            display: flex;
            flex-wrap: wrap;
            .mb_left {
              width: 50%;
              .mbl_items {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                margin-bottom: 10px;
                .item_nam {
                  width: 100px;
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;
                  white-space: nowrap;
                  .asterisk_icon {
                    width: 10px;
                    height: 10px;
                    margin-right: 5px;
                    margin-top: -15px;
                  }
                }
                .item_inp {
                  flex: 1;
                  position: relative;
                  .inp_num {
                    position: absolute;
                    left: 398px;
                    top: 10px;
                  }
                }
              }
              .mbl_items2 {
                display: flex;
                align-items: start;
                margin-top: 10px;
                margin-bottom: 10px;
                .item_nam {
                  width: 100px;
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;
                  white-space: nowrap;
                  .asterisk_icon {
                    width: 10px;
                    height: 10px;
                    margin-right: 5px;
                    margin-top: -15px;
                  }
                }
                .item_inp {
                  flex: 1;
                  .i_upload {
                    width: 100px;
                    height: 100px;
                    border: 1px solid #4ea6ff;
                    border-radius: 8px;
                    text-align: center;
                    align-items: center;
                    margin-bottom: 5px;
                    cursor: pointer;
                    .addimg {
                      position: relative;
                      .heng {
                        position: absolute;
                        top: 50px;
                        left: 25px;
                        width: 50px;
                        border: 1px solid #4ea6ff;
                      }
                      .shu {
                        position: absolute;
                        top: 25px;
                        left: 50px;
                        height: 50px;
                        border: 1px solid #4ea6ff;
                      }
                    }
                  }
                }
              }
              .i2_cz {
                width: 440px;
                margin-left: 100px;
                .i2_top {
                  display: flex;
                  justify-content: space-between;
                }
              }
              .i8_bottom {
                display: flex;
                width: 440px;
                margin-left: 100px;
              }
            }
            .mb_right {
              width: 50%;
              .mbl_items {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                margin-bottom: 10px;
                .item_nam {
                  width: 100px;
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;
                  white-space: nowrap;
                  .asterisk_icon {
                    width: 10px;
                    height: 10px;
                    margin-top: -15px;
                    margin-right: 5px;
                  }
                }
                .item_inp {
                  flex: 1;
                }
                .accessory {
                  display: flex;
                  align-items: center;
                  .accessory_icon {
                    width: 16px;
                    height: 16px;
                    margin-top: -8px;
                    margin-right: 5px;
                  }
                }
              }
              .mbl_items2 {
                display: flex;
                align-items: start;
                margin-bottom: 10px;
                .item_nam {
                  width: 100px;
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;
                  white-space: nowrap;
                  .asterisk_icon {
                    width: 10px;
                    height: 10px;
                    margin-right: 5px;
                    margin-top: -15px;
                  }
                }
                .item_inp {
                  flex: 1;
                  position: relative;
                  .inp_num {
                    position: absolute;
                    left: 395px;
                    bottom: 10px;
                  }
                }
              }
              .mbl_items12 {
                width: 440px;
                margin-left: 100px;
                .i12_box1 {
                  display: flex;
                  align-items: center;
                  padding: 17px 0px 17px 21px;
                  border: 1px solid #eff4fc;
                  border-radius: 8px;
                  margin-bottom: 10px;
                  .file_img {
                    width: 27px;
                    height: 32px;
                    background-image: url(@/assets/images/coursewareManage/imgs.png);
                    margin-right: 22px;
                  }
                  .file_detail {
                    width: 250px;
                    margin-right: 21px;
                    .file_updata {
                      display: flex;
                      align-items: center;
                      .updatabox {
                        position: relative;
                        width: 230px;
                        height: 5px;
                        background-color: rgba(192, 192, 192, 0.25);
                        border-radius: 3px;
                        .updatacolor {
                          position: absolute;
                          left: 0;
                          width: 100%;
                          height: 5px;
                          background-color: #57c887;
                          border-radius: 3px;
                        }
                        .updatacolor2 {
                          position: absolute;
                          left: 0;
                          width: 80%;
                          height: 5px;
                          background-color: #ff7474;
                          border-radius: 3px;
                        }
                        .updatacolor3 {
                          position: absolute;
                          left: 0;
                          width: 60%;
                          height: 5px;
                          background-color: #388be1;
                          border-radius: 3px;
                        }
                        .updataxq {
                          position: absolute;
                          right: 2px;
                          top: -30px;
                          color: #57c887;
                        }
                        .updataxq2 {
                          position: absolute;
                          right: 2px;
                          top: -30px;
                          color: #ff7474;
                        }
                        .updataxq3 {
                          position: absolute;
                          right: 2px;
                          top: -30px;
                          color: #388be1;
                        }
                      }
                    }
                  }
                  .file_operation {
                    display: flex;
                    .fobox {
                      margin-right: 5px;
                      cursor: pointer;
                    }
                  }
                }
              }
            }
          }
          .m_footer {
            display: flex;
            margin: 20px 0;
            .fotnam {
              width: 100px;
              display: flex;
              justify-content: end;
              padding-right: 15px;
            }
            .fotarea {
              position: relative;
              .fuwenben {
                width: 90%;
                height: 20px;
                background-color: rgb(95, 95, 95);
                position: absolute;
                left: 50%;
                transform: translate(-50%, 0);
                top: 3px;
                z-index: 9999;
              }
            }
          }
          .m_btn {
            width: 100%;
            margin-top: 25px;
            margin-bottom: 20px;
            display: flex;
            justify-content: center;
            align-content: center;
            .btn {
              width: 100px;
              height: 40px;
              background: rgba(64, 158, 255, 0);
              border-radius: 8px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 14px;
              flex-shrink: 0;
              cursor: pointer;
              .btnText {
                font-size: 14px;
                font-weight: 400;
                line-height: 40px;
              }
            }
            .btn5 {
              border: 1px solid rgba(64, 158, 255, 1);
              color: #4ea6ff;
            }
            .btn6 {
              background-color: #4ea6ff;
              color: #ffffff;
            }
          }
        }
      }
    }
  }
}
.givpowerModal {
  .ant-modal {
    .ant-modal-content {
      // width:1358px !important;
      .ant-modal-body {
        .modalHeader {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .headerLeft {
            margin-left: 27px;
            display: flex;
            align-items: center;
            .headerLeftText {
              font-size: 16px;
              font-weight: 400;
              color: #000000;
              line-height: 36px;
            }
          }
        }
        .givepower {
          min-width: 1000px;
          background: #ffffff;
          .gp_main {
            width: 100%;
            position: relative;
            .gpm_inputbtn {
              width: 90%;
              margin: 20px auto;
              display: flex;
              .gpm_btn {
                width: 100px;
                height: 40px;
                margin-right: 14px;
                background: #ffffff;
                border: 1px solid #4ea6ff;
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                cursor: pointer;
                .btnText {
                  color: #4ea6ff;
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 40px;
                }
              }
              .btn1 {
                .search {
                  width: 15px;
                  height: 17px;
                  margin-right: 6px;
                  background-image: url("../../assets/images/courseManage/search1.png");
                }
              }
              .btn2 {
                .reset {
                  width: 16px;
                  height: 18px;
                  margin-right: 6px;
                  background-image: url("../../assets/images/courseManage/reset1.png");
                }
              }
              .btn1:hover {
                background: #4ea6ff;
                .search {
                  background-image: url("@/assets/images/coursewareManage/search0.png");
                }
                .btnText {
                  color: #ffffff;
                }
              }
              .btn2:hover {
                background: #4ea6ff;
                .reset {
                  background-image: url("@/assets/images/coursewareManage/reset0.png");
                }
                .btnText {
                  color: #ffffff;
                }
              }
            }
            .gpm_notice {
              display: flex;
              background: rgba(78, 166, 255, 0.25);
              border: 1px solid #4ea6ff;
              width: 90%;
              height: 62px;
              margin: 20px auto;
              align-items: center;
              line-height: 64px;
              .th_icon {
                width: 16px;
                height: 16px;
                background-image: url(@/assets/images/coursewareManage/gan.png);
                background-size: 100% 100%;
                margin: auto 13px auto 37px;
              }
              .textarea {
                margin-right: 33px;
              }
            }
            .gpm_table {
              width: 90%;
              margin: 30px auto;
              border: 1px solid #f0f4fe;
            }
          }
        }
      }
    }
  }
}
.schtimeModal {
  .ant-modal {
    .ant-modal-content {
      // width:1358px !important;
      .ant-modal-body {
        .modalHeader {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .headerLeft {
            margin-left: 27px;
            display: flex;
            align-items: center;
            .headerLeftText {
              font-size: 16px;
              font-weight: 400;
              color: #000000;
              line-height: 36px;
            }
          }
        }
        .schooltime {
          min-width: 1000px;
          background: #ffffff;
          .st_main {
            width: 100%;
            .stm_inputbtn {
              display: flex;
              width: 90%;
              margin: 20px auto;
              .stm_btn {
                width: 100px;
                height: 40px;
                margin-right: 14px;
                background: #ffffff;
                border: 1px solid #4ea6ff;
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                cursor: pointer;
                .btnText {
                  color: #4ea6ff;
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 40px;
                }
              }
              .btn1 {
                .search {
                  width: 15px;
                  height: 17px;
                  margin-right: 6px;
                  background-image: url("@/assets/images/coursewareManage/search1.png");
                }
              }
              .btn2 {
                .reset {
                  width: 16px;
                  height: 18px;
                  margin-right: 6px;
                  background-image: url("@/assets/images/coursewareManage/reset1.png");
                }
              }
              .btn1:hover {
                background: #4ea6ff;
                .search {
                  background-image: url("@/assets/images/coursewareManage/search0.png");
                }
                .btnText {
                  color: #ffffff;
                }
              }
              .btn2:hover {
                background: #4ea6ff;
                .reset {
                  background-image: url("@/assets/images/coursewareManage/reset0.png");
                }
                .btnText {
                  color: #ffffff;
                }
              }
            }
            .stm_btn3 {
              width: 130px;
              height: 40px;
              border: 1px solid #4ea6ff;
              background-color: #4ea6ff;
              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;
              }
              .btn3 {
                .add {
                  width: 17px;
                  height: 18px;
                  background-image: url("@/assets/images/coursewareManage/add0.png");
                  background-size: 100% 100%;
                  margin-right: 6px;
                }
              }
            }
            .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;
                  }
                }
              }
            }
            .stm_table {
              position: relative;
              padding-bottom: 80px;
              .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;
              }
              .operation {
                display: flex;
                justify-content: center;
                align-items: center;
                color: #4ea6ff;
                .nselect {
                  justify-content: center;
                  align-items: center;
                  display: flex;
                  .jc {
                    margin-left: 20px;
                    cursor: pointer;
                  }
                }
                .tableSelect {
                  // margin-right: 10px;
                  margin-left: -5px;
                  display: flex;
                  align-items: center;
                  justify-content: right;
                }
              }
              .pa {
                left: 0;
                width: 100%;
                // height: 20px;
                // background-color: red;
                display: flex;
                justify-content: center;
                position: absolute;
                bottom: 20px;
              }
            }
          }
        }
      }
    }
  }
}
.stusmanageModal {
  .ant-modal {
    .ant-modal-content {
      // width:1358px !important;
      .ant-modal-body {
        .modalHeader {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .headerLeft {
            margin-left: 27px;
            display: flex;
            align-items: center;
            .headerLeftText {
              font-size: 16px;
              font-weight: 400;
              color: #000000;
              line-height: 36px;
            }
          }
        }
        .studentsmanage {
          min-width: 1000px;
          background: #ffffff;
          .stm_main {
            width: 100%;
            .stmmitems {
              margin: auto 49px;
              .stmm_i1,
              .stmm_i2,
              .stmm_i3,
              .stmm_i4 {
                margin: 19px 0;
              }
              .stmm_i5 {
                display: flex;
                justify-content: space-between;
                .i5_left {
                  display: flex;
                  .stmm_btn {
                    width: 100px;
                    height: 40px;
                    margin-right: 14px;
                    background: #ffffff;
                    border: 1px solid #4ea6ff;
                    border-radius: 8px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;
                    cursor: pointer;
                    .btnText {
                      color: #4ea6ff;
                      font-size: 14px;
                      font-weight: 400;
                      line-height: 40px;
                    }
                  }
                  .btn1 {
                    .search {
                      width: 15px;
                      height: 17px;
                      margin-right: 6px;
                      background-image: url("../../assets/images/courseManage/search1.png");
                    }
                  }
                  .btn2 {
                    .reset {
                      width: 16px;
                      height: 18px;
                      margin-right: 6px;
                      background-image: url("../../assets/images/courseManage/reset1.png");
                    }
                  }
                  .btn1:hover {
                    background: rgba(64, 158, 255, 1);
                    .search {
                      background-image: url("../../assets/images/courseManage/search0.png");
                    }
                    .btnText {
                      color: #ffffff;
                    }
                  }
                  .btn2:hover {
                    background: rgba(64, 158, 255, 1);
                    .reset {
                      background-image: url("../../assets/images/courseManage/reset0.png");
                    }
                    .btnText {
                      color: #ffffff;
                    }
                  }
                }
                .i5_right {
                  display: flex;
                  .stmm_btn {
                    width: 100px;
                    height: 40px;
                    margin-right: 14px;
                    background: #ffffff;
                    border: 1px solid #4ea6ff;
                    border-radius: 8px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;
                    cursor: pointer;
                    .btnText {
                      color: #4ea6ff;
                      font-size: 14px;
                      font-weight: 400;
                      line-height: 40px;
                    }
                  }
                  .btn3 {
                    background-color: #4ea6ff;
                  }
                  .btn4 {
                    display: flex;
                    width: 130px;
                    flex-direction: column;
                    position: relative;
                    .btn4_sub {
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      .b_zk {
                        width: 10px;
                        height: 8px;
                        background-image: url("@/assets/images/coursewareManage/down.png");
                        background-size: 100% 100%;
                      }
                      .b_sq {
                        width: 10px;
                        height: 8px;
                        background-image: url("@/assets/images/coursewareManage/up.png");
                        background-size: 100% 100%;
                      }
                    }
                    .btn4_sup {
                      width: 100%;
                      background-color: #ffffff;
                      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
                      position: absolute;
                      top: 40px;
                      z-index: 999;
                      .btnsbox{
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        .btn4_tit {
                          margin: 10px auto;
                          white-space: nowrap;
                        }
                        .btn4_op1,
                        .btn4_op2,
                        .btn4_op3 {
                          margin-bottom:10px;
                          white-space: nowrap;
                        }
                      }
                    }
                  }
                  .btn5 {
                    margin-right: 0px;
                    .export {
                      width: 17px;
                      height: 18px;
                      margin-right: 5px;
                      background-image: url("@/assets/images/coursewareManage/export.png");
                    }
                  }
                  .btn5:hover {
                    background: #4ea6ff;
                    .export {
                      background-image: url("@/assets/images/coursewareManage/export1.png");
                    }
                    .btnText {
                      color: #ffffff;
                    }
                  }
                }
              }
              .stmm_i6 {
                position: relative;
                padding-top: 15px;
                padding-bottom: 80px;
                .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;
                }
                .operation,
                .nselect {
                  display: flex;
                  justify-content: center;
                  color: #4ea6ff;
                  font-size: 14px;
                  .ops1,
                  .ops2 {
                    margin-right: 10px;
                    cursor: pointer;
                  }
                }
                .pa {
                  left: 0;
                  width: 100%;
                  // height: 20px;
                  // background-color: red;
                  display: flex;
                  justify-content: center;
                  position: absolute;
                  bottom: 20px;
                }
              }
            }
          }
        }
      }
    }
  }
}
.coursewareDetail {
  .ant-modal {
    height: 320px;
    margin-top: 100px;
    .ant-modal-content {
      // width:1358px !important;
      .ant-modal-body {
        .modalHeader {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .headerLeft {
            margin-left: 27px;
            display: flex;
            align-items: center;
            .headerLeftText {
              font-size: 16px;
              font-weight: 400;
              color: #000000;
              line-height: 36px;
            }
          }
        }
        .modalMain {
          .ftsturecord {
            min-width: 1000px;
            background: #ffffff;
            .ftsr_main {
              width: 100%;
              .ftsr_table {
                width: 90%;
                margin: 30px auto;
                border: 1px solid #f0f4fe;
              }
              .ftsr_btn {
                width: 100px;
                height: 40px;
                background: #ffffff;
                border: 1px solid #4ea6ff;
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 30px auto;
                flex-shrink: 0;
                cursor: pointer;
                .btnText {
                  color: #4ea6ff;
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 40px;
                }
              }
            }
          }
        }
      }
    }
  }
}
.DelModal {
  .ant-modal {
    .ant-modal-content {
      width: 424px !important;
      .ant-modal-body {
        .delete {
          width: 424px;
          background: #ffffff;
          box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
          border-radius: 4px;
          position: absolute;
          left: 50%;
          top: 10%;
          transform: translate(-50%, -50%);
          .del_header {
            position: absolute;
            width: calc(100%);
            height: 40px;
            background: linear-gradient(
              rgba(78, 166, 255, 0.2) 0%,
              rgba(78, 166, 255, 0) 100%
            );
          }
          .del_main {
            width: 100%;
            position: relative;
            .header {
              display: flex;
              align-items: center;
              padding-top: 20px;
              padding-left: 26px;
              font-size: 16px;
              .del-icons {
                width: 16px;
                height: 16px;
                position: relative;
                margin-right: 10px;
                img {
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  top: 0px;
                  left: 0px;
                  background-size: 100% 100%;
                }
              }
              .close_exit {
                position: absolute;
                right: 42px;
                cursor: pointer;
                width: 20px;
                height: 20px;
                background-image: url(@/assets/images/coursewareManage/close.png);
                background-size: 100% 100%;
              }
            }
            .body {
              width: 100%;
              margin: 34px auto 56px auto;
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .del_btnbox {
              display: flex;
              margin: 30px auto;
              justify-content: center;
              .del_btn {
                width: 100px;
                height: 40px;
                background: rgba(64, 158, 255, 0);
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 14px;
                flex-shrink: 0;
                cursor: pointer;
                .btnText {
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 40px;
                }
              }
              .btn1 {
                border: 1px solid rgba(64, 158, 255, 1);
                color: #4ea6ff;
              }
              .btn2 {
                background-color: #4ea6ff;
                color: #ffffff;
              }
            }
          }
        }
      }
    }
  }
}
</style>
