<!-- 课件管理页面 -->
<template>
  <div class="courseManage">
    <div class="headerf">
      <!-- 搜索框及按钮 -->
      <div class="filter">
        <div class="filterItems">
          <div class="fi_input fitems">
            <a-input
              v-model:value="value"
              style="width: 270px; height: 40px; border-radius: 8px"
              placeholder="请输入项目名称"
            />
          </div>
          <div class="fi_input fitems">
            <a-input
              v-model:value="value"
              style="width: 270px; height: 40px; border-radius: 8px"
              placeholder="请输入名称"
            />
          </div>
          <div class="fi_input fitems">
            <a-input
              v-model:value="value"
              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="value2"
              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">导出</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" style="margin-top: 400px">
      <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="value"
                  maxlength="20"
                  style="width: 440px; height: 40px; border-radius: 8px"
                  placeholder="请输入课程名称"
                />
              </div>
              <!-- <div class="showcount">{{ valueE.length }}/20</div> -->
            </div>
            <div class="b_sub">
              <div class="bs_header">
                <div class="b_left">课程命名规则</div>
                <div class="b_right" @click="hideShow">
                  <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="onftvalue">
                <div class="bc_box">
                  <div class="bc_boxl" @click="bs_hShow">
                    <div class="ol_checkbox">
                      <a-radio v-model:checked="checked" :value="1">线上</a-radio>
                    </div>
                  </div>
                  <div class="bc_boxr" @click="clear_valueE">
                    <div class="ol_checkbox">
                      <a-radio v-model:checked="checked" :value="2">面授</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="valueE">
                  <div class="bc_box">
                    <div class="ol_checkbox">
                      <a-radio v-model:checked="checked" :value="3">是</a-radio>
                    </div>
                    <div class="ol_checkbox">
                      <a-radio v-model:checked="checked" :valueA="4">否</a-radio>
                    </div>
                  </div>
                </a-radio-group>
              </div>
            </div>
            <div class="b_footer">
              <div class="btn btn5">
                <div class="btnText">取消</div>
              </div>
              <div class="btn btn6">
                <div class="btnText" @click="createft">确定</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 新建选择线上还是面授课弹窗 -->
    <!-- 确定新建面授课弹窗 -->
    <div class="faceteach" :style="{ display: ft_hs ? 'block' : 'none' }">
      <div class="ft_main">
        <div
          style="
            width: 130px;
            height: 40px;
            background: #388be1;
            border-radius: 8px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
          "
          @click="showModal"
        >
        </div>
        <a-modal
          v-model:visible="ft_hs"
          title="Title"
          @ok="closeModal"
          :footer="null"
          :closable="false"
          wrapClassName="modalStyle"
          width="80%"
        >
            <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="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="value"
                          style="width: 440px; height: 40px; border-radius: 8px"
                          placeholder="请输入课程名称"
                        />
                      </div>
                    </div>
                  </div>
                  <div class="i2_cz">
                    <div class="i2_top">
                      <div class="i2_left">课程命名规则</div>
                      <div class="i2_right" @click="hideShow">
                        <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_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="i3_upload">
                          <a-upload
                            v-model:file-list="fileList"
                            name="avatar"
                            list-type="picture-card"
                            class="avatar-uploader"
                            :show-upload-list="false"
                            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                            :before-upload="beforeUpload"
                            @change="handleChange"
                          >
                            <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                            <div v-else>
                              <loading-outlined v-if="loading"></loading-outlined>
                              <plus-outlined v-else></plus-outlined>
                              <div class="ant-upload-text">Upload</div>
                            </div>
                          </a-upload>
                        </div>
                        <div class="i3_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="value"
                          style="width: 440px; height: 40px; border-radius: 8px"
                          placeholder="请输入目标人群"
                        />
                      </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="value"
                          style="width: 440px; height: 40px; border-radius: 8px"
                          placeholder="请输入课程价值"
                        />
                      </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="value"
                          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="value"
                          style="width: 440px; height: 40px; border-radius: 8px"
                          placeholder="请输入"
                        />
                      </div>
                    </div>
                    
                  </div>
                  <div class="mbl_items">
                    <div class="item_nam">
                      <span style="margin-right: 14px">课程简介</span>
                    </div>
                    <div class="item_inp">
                      <div class="i10_textarea">
                        <a-textarea
                          v-model:value="value"
                          style="width: 440px; height: 100px; border-radius: 8px"
                          placeholder="请输入"
                        />
                      </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">
                          <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"><span style="color: #4EA6FF;">删除</span></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"><span style="color: #4EA6FF;">删除</span></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"><span style="color: #4EA6FF;margin-right:5px;">重传</span><span style="color: #4EA6FF;">取消</span></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>
                      </div>
                      <div class="file_operation"><span style="color: #4EA6FF;margin-right:5px;">暂停</span><span style="color: #4EA6FF;">取消</span></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </a-modal>
      </div>
    </div>
    <!-- 确定新建面授课弹窗 -->
    <!-- 表格 -->
    <div class="tableBox">
      <!-- <a-table
        :columns="tableDataFunc()"
        :data-source="tableData"
        :loading="tableDataTotal === -1 ? true : false"
        :scroll="{ x: 600 }"
        expandRowByClick="true"
        @expand="expandTable"
        :pagination="false"
      /> -->
      <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"
      width="80%"
    >
        <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="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>
                    <div class="b_menu">
                      <a-menu v-model:selectedKeys="current" mode="horizontal">
                        <a-menu-item key="mail"> 报名管理 </a-menu-item>
                        <a-menu-item key="sub2"> 学习记录 </a-menu-item>
                        <a-menu-item key="sub3"> 资源完成情况 </a-menu-item>
                      </a-menu>
                    </div>
                    <div class="b_menunav">
                      <div class="bm_select">
                        <a-select
                          class="select"
                          ref="select"
                          placeholder="请选择状态"
                          v-model:value="value"
                          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="value"
                          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>
                  </div>
                </div>
          </div>
        </div>
    </a-modal>
    <!-- 操作管理在线课程管理页面 -->
    <!-- 操作管理面授课程管理页面 -->
    <a-modal
      v-model:visible="ftm_1"
      title="Title"
      @ok="closeModal"
      :footer="null"
      :closable="false"
      wrapClassName="modalStyle"
      width="80%"
    >
        <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="ftm_exit"
              style="width: 22px; height: 22px"
              src="../../assets/images/basicinfo/close22.png"
            />
          </div>
        </div>
        <div class="modalMain">
          <div class="faceteachmanage" :style="{ display: ftm_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>
                <div class="b_menu">
                  <a-menu v-model:selectedKeys="current" mode="horizontal">
                    <a-menu-item key="mail"> 报名管理 </a-menu-item>
                    <a-menu-item key="sub2"> 学习记录 </a-menu-item>
                  </a-menu>
                </div>
                <div class="b_menunav">
                  <div class="bm_select">
                    <a-select
                      class="select"
                      ref="select"
                      placeholder="请选择状态"
                      v-model:value="value"
                      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="value"
                      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>
              </div>
            </div>
          </div>
        </div>
    </a-modal>
    <!-- 操作管理面授课程管理页面 -->
    <!-- 操作管理面授课程管理查看详情页面 -->
    <a-modal
      v-model:visible="om_ckxq"
      title="Title"
      @ok="closeModal"
      :footer="null"
      :closable="false"
      wrapClassName="modalStyle"
      width="80%"
    >
        <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="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="gpm_hs"
      title="Title"
      @ok="closeModal"
      :footer="null"
      :closable="false"
      wrapClassName="modalStyle"
      width="80%"
    >
        <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="gpm_exit"
              style="width: 22px; height: 22px"
              src="../../assets/images/basicinfo/close22.png"
            />
          </div>
        </div>
        <div class="modalMain">
          <div class="givepower" :style="{ display: gpm_hs ? 'block' : 'none' }">
            <div class="gp_main">
              <div class="gpm_inputbtn">
                <a-input
                v-model:value="value"
                  style="
                    width: 270px;
                    height: 40px;
                    border-radius: 8px;
                    margin-right: 14px;
                  "
                  placeholder="请输入姓名"
                />
                <div class="gpm_btn btn1">
                  <div class="search"></div>
                  <div class="btnText">搜索</div>
                </div>
                <div class="gpm_btn btn2">
                  <div class="reset"></div>
                  <div class="btnText">重置</div>
                </div>
              </div>
              <div class="gpm_notice">
                <div class="th_icon"></div>
                <div class="textarea">
                  已选择 <span style="color: #4ea6ff">1</span> 项
                </div>
                <div class="textarea">
                  <span style="color: #999ba3">列表选项总计：</span><span>5条</span>
                </div>
              </div>
              <div class="gpm_table">
                <a-table
                  :columns="columns5"
                  :data-source="tableData5"
                  :loading="tableDataTotal === -1 ? true : false"
                  :pagination="{
                    showSizeChanger: true,
                    showQuickJumper: true,
                    hideOnSinglePage: true,
                    pageSizeOptions: [],
                    pageSize: pageSize,
                    current: currentPage,
                    total: tableDataTotal,
                    onChange: (page, pageSize) => {
                      currentPage = page;
                      // console.log('page', page)
                      // 加翻页查找代码
                      // 	this.setState({
                      // 		currentPage: page,
                      // 	}, () => {
                      // 		this.getMilitaryDeployment()
                      // 	})
                    },
                  }"
                >
                  <template #bodyCell="{ column }">
                    <template v-if="column.key === 'opacation'">
                      <a>取消授权</a>
                    </template>
                  </template>
                </a-table>
              </div>
            </div>
          </div>
        </div>
      </a-modal>
    <!--操作授权页面 -->
    <!--开课页面 -->
    <a-modal
      v-model:visible="stm_hs"
      title="Title"
      @ok="closeModal"
      :footer="null"
      :closable="false"
      wrapClassName="modalStyle"
      width="80%"
    >
        <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="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="value"
                  style="
                    width: 270px;
                    height: 40px;
                    border-radius: 8px;
                    margin-right: 14px;
                  "
                  placeholder="请输入创建人"
                />
                <a-input
                  v-model:value="value"
                  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="stm_table">
                <a-table
                  :columns="columns6"
                  :data-source="tableData6"
                  :loading="tableDataTotal === -1 ? true : false"
                  :scroll="{ x: 700, y: 800 }"
                  expandRowByClick="true"
                  @expand="expandTable"
                  :pagination="{
                    showSizeChanger: true,
                    showQuickJumper: true,
                    hideOnSinglePage: true,
                    pageSizeOptions: [],
                    pageSize: pageSize,
                    current: currentPage,
                    total: tableDataTotal,
                    onChange: (page, pageSize) => {
                      currentPage = page;
                      // console.log('page', page)
                      // 加翻页查找代码
                      // 	this.setState({
                      // 		currentPage: page,
                      // 	}, () => {
                      // 		this.getMilitaryDeployment()
                      // 	})
                    },
                  }"
                />
              </div>
            </div>
          </div>
        </div>
    </a-modal>
    <!--开课页面 -->
    <!--新建开课页面 -->
    <a-modal v-model:visible="cstm_hs" style="margin-top: 400px">
      <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="value"
                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="value"
                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="select fitems">
              <a-range-picker
                style="width: 440px; height: 40px; border-radius: 8px"
                v-model:value="value2"
                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="value"
                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-checkbox v-model:checked="checked">
                  <span style="color: #6d7584; margin-right: 30px">是否允许未报名的学员签到</span>
                </a-checkbox>
                <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-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-checkbox v-model:checked="checked">
                  <span style="color: #6d7584; margin-right: 30px">报名即完成</span>
                </a-checkbox>
                <a-checkbox v-model:checked="checked">
                  <span style="color: #6d7584; margin-right: 30px">签到即完成</span>
                </a-checkbox>
                <a-checkbox v-model:checked="checked">
                  <span style="color: #6d7584">请假算完成</span>
                </a-checkbox>
              </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">取消</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"
      width="80%"
    >
        <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="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="value"
                      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="btn4_tit">
                          <span style="color: #4ea6ff">批量录入成绩</span>
                        </div>
                        <div class="btn4_op1">
                          <span style="margin: 10px auto">批量结业</span>
                        </div>
                        <div class="btn4_op2">
                          <span style="margin: 10px auto">批量通过</span>
                        </div>
                        <div class="btn4_op3">
                          <span style="margin: 10px auto">批量拒绝</span>
                        </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="{
                      showSizeChanger: true,
                      showQuickJumper: true,
                      hideOnSinglePage: true,
                      pageSizeOptions: [],
                      pageSize: pageSize,
                      current: currentPage,
                      total: tableDataTotal,
                      onChange: (page, pageSize) => {
                        currentPage = page;
                        // console.log('page', page)
                        // 加翻页查找代码
                        // 	this.setState({
                        // 		currentPage: page,
                        // 	}, () => {
                        // 		this.getMilitaryDeployment()
                        // 	})
                      },
                    }"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
    </a-modal>
    <!--新建开课学员管理页面页面 -->
  </div>
</template>
<script>
import { reactive, toRefs, defineComponent, ref } from "vue";
import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
}
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 columns5 = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
    width: "18%",
    align: "center",
  },
  {
    title: "归属组织",
    dataIndex: "organization",
    key: "organization",
    width: "18%",
    align: "center",
  },
  {
    title: "岗位",
    dataIndex: "position",
    key: "position",
    width: "18%",
    align: "center",
  },
  {
    title: "拥有权限",
    dataIndex: "authority",
    key: "authority",
    width: "18%",
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "opacation",
    key: "opacation",
    width: "30%",
    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: {
    LoadingOutlined,
    PlusOutlined,
  },
  setup() {
    const current = ref(["mail"]);
    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",
          ynuse: "启用",
          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",
          ynuse: "启用",
          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",
          ynuse: "启用",
          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",
          ynuse: "停用",
          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",
          ynuse: "启用",
          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",
          ynuse: "启用",
          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: "已通过",
        },
      ],
      tableData5: [
        {
          key: 1,
          name: "李明",
          organization: "-",
          position: "产品经理",
          authority: "归属权",
        },
        {
          key: 2,
          name: "李洋",
          organization: "-",
          position: "产品经理",
          authority: "查看权",
        },
        {
          key: 3,
          name: "小李",
          organization: "-",
          position: "产品经理",
          authority: "管理权",
        },
        {
          key: 4,
          name: "雄安名",
          organization: "-",
          position: "产品经理",
          authority: "管理权",
        },
        {
          key: 5,
          name: "王哥",
          organization: "-",
          position: "产品经理",
          authority: "管理权",
        },
      ],
      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: "-",
          operation: "2022-07-20 9:30",
        },
        {
          key: "2",
          num: 2,
          name: "李梦",
          number: "1001",
          department: "智慧医工",
          postion: "产品经理",
          band: "Band10",
          status: "已通过",
          join: "手动加入",
          signstatus: "已签到",
          evastatus: "已评估",
          overstatus: "-",
          operation: "2022-07-20 9:30",
        },
        {
          key: "3",
          num: 3,
          name: "李梦",
          number: "1002",
          department: "业务支援",
          postion: "产品经理",
          band: "Band10",
          status: "已拒绝",
          join: "手动加入",
          signstatus: "-",
          evastatus: "-",
          overstatus: "-",
          operation: "2022-07-20 9:30",
        },
        {
          key: "4",
          num: 4,
          name: "李梦",
          number: "1003",
          department: "业务支援",
          postion: "产品经理",
          band: "Band9",
          status: "已通过",
          join: "报名加入",
          signstatus: "已签到",
          evastatus: "-",
          overstatus: "90/已结业",
          operation: "2022-07-20 9:30",
        },
        {
          key: "5",
          num: 5,
          name: "李梦",
          number: "1004",
          department: "业务支援",
          postion: "产品经理",
          band: "Band9",
          status: "已通过",
          join: "报名加入",
          signstatus: "请假",
          evastatus: "-",
          overstatus: "",
          operation: "2022-07-20 9:30",
        },
      ],
      currentPage: 1,
      tableDataTotal: 100,
      pageSize: 10,
      of_hs: false,
      hideshow: true,
      bs_hs: true,
      ft_hs:false,
      om_1: false,
      ftm_1: false,
      om_ckxq: false,
      gpm_hs: false,
      stm_hs: false,
      cstm_hs: false,
      sm_hs: false,
      value:"",
      valueE:"",
    });
    // const tableDataFunc = () => {
    //   const columns = [
    //     {
    //     title: '序号',
    //     width: 200,
    //     dataIndex: 'num',
    //     key: 'num',
    //     align: "center",
    //   }, {
    //     title: '名称',
    //     width: 200,
    //     dataIndex: 'name',
    //     key: 'name',
    //   }, {
    //     title: '内容分类',
    //     width: 200,
    //     dataIndex: 'content',
    //     key: '1',
    //     align: "center",
    //   }, {
    //     title: '课程形式',
    //     width: 200,
    //     dataIndex: 'courseform',
    //     key: '2',
    //     align: "center",
    //   }, {
    //     title: ' 所属项目',
    //     width: 300,
    //     dataIndex: 'project',
    //     key: '3',
    //     align: "center",
    //   }, {
    //     title: '学习人数',
    //     width: 200,
    //     dataIndex: 'stunum',
    //     key: '4',
    //     align: "center",
    //   }, {
    //     title: '评分',
    //     width: 200,
    //     dataIndex: 'grade',
    //     key: '5',
    //     align: "center",
    //   }, {
    //     title: '状态',
    //     width: 200,
    //     dataIndex: 'status',
    //     key: '6',
    //     align: "center",
    //   }, {
    //     title: '是否发布',
    //     width: 200,
    //     dataIndex: 'ynpub',
    //     key: '7',
    //     align: "center",
    //   }, {
    //     title: '创建人',
    //     width: 200,
    //     dataIndex: 'creator',
    //     key: '8',
    //     align: "center",
    //   }, {
    //     title: '创建时间',
    //     width: 280,
    //     dataIndex: 'createtime',
    //     key: '9',
    //     align: "center",
    //   }, {
    //     title: '上线时间',
    //     width: 280,
    //     dataIndex: 'pubtime',
    //     key: '10',
    //     align: "center",
    //   }, {
    //     title: '是否停用',
    //     width: 200,
    //     key: 'either',
    //     dataIndex: 'ynuse',
    //     align: "center",
    //   }, {
    //     title: '操作',
    //     width: 400,
    //     className: "h",
    //     dataIndex: "opacation",
    //     key: 'operation',
    //     fixed: 'right',
    //     align: "center",
    //     scopedSlots: { customRender: "action" },
    //     customRender: (text) => {
    //       // console.log('111',text);
    //         return (
    //           <div class="op_box">
    //             <div class="opacation">
    //               <span class={text.record.courseform === '面授' ? "activecls" : "errorCls"} style={{ "margin-left": "25px" }} >开课</span>
    //               <span class={text.record.ynuse === '停用' ? "activecls" : "errorCls"} style={{ "margin-left": "25px" }} >停用</span>
    //               <span class={text.record.status === '未提交' || text.record.status === '审核未通过' ? "activecls" : "errorCls"} style={{ "margin-left": "25px" }} >编辑</span>
    //               <span onClick={() => {}} class={text.record.status === '已审核' ? "activecls" : "errorCls"} style={{ "margin-left": "25px" }} >管理</span>
    //               <span class={text.record.status === '待审核' ?  "errorCls" : "activecls"} style={{ "margin-left": "25px" }} >复制</span>
    //               <span style={{ "margin-left": "25px" }} class="more">
    //                 <span>授权</span>
    //                 <div class="moreArrow"></div>
    //                 <div class="moreItems">
    //                   <span style="color:#4EA6FF;">权限名单</span>
    //                   <div class="mitems1">归属权</div>
    //                   <div class="mitems2">管理权</div>
    //                   <div class="mitems3">查看权</div>
    //                 </div>
    //               </span>
    //               <span
    //                 style={{ "margin-left": "21px", "margin-right": "30px" }}
    //                 class="more"
    //               >
    //                 <span>更多</span>
    //                 <div class="moreArrow"></div>
    //                 <div class="moreItems"></div>
    //               </span>
    //             </div>
    //           </div>
    //           );
    //       },
    //     },
    //   ];
    //   return columns;
    // };
    const fileList = ref([]);
    const loading = ref(false);
    const imageUrl = ref("");
    const handleChange = (info) => {
      if (info.file.status === "uploading") {
        loading.value = true;
        return;
      }
      if (info.file.status === "done") {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (base64Url) => {
          imageUrl.value = base64Url;
          loading.value = false;
        });
      }
      if (info.file.status === "error") {
        loading.value = false;
        message.error("upload error");
      }
    };
    const beforeUpload = (file) => {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        message.error("You can only upload JPG file!");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        message.error("Image must smaller than 2MB!");
      }
      return isJpgOrPng && isLt2M;
    };
    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;
                          } else if (value.courseform === "面授") {
                            state.ftm_1 = true;
                          }
                        }}
                      >
                        管理
                      </div>
                    </div>
                    <div class="ops3">
                      <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.gpm_hs = true;
                              }}
                            >
                              权限名单
                            </div>
                          </a-select-option>
                          <a-select-option value="归属权" label="归属权">
                            <div
                              onClick={() => {
                                console.log("点击了");
                              }}
                            >
                              归属权
                            </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>复制</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.gpm_hs = true;
                              }}
                            >
                              权限名单
                            </div>
                          </a-select-option>
                          <a-select-option value="归属权" label="归属权">
                            <div
                              onClick={() => {
                                console.log("点击了");
                              }}
                            >
                              归属权
                            </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" 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" 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.gpm_hs = true;
                              }}
                            >
                              权限名单
                            </div>
                          </a-select-option>
                          <a-select-option value="归属权" label="归属权">
                            <div
                              onClick={() => {
                                console.log("点击了");
                              }}
                            >
                              归属权
                            </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>
                )}
              </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">通过</div>
                    </div>
                    <div class="ops1">
                      <div class="jc">拒绝</div>
                    </div>
                    <div class="ops2">
                      <div class="jc">删除</div>
                    </div>
                  </div>
                ) : (
                  <div></div>
                )}
                {value.status === "已通过" ? (
                  <div class="nselect">
                    <div class="ops2">
                      <div class="jc">删除</div>
                    </div>
                  </div>
                ) : (
                  <div></div>
                )}
                {value.status === "已拒绝" ? (
                  <div class="nselect">
                    <div class="ops2">
                      <div class="jc">删除</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">签到</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>复制</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>
          );
        }
      });
      state.tableData = datas;
    };
    getTableDate3();
    const onftvalue = ref();
    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;
    };
    const hideShow = () => {
      if (state.hideshow == true) {
        state.hideshow = false;
      } else {
        state.hideshow = true;
      }
    };
    const bs_hShow = () => {
      state.bs_hs = true;
    };
    const createft = () => {
      if (state.bs_hs == false) {
        state.of_hs = false;
        state.ft_hs = true;
      }
    };
    const ft_exit = () => {
      state.ft_hs = false;
    };
    const om_exit = () => {
      state.om_1 = false;
    };
    const ftm_exit = () => {
      state.ftm_1 = false;
    };
    const ckxq_hs = () => {
      state.om_ckxq = true;
    };
    const ftsr_exit = () => {
      state.om_ckxq = false;
    };
    const gpm_exit = () => {
      state.gpm_hs = false;
    };
    const stm_exit = () => {
      state.stm_hs = false;
    };
    const createkk = () => {
      state.cstm_hs = true;
    };
    const cstm_exit = () => {
      state.cstm_hs = false;
    };
    const sm_exit = () => {
      state.sm_hs = false;
    };
    const clear_valueE = () => {
      state.bs_hs = false;
      state.valueE = "";
    }
    return {
      onftvalue,
      current,
      ...toRefs(state),
      fileList,
      loading,
      imageUrl,
      columns1,
      columns2,
      columns4,
      columns5,
      columns6,
      columns7,
      // tableDataFunc,
      handleChange,
      beforeUpload,
      getTableDate,
      getTableDate2,
      options1,
      options2,
      of_hShow,
      of_exit,
      hideShow,
      bs_hShow,
      createft,
      ft_exit,
      om_exit,
      ftm_exit,
      ckxq_hs,
      ftsr_exit,
      gpm_exit,
      stm_exit,
      createkk,
      cstm_exit,
      sm_exit,
      clear_valueE,
    };
  },
});
</script>
<style lang="scss">
// .dropdown-style{
//   .ant-select-dropdown-menu{
//     background: #6767bd;
//   }
//   .ant-select-dropdown-menu-item {
//     color: #4EA6FF !important;
// }
// }
.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;
      // flex-wrap: wrap;
      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;
        .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/courseManage/add1.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/courseManage/add0.png");
        }
        .btnText {
          color: #ffffff;
        }
      }
      .btn4:hover {
        background: rgba(64, 158, 255, 1);
        .search {
          background-image: url("../../assets/images/courseManage/add0.png");
        }
        .btnText {
          color: #ffffff;
        }
      }
    }
  }
  .faceteach {
    z-index: 999;
    width: 90%;
    min-width: 1000px;
    background: #ffffff;
    box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
    .ft_main {
      width: calc(100%);
      position: relative;
    }
  }
  .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;
      }
    }
  }
}

.modalStyle {
  .ant-modal{
    .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;
        .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;
              .asterisk_icon{
                width: 10px;
                height: 10px;
                margin-right: 5px;
                margin-top:-15px;
              }
            }
            .item_inp{
              flex:1;
            }
          }
            .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;
              .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_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-color: red;
                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;
                  
                  span{
                    cursor: pointer;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
.selectonlineface {
    z-index: 999;
    width: 679px;
    // height: 525px;
    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: calc(100%);
      height: 40px;
      background: linear-gradient(
        rgba(78, 166, 255, 0.2) 0%,
        rgba(78, 166, 255, 0) 100%
      );
    }
    .of_main {
      width: calc(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;
          }
          .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: calc(100%);
      height: 40px;
      background: linear-gradient(
        rgba(78, 166, 255, 0.2) 0%,
        rgba(78, 166, 255, 0) 100%
      );
    }
    .cst_main {
      width: calc(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;
          .upload_box {
            display: flex;
            cursor: pointer;
            .upload_icon {
              width: 16px;
              height: 16px;
              margin-right: 5px;
            }
          }
        }
      }
      .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;
        }
      }
    }
}
.modalStyle {
  .ant-modal{
    .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{
      .onlinemanage,
      .faceteachmanage {
        display: none;
        z-index: 999;
        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;
                .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;
                  }
                }
              }
            }
          }
        }
      }
      .ftsturecord {
        z-index: 999;
        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;
            }
          }
        }
      }
      .givepower {
        z-index: 999;
        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;
          }
        }
      }
      .schooltime {
        z-index: 999;
        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;
              }
            }
          }
          .stm_table {
            width: 90%;
            margin: 30px auto;
            border: 1px solid #f0f4fe;
            .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;
              }
            }
          }
        }
      }
      .studentsmanage {
        z-index: 999;
        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;
                  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%;
                    display: flex;
                    flex-direction: column;
                    background-color: #ffffff;
                    box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
                    position: absolute;
                    top: 40px;
                    z-index: 999;
                    .btn4_tit {
                      margin-top: 8px;
                      margin-left: 8px;
                    }
                    .btn4_op1,
                    .btn4_op2,
                    .btn4_op3 {
                      margin-left: 20px;
                    }
                  }
                }
                .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 {
              margin-top: 20px;
              .operation,
              .nselect {
                display: flex;
                justify-content: center;
                color: #4ea6ff;
                font-size: 14px;
                .ops1,
                .ops2 {
                  margin-right: 10px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
