<!-- 内部讲师 -->
<template>
  <div>
    <!-- 搜索框及按钮 -->
    <div class="filter" style="min-width: 1056px;">
      <a-form layout="inline">
        <a-form-item class="select">
          <!--  v-model:value="searchParam.name" -->
          <a-input v-model:value="searchParam.name" style="width: 235px; height: 40px; border-radius: 8px"
            placeholder="请输入工号/讲师姓名进行检索" allowClear showSearch @pressEnter="searchSubmit">
          </a-input>
        </a-form-item>
        <a-form-item class="select">
          <a-select style="width: 235px" placeholder="请选择讲师体系" v-model:value="searchParam.tSystemId" allowClear
            :options="LecturerSystemList" @keydown.enter="enterPressHadlerSearch">
          </a-select>
        </a-form-item>
        <!-- <div  @click="handlesearchlevel"> -->
        <a-form-item class="select" >
          <a-select style="width: 200px" v-model:value="searchParam.tLevelName" placeholder="请选择讲师级别" allowClear
            :options="getLevelList" @keydown.enter="enterPressHadlerSearch" >
            <!--  :disabled="getLevelList.length !== 0 ? false : true" 禁用状态 -->
          </a-select>
        </a-form-item>
        <a-form-item class="select">
          <a-select style="width: 170px ;margin-bottom:20px" v-model:value="searchParam.waitStatus" placeholder="在职状态"
            :options="OnTheJobStatusList" @keydown.enter="enterPressHadlerSearch" allowClear>
          </a-select>
        </a-form-item>
        <a-form-item class="select">
          <a-select style="width: 170px ;" v-model:value="searchParam.certStatus" placeholder="认证状态" allowClear
            :options="AuthenticationStatusList" @keydown.enter="enterPressHadlerSearch">
          </a-select>
        </a-form-item>
        <a-form-item class="select">
          <a-input style="width: 220px;height: 40px; border-radius:8px; " v-model:value="searchParam.courses"
            placeholder="擅长课程" allowClear @pressEnter="searchSubmit">
          </a-input>
        </a-form-item>
      <!-- </div> -->
        <div style="display: flex; margin-bottom: 20px">
          <a-button @click="searchSubmit()" type="primary" class="resetbtn">查询 </a-button>
          <!-- <div class="btn btn1" @click="searchReset" style="background:rgba(64, 158, 255, 0);" > -->
          <!-- <div class="search"></div> -->
          <a-button class="resetbtn " @click="searchReset">重置</a-button>

          <!-- 更多筛选-->
          <!-- <div v-if="moreid == 1" >
            <a-button @click="handlemoreid()" class="moreidbtn" type="text"> 展开
              <RightOutlined />
            </a-button>
          </div> -->
          <!-- <div v-if="moreid == 2">
            <a-button @click="handlemoreid()" class="moreidbtn"> 返回
              <UpOutlined />
            </a-button>
          </div> -->
        </div>
        <div style="width:100%"></div>
        
      </a-form>
      <div style="width: 100%;"></div>
      <div style="display: flex; margin-bottom: 20px">
        <a-button @click="addTeacher()" type="primary" class="resetbtn" style="width:120px;">
          <div class="search"></div> 新增讲师
        </a-button>
        <div>
          <a-button @click="handleExport()" class="resetbtn">
            <UploadOutlined /> 导出
          </a-button>
        </div>
      </div>
      <!-- 表格 -->
      <div style="padding: 10px 0">
        <a-table :columns="columns" :scroll="{ x: '1000' }" :data-source="tableData" :loading="tableLoading"
          :pagination="false">
          <template #bodyCell="{ record, column }">

            <template v-if="column.key === 'orgName'">
              <a-space style="display:flex ;justify-content: space-around;  ">
                <!-- <a-popover>
                  <template #content>
                    <p>{{ record.orgName}}</p>
                  </template> -->
                  <span :title="record.orgName">{{ record.neworganizationName }}</span>
                <!-- </a-popover> -->
              </a-space>
            </template>
            <template v-if="column.key === 'operation'">
              <a-space>
                <a-button type="link" @click="() => handleLook(record, String(record.courseform))">查看</a-button>

                <a-button v-if="record.isPermission==='true'||record.isSuperPermission==='true'" type="link" @click="() => handleModify(record, String(record.courseform))">编辑</a-button>
                <a-button v-if="record.status == '1'&&(record.isPermission==='true'||record.isSuperPermission==='true')" type="link"
                  @click="() => handleOperate(record, String(record.courseform))">停用</a-button>
                <a-button v-if="record.status == '2'&&(record.isPermission==='true'||record.isSuperPermission==='true')" type="link"
                  @click="() => handleOperate(record, String(record.courseform))">启用</a-button>
                    <a-button  v-if="record.isSuperPermission==='true'" type="link" @click="() => deleteModal(record, String(record.courseform))">删除</a-button>
                <!-- <a-button type="link" @click="() => deleteModal(record, String(record.courseform))"  
                   v-if="lecturerAdmin('Lecturer-admin')">删除</a-button> -->
              </a-space>
            </template>
          </template> 
        </a-table>
      </div>

    </div>
    <div class="tableBox ">
      <div  class="pa">
        <a-pagination v-if="tableDataTotal > 10" :showSizeChanger="true" :showQuickJumper="false"
          :hideOnSinglePage="true" :pageSize="searchParam.pageSize" :current="searchParam.pageNo" :total="tableDataTotal"
          class="pagination" @change="changePagination" />
      </div>
    </div>
    <!-- 弹窗组件 -->
    <a-drawer class="largeDrawerInside" v-model:visible="teacherdialog" placement="right" :closable="false" :maskClosable="false"
      width="700" :title="false">
      <div style="padding:24px">
        <div class="headers" style="margin-top:-24px;margin-left: -25px;width: 110%;">
          <div class="headerTitle" style="margin-left: 14px;">{{ teacherdialogtitle }}</div>
          <img
            style="width: 29px; height: 29px; cursor: pointer;margin-right: 24px;"
            src="@/assets/images/basicinfo/close.png"
            @click="cancelTeacherDialog"
          />
        </div>
        <div ref="drawerContent" style="padding-left: 15px;padding-right: 46px;">
          <a-form :model="formParam" layout="vertical" ref="formRef">
            <a-row>
              <a-col :span="24">
                <span class="line"></span><span style="color:#333333;font-weight: 600;font-size:16px;">基本信息</span>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="24">
                <div class="item_inp" style="background-color: #fff;">
                  <div style="width:120px;margin:0 auto;" @click="avatarChange">
                    <a-upload :disabled="!formParam.name" name="avatar" list-type="picture-card" class="avatar-uploader" :show-upload-list="false"
                      :headers="headers" :before-upload="beforeUpload">
                    <img class="i_upload_img" v-if="formParam.photo" :src="formParam.photo" alt="avatar" title="更换头像" />
                    <img class="i_upload_img" v-else-if="formParam.gender==1" src="../../assets/Avatarman.png" alt="avatar" title="更换头像" />
                    <img class="i_upload_img" v-else-if="formParam.gender==2" src="../../assets/Avatarwoman.png" alt="avatar" title="更换头像" />
                    <img class="i_upload_img" v-else src="../../assets/Avatarman.png" alt="avatar" title="更换头像" />
                      <!-- <div class="i_upload" v-else>
                        <div class="addimg">
                          <div class="heng"></div>
                          <div class="shu"></div>
                        </div>
                      </div> -->
                    </a-upload>
                  </div>
                  <div class="i_bottom">
                    <div class="tip" style="margin-bottom: 10px;">
                      <span style="color: #999999; margin-left: 8px">支持图片格式为jpg/jpeg/png </span>
                    </div>
                  </div>
                </div>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="24">
                <a-form-item  name="name">
                    <template v-slot:label>
                      <img
                        style="margin-right:4px;width: 7px;height: 7px"
                        src="@/assets/images/coursewareManage/asterisk.png"
                        alt=""
                      />
                      讲师姓名
                    </template>
                    <SearchTeacher @tlevel="teacherTlevel" :lecturer="true" :disabled="!!id" v-model:value="formParam.name" v-model:lable="formParam.orgNames" v-model:orgId="formParam.orgId" v-model:id="formParam.id"
                    v-model:system="tSystemNames" v-model:level="formParam.tlevelId"></SearchTeacher>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="讲师组织" name="orgName">
                  <!-- <a-popover>
                    <template #content>
                      {{ formParam.orgNames }}
                    </template> -->
                    <a-input :title="formParam.orgNames" disabled v-model:value="formParam.orgName" class="draitem"
                      placeholder="自动带出讲师的组织,展示主要部分,鼠标浮上去展示所有" allowClear showSearch>
                    </a-input>
                  <!-- </a-popover> -->
                </a-form-item>
              </a-col>
            </a-row>
              <a-col :span="24">
                <a-form-item name="tsystemName">
                  <template v-slot:label>
                    <img
                      style="margin-right:4px;width: 7px;height: 7px"
                      src="@/assets/images/coursewareManage/asterisk.png"
                      alt=""
                    />
                    讲师体系
                  </template>
                  <!-- <a-select class="draitem" v-model:value="formParam.tsystemName" placeholder="请选择讲师体系" allowClear
                    @change="changetlevel" .:options="LecturerSystemList">
                  </a-select> -->
                  <a-input disabled v-model:value="tSystemNames.systemName" class="draitem"
                      placeholder="自动带出讲师的体系" allowClear showSearch>
                    </a-input>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <!-- <div  @click="handleformlevel"> -->
                <a-form-item name="tlevelId">
                  <template v-slot:label>
                    <img
                      style="margin-right:4px;width: 7px;height: 7px"
                      src="@/assets/images/coursewareManage/asterisk.png"
                      alt=""
                    />
                    讲师级别
                  </template>
                    <a-select class="draitem" v-model:value="formParam.tlevelId" placeholder="请选择讲师级别" allowClear disableda
                      :options="tSystemNames.levelVoList" @change="handleformlevel">
                    </a-select>
                </a-form-item>
                <!-- </div> -->
              </a-col>
            <a-row :gutter="16">
              <a-col :span="24">
                <a-form-item name="defaultTeachingTime">
                  <template v-slot:label>
                    <img
                      style="margin-right:4px;width: 7px;height: 7px"
                      src="@/assets/images/coursewareManage/asterisk.png"
                      alt=""
                    />
                    初始授课时长
                  </template>
                  <a-input v-model:value="formParam.defaultTeachingTime" style="width:100%; height: 40px; border-radius: 8px; "
                  :maxLength="8"
                    @change="clearNonNumber" @blur="blurNumber" @focus="focusNumber" placeholder="请输入初始授课时长" allowClear  suffix="分钟">
                  </a-input>
                  <!-- <span style="margin-left: 5px ;" v-if="formParam.defaultTeachingTime === null">0.00小时</span>
                  <span style="margin-left: 5px ;" v-if="formParam.defaultTeachingTime != null">{{
                    (formParam.defaultTeachingTime / 60).toFixed(2) }}小时</span> -->
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="认证状态" name="certStatus" style="display:flex;">
                  <a-radio-group v-model:value="formParam.certStatus" class="draitem">
                    <a-radio :value="0">未认证</a-radio>
                    <a-radio :value="1">已认证</a-radio>
                    <span>
                      <a-button type="text" class="moreidbtn" v-if="formParam.certStatus == 1"
                        @click="handleupdialog">{{formParam.certificationName?formParam.certificationName:'上传凭证'}}</a-button>
                      </span>
                    </a-radio-group>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <span class="line" style="margin-bottom:24px;"></span><span style="color:#333333;font-weight: 600;font-size:16px;">其他信息</span>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="24">
                <a-form-item label="讲师介绍">
                  <Editor v-model:value="formParam.description" :isupload="isupload" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="24">
                <a-form-item label="工作经历">
                  <Editor v-model:value="formParam.workExperience" :isupload="isupload" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="24">
                <a-form-item label="擅长课程">
                  <Editor v-model:value="formParam.courses"  :isupload="isupload"/>
                </a-form-item>
              </a-col>
            </a-row>
            <div style="margin-bottom: 6px;">教师专长</div>
            <a-row :gutter="50" style="margin-bottom: 50px;">
              <!-- <a-col :span="4">
                <a-tag color="blue" style="line-height: 40px; ">管理业务</a-tag>
              </a-col> -->
              <a-col :span="20">
                <!-- <div class="add_content" @click="addContentData">
                  <div class="text">+</div>
                </div> -->
                <div class="add_list">
                  <div :title="item.name" class="add_item" v-for="(item,index) in formParam.orgLists">
                    {{item.name}}
                  </div>
                  <div class="add_content" @click="addContentData">
                    <div class="text">+</div>
                  </div>
                </div>
              </a-col>
            </a-row>
          </a-form>
          <div>
            <a-modal 
              v-model:visible="updialog"
              :footer="null"
              closable="false"
              style="margin-top: 400px"
              @cancel="cancelupdialog"
              :maskClosable="false"
              :destroyOnClose="true"
            >
              <div class="selectonlineface" style="width: 660px;" :style="{ display: updialog ? 'block' : 'none' }">
                <div class="bg_headers"></div>
                <div class="bg_main">
                  <div class="bg_main_header">
                    <div class="bg_main_header_close" @click="cancelupdialog"></div>
                  </div>
                  <div class="bg_body">
                    <div>导入</div>
                    <a-form style="margin-top:30px ;">
                      <a-form-item style="color: #999999;">注意 :文件支持PDF、PNG、JPG ,文件大小不可超过5MB</a-form-item>
                      <a-form-item label="上传文件">
                        <UploadDragger :size="5000000" ref="uploadRef" style="width:86%;height:148px;" @change="changeUpload" :accept="accept"
                            @removeList="removeList"  :uploadUrl="uploadUrl" :params="folderId" :loadTrue="formParam.certificationName" />
                      </a-form-item>
                    </a-form>
                    <div class="bg_footer" style="margin-left: 160px;margin-top: 30px">
                      <div class="btn btn6" @click="cancelupdialog">
                        <div class="btnText">取消</div>
                      </div>
                      <a-button
                        class="btn btn6"
                        @click="createupdialog"
                      >
                        确定
                      </a-button>
                    </div>
                  </div>
                </div>
              </div>
            </a-modal>
          </div>
          <div :style="{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
            zIndex: 1,
            display: 'flex',
            justifyContent: 'end',
          }">
            <a-button class="drabtn" @click="cancelTeacherDialog">取消</a-button>
            <a-button class="drabtn" type="primary" @click="createTeacherDialog" :loading="buttonLoading">保存
            </a-button>
          </div>
        </div>
      </div>
    </a-drawer>

    <!-- 删除功能弹窗 -->
    <div>
      <a-modal v-model:visible="deleteInTeacherdialog" :footer="null" :closable="closableQR" centered="true">
        <div class="delete">
          <div class="del_header"></div>
          <div class="del_main">
            <div class="header">
              <!-- <img src="@/assets/images/coursewareManage/notice.png" alt=""
              style="margin-right:3px" /> -->
              <img src="@/assets/images/coursewareManage/QR.png" alt="" style="margin-right:10px" />
              <span>提示</span>
            </div>
            <div class="body">
              <span>确定要将该讲师删除吗</span>
            </div>
            <div class="del_btnbox">
              <div class="del_btn btn2" @click="cancelTeacherDialog1" style="margin-right: 32px">
                <div class="btnText">取消</div>
              </div>
              <div class="del_btn btn2" @click="closeDeleteTeacher">
                <div class="btnText">确定</div>
              </div>
            </div>
          </div>
        </div>
      </a-modal>
    </div>
    <!-- 修改状态功能弹窗 -->
    <div>
      <a-modal v-model:visible="editTeacher" :footer="null" :closable="closableQR" wrapClassName="DelModal"
        style="margin-top: 400px" :zIndex="9999">
        <div class="delete">
          <div class="del_header"></div>
          <div class="del_main">
            <div class="header">
              <img src="@/assets/images/coursewareManage/QR.png" alt="" style="margin-right:10px" />
              <span>提示</span>
            </div>
            <div class="body">
              <span v-if="handleOperate1 == 2">确定要将该讲师启用吗<div></div>启用后讲师可以登录教师端</span>
              <span v-if="handleOperate1 == 1">确定要将该讲师停用吗<div></div>停用后讲师不可登录教师端</span>
            </div>
            <div class="del_btnbox">
              <div class="del_btn btn2" @click="cancelTeacherDialog1" style="margin-right: 32px">
                <div class="btnText">取消</div>                                                                                                                                                                                                                                                                                                                                                                                      
              </div>
              <div class="del_btn btn2" @click="closehandleOperate">
                <div class="btnText">确定</div>
              </div>
            </div>
          </div>
        </div>
      </a-modal>
    </div>
    <AddContent v-model:showContent="showContent" v-model:AddContentList="formParam.orgLists" :Addtitle="Addtitle" />
    <!-- <div> <Upload/> </div>         -->
     <LookInsideLecturer v-model:visible="lookinsideVisi" :id="lookinsideId"></LookInsideLecturer>
  </div>
</template>
<script lang="jsx">
import { reactive, toRefs, ref, watch,computed,onMounted,nextTick  } from "vue";
import { useStore } from "vuex";
import {
  RightOutlined,
  UpOutlined,
  UploadOutlined,
  FolderAddOutlined
} from '@ant-design/icons-vue';
import Editor from "@/components/project/Editor";
import ProjectManager from "@/components/project/ProjectManagerNew";
import SearchTeacher from "@/components/project/SearchTeacher";
import { message } from "ant-design-vue";
import { useRouter,useRoute  } from "vue-router";
import { getTeacherSystemList, getTeacherList, getPayRollPlace, getAllLevelList, insertTeacher, deleteInTeacher, updateInTeacher, getTeacherById, updateTeacherState } from "../../api/Lecturer";
 import { fileUp } from "../../api/indexEval";
import { teacherUpload } from "../../api/Teaching";
import { getCookieForName } from "@/api/method";
// import {getProjSt} from "../../api/indexProjStu";
import AddContent from "../../components/project/AddContent.vue"
import UploadDragger from "@/components/project/UploadDragger.vue"
import avatar from '@/assets/avatar.png'
import LookInsideLecturer from "../../components/project/LookInsideLecturer.vue"
export default {
  name: "InsideLecturer",
  components: {
    ProjectManager,
    SearchTeacher,
    AddContent,
    Editor,
    // FJUpload,
    RightOutlined, //图标--展开
    UpOutlined,//图标--收起
    UploadOutlined,//图标--导出
    FolderAddOutlined,//图标--新增
    UploadDragger,
    LookInsideLecturer,
  },
  setup( ) {
    onMounted(() => {
      const search = sessionStorage.getItem('searchLecturer')
      if(route.query.activeKey == 1){
        state.moreid = 2
        state.searchParam = JSON.parse(search)
      }
      getTableDate()
    })
    const route = useRoute()
    const formRef = ref();
    const store = useStore();
    const router = useRouter();
    const userInfo = computed(() => store.state.userInfo);
    const state = reactive({
      lookinsideVisi:false,
      lookinsideId: null,
      Addtitle: '选择教师专长',
      log: false,
      showContent: false,
      closableQR: false,
      updialog: false,
      moreid: 1,
      byPid: null,
      tableLoading: false,
      tagsshow: "1",
      PlaceOfPayList: [],
      LecturerSystemList: [],
      delTeacherId: null, //删除id确认
      editTeacherid: null,//修改状态id确认
      newStatus: null, //修改状态码确认
      id: null,    //内部讲师详情工号确认 
      lookTeacherId: null, //内部讲师详情id确认
      deleteInTeacherdialog: false, //删除弹窗
      editTeacher: false,   //修改状态弹窗
      handleOperate1: null, //修改状态弹窗内容
      teacherdialog1: null,
      teacherdialog: false,  //控制讲师弹窗
      teacherdialogtitle: '',//讲师弹框title内容
      pageSizeOptions: ['10', '20', '30', '50'], //下拉选择每页显示多少条
      pageSize: 10,
      tableDataTotal: -1,//table列表总条数
      vf: false,
      tSystemNames:{
        systemName:null,
        systemId: null,
        levelVoList: []
      },
      formParam: {
        name: null,
        certStatus: 0,//认证状态
        defaultTeachingTime: 0,
        teacherType:1,
        photo: null,
        gender: 0,
        orgLists: [],
        certification: null,
        certificationName: null,
      },
      searchParam: { 
        teacherType:1,
        pageNo: 1,
        // pageSize1: "10",
        name: null,
        tsystemName: null,
        tLevelName: null,
        waitStatus: null,
        certStatus: null,
        courses: null,
        pageNo: "1",
        pageSize: "10"
      },
      teacherrepromo: {
        pageNo: "1",
        pageSize: "10",
        userNo: null,
        teacherType:1
      },
      activeName: 'first'
    })
    watch(() => state.formParam.description, (val) => {
        console.log(val, 'description')
      })
      watch(() => state.formParam.workExperience, (val) => {
        console.log(val, '')
      })
      watch(() => state.formParam.courses, (val) => {
        console.log(val, 'courses')
      })
      watch(() => state.formParam.orgNames, (val) => {
        console.log(val, 'orgName')
        if(val){
          const parts = val.split('/');
          const reversedParts = parts.reverse();
          state.formParam.orgName = reversedParts.join('/'); 
        }
      })
    const headers = { token: getCookieForName("token") };
    //图片上传
    const avatarChange = () => {
      if(!state.formParam.name){
        message.error('请先选择讲师')
        return
      }
    }
    // const photo = ref('')
    const beforeUpload = (file) => {
      const isJpgOrPng =
        file.type === "image/jpg" ||
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/bmp" ||
        file.type === "image/gif";
      if (!isJpgOrPng) {
        message.error("仅支持jpg、gif、png、jpeg、bmp格式!");
        return false;
      }
      let isLt1M = file.size < 500000;
      console.log(file.size, isLt1M)
      if (!isLt1M) {
        message.error("图片不能超过500KB! 请重新上传");
        return false;
      }

      const formDatas = new FormData();
      formDatas.append("file", file);
      console.log("file", file)
      fileUp(formDatas).then((res) => {
        if (res.data.code === 200) {
          console.log(res.data.data, 45);
          state.formParam.photo = process.env.VUE_APP_FILE_PATH + res.data.data;

          // state.hasImgName = file.name;
          // emit("src", { id: '', src: res.data.data });
        }
      });
      return false;
    };
    //附件上传
    const uploadRef = ref()
    const uploadUrl = ref("/systemapi/api/m/xfile/base/file/upload");
    const accept = ".pdf,.jpg,.png,"
    const folderId = ref({ folderId: process.env.VUE_APP_COURSE_FOLDERID })
    const changeUpload = (newValue) => {
      if (newValue[0].status == 'done' && newValue[0]?.response?.status == 200) {
          const { id, name, path } = newValue[0].response.result
          state.formParam.certifications = path
          state.formParam.certificationNames = name
      }
    }

    const beforeUpload2 = (file) => {
      const fileType = [
        "pdf",
      ];
      if (!fileType.includes(file.name.split(".")[1])) {
        message.error(
          "仅支持.pdf格式!"
        );
        return false;
      }

      const formData = new FormData();
      formData.append("file", file);
      console.log(file);
      teacherUpload(formData).then((res) => {
        if (res.data.code === 200) {
        //  state.formParam.filesList = [res.data.data];
        state.formParam.filesList = file.name
          console.log(state.formParam.filesList);
          // state.hasImgName = res.data.data;
        }
      });
      return false;
    };

    //附件上传交互
    const handleupdialog = () => {
      state.updialog = true
    }
    const cancelupdialog = () => {
      // state.formParam.certification = null
      // state.formParam.certificationName = null
      // uploadRef.value.removeUpload()
      state.updialog = false
    }
    const removeList = (val) => {
      state.formParam.certifications = null
      state.formParam.certificationNames = null
    }
    const createupdialog = () => {
      // uploadRef.value.removeUpload()
      state.formParam.certification = state.formParam.certifications
      state.formParam.certificationName = state.formParam.certificationNames
      state.updialog = false
    }
    const LecturerSystemList = ref([
    ]);
    //获取讲师体系列表
    const LecturerSystemLista = () => {
      let obj ={
        pageNo:1,
        pageSize:1000,
      }
      getTeacherSystemList(obj).then((res) => {
        if (res.data.code === 200) {
          let arr = res.data.data.records;
          let array = [];
          arr.map((value) => {
            let obj = {
              value: value.id,
              label: value.systemName,
            };
            array.push(obj);
          });
          LecturerSystemList.value = array;
        }
      })
    }
    const isupload = (val) => {
      console.log(val, 'val')

    }
    const drawerContent = ref(null);
    const addContentData = () => {
      state.showContent = true
    }
    const AddContentList = (data) => {
      // console.log(data, 'treedatalist')
      // state.formParam.orgLists = data
    }
    LecturerSystemLista()
    //获取内部讲师级别
    const getLevelList = ref([])
    const changetlevel = () => {
      // console.log("讲师体系id" + val);
      getAllLevelList().then((res) => {
        if (res.data.code === 200) {
          let arr = res.data.data;
          let array = [];
          arr.map((value) => {
            let obj = {
              value: value.levelName,
              label: value.levelName,
            };
            array.push(obj);
          });
          getLevelList.value = array;
        }
      })
    }
    changetlevel()
    const OnTheJobStatusList = ref([
      { value:"", label: "全部" },
      { value: 0, label: "在职" },
      { value: 1, label: "离职" },
    ])
    const AuthenticationStatusList = ref([
      { value: "", label: "全部" },
      { value: 0, label: "未认证" },
      { value: 1, label: "已认证" },
    ])
    // const PlaceOfPayList = ref([
    //   // { value: 0, label: "发薪地B1" },
    // ])
    //获取讲师发薪地列表
    // const PlaceOfPayLista = () => {
    //   getPayRollPlace().then((res) => {
    //     if (res.data.code === 200) {
    //       let arr = res.data.data;
    //       let array = [];
    //       arr.map((value) => {
    //         let obj = {
    //           value: value.id,
    //           label: value.name,
    //         };
    //         array.push(obj);
    //       });
    //       PlaceOfPayList.value = array;
    //     }
    //   })
    // }
    // PlaceOfPayLista()
    const AccountStatusList = ref([
      { value: 1, label: "启用" },
      { value: 2, label: "停用" },
    ])
    //新增页面内部姓名
    const infoteacherList = ref([
    ]);
    const getinfoteacher = () => {
    };
    //展开切换
    const handlemoreid = () => {
      if (state.moreid == 1) {
        state.moreid = 2
      }
      else if (state.moreid == 2) {
        state.moreid = 1
        state.searchParam.waitStatus = null
        state.searchParam.certStatus = null
        state.searchParam.courses = null
      }
    }
    const columns = ref([
      {
        title: '讲师工号 ',
        dataIndex: 'userNo',
        key: 'userNo',
        ellipsis: true,
        align: "center",
        width: 120,
      },
      {
        title: '讲师姓名 ',
        dataIndex: 'name',
        key: 'name',
        ellipsis: true,
        align: "center",
        width: 120,
      },
      {
        title: '所属组织 ',
        dataIndex: 'orgName',
        key: 'orgName',
        ellipsis: true, align: "center",
        scopedSlots: { customRender: "orgName" },
        width: 200,
        //  customRender: (value, record) => {
        //   return (
        //     <div>
        //       {value.record.orgName}
        //     </div>
        //   )
        // }
      },
      {
        title: '讲师体系 ',
        dataIndex: 'tsystemName',
        key: 'tsystemName',
        ellipsis: true, align: "center",
        width: 200,
      },
      {
        title: '级别 ',
        dataIndex: 'tlevelName',
        key: 'tlevelName',
        ellipsis: true, align: "center",
        width: 100,
      },

      {
        title: '授课时长(分钟)',
        dataIndex: 'teaching',
        key: 'teaching',
        ellipsis: true, align: "center",
        width: 120,
      },
      {
        title: '在职状态 ',
        dataIndex: 'waitStatus',
        key: 'waitStatus',
        ellipsis: true, align: "center",
        width: 120,
        customRender: (value) => {
          return (
            <div>
              {value.record.waitStatus == "0" || value.record.waitStatus == "1"
                ? {
                  "0": "在职",
                  "1": "离职",
                }[value.record.waitStatus + ""] || ""
                : "-"}
            </div>
          )
        }
      },
      {
        title: '认证状态 ',
        dataIndex: 'certStatus',
        key: 'certStatus',
        ellipsis: true, align: "center",
        width: 120,
        customRender: (value) => {
          return (
            <div>
              {value.record?.certStatus == 0 || value.record?.certStatus == 1
                ? {
                  "0": "未认证",
                  "1": "已认证",
                }[value.record?.certStatus + ""] || ""
                : "-"}
            </div>
          )
        }
      },
      {
        title: '账号状态 ',
        dataIndex: 'status',
        key: 'status',
        ellipsis: true, align: "center",
        width: 120,
        customRender: (value) => {
          return (
            <div>
              {value.record.status == 0 || value.record.status == 1 || value.record.status == 2
                ? {
                  '0': "临时",
                  '1': "启用",
                  '2': "停用"
                }[value.record.status + ""] || ""
                : "-"}
            </div>
          )
        }
      },
      {
        title: '录入方式 ',
        dataIndex: 'createFrom',
        key: 'createFrom',
        ellipsis: true, align: "center",
        width: 120,
        customRender: (value) => {
          return (
            <div>
              {value.record?.createFrom == 0 || value.record?.createFrom == 1
                ? {
                  "0": "自动录入",
                  "1": "手动录入",
                }[value.record?.createFrom + ""] || ""
                : "-"}
            </div>
          )
        }
      },
      {
        title: '操作 ',
        dataIndex: 'operation',
        key: 'operation',
        ellipsis: true,
        width: 200,
        align: "right",
        fixed: "right",
        scopedSlots: { customRender: "action" },
      },
    ])
    //列表数据
    const tableData = ref([

    ])
    const enterPressHadlerSearch = (e) => {
      if(e.keyCode==13){
        searchSubmit()
      }
    }
    // 搜索
    const searchSubmit = () => {
      state.searchParam.pageNo = 1
      getTableDate();
    };
    //重置
    const searchReset = () => {
      LecturerSystemLista()
      state.searchParam = {
        teacherType:1,
        name: null,
        userNo: null,
        newdepartId: null,
        tsystemName: null,
        tLevelName: null,
        waitStatus: null,
        certStatus: null,
        salaryName: null,
        payrollPlaceId: null,
        status: null,
        pageNo: 1,
        pageSize: 10,
      };
     // store.commit("setShouInclude", []);
      getTableDate();
    };
    //  List接口数据
    const getTableDate = () => {
      state.tableLoading = true
      let objA = { ...state.searchParam };
      getTeacherList(objA)
        .then((res) => {
          // tableData.value = res.data.data.records
          console.log(tableData.value,'tableData.value')
          let objA = res.data.data.records
          objA.map((item) => {
            if (item.orgName !== null) {
              item.neworganizationName = item.orgName.split('/')
              item.neworganizationName = item.neworganizationName[item.neworganizationName.length - 1]
            }
            // console.log(item.orgName)
          })
          tableData.value = objA
          state.tableDataTotal = Number(res.data.data.total);
          state.tableLoading = false
        }).catch(err => {
          state.tableLoading = false
          message.error(err.data.msg)
        })
    };
    // getTableDate()
    //   // 翻页
    const changePagination = (page, pageSize) => {
      state.searchParam.pageNo = page;
      // state.pageNo = page;
      state.searchParam.pageSize = pageSize;
      getTableDate();
    };
    // 新增讲师
    const addTeacher = () => {
      cancel()
      state.teacherdialog = true;
      state.teacherdialogtitle = '新增讲师'
      state.formParam.photo = null
      state.formParam.status = '1'
      state.vf = true
    }
    //修改讲师信息弹窗
    const handleModify = (record) => {
      state.teacherdialog = true;
      state.teacherdialogtitle = '编辑讲师'
      state.id = record.id
      state.vf = false
      TeacherSystem()
    }
    async function validateField(name) {
      return new Promise((resolve) => {
        formRef.value.validateFields([name])
          .then(() => {
            resolve(false);
          })
          .catch(() => {
            resolve(true);
          });
      });
    }
    const teacherTlevel = (val) => {
      console.log(val,'vallll')
      if(val?.avatar){
        val.avatar = val.avatar.includes('upload') ? val.avatar : '/upload' + val.avatar
        state.formParam.photo = val.avatar
      }
      state.formParam.gender = val?.gender
    }
    const repl = (val) => {
      if(val){
        val = val?.replace(/\s*&nbsp;\s*/g, '')
        val = val?.replace(/\s+/g, '')
        return val
      }
    }
    //保存
    const createTeacherDialog = async () => {
      state.formParam.tsystemName = state.tSystemNames?.systemName
      state.formParam.tsystemId = state.tSystemNames?.systemId
      if(state.formParam.defaultTeachingTime||state.formParam.defaultTeachingTime==0){
        state.formParam.defaultTeachingTime = String(state.formParam.defaultTeachingTime)
      }
      const formItemNames = Object.keys(rules);
      for(let i=0;i<formItemNames.length;i++){
        // const result = await validateField(formItemNames[i]);
        const result = state.formParam[formItemNames[i]]
        if (!result) {
          return message.error(rules[formItemNames[i]][0].log)
        }
      }
      if(state.formParam.certStatus&&!state.formParam.certificationName){
        return message.error('请上传认证凭证')
      }
      if(!state.formParam.certStatus){
        state.formParam.certification = null
        state.formParam.certificationName = null
      }
      if(state.formParam.name){
        const nameNo = state.formParam?.name?.split('/')
        state.formParam.name = nameNo[0]
        state.formParam.userNo = nameNo[1]
      }
      state.formParam.description = repl(state.formParam.description)
      state.formParam.workExperience = repl(state.formParam.workExperience)
      state.formParam.courses = repl(state.formParam.courses)
      state.formParam.orgName =  state.formParam.orgNames
      state.formParam.expertise = state.formParam?.orgLists?.map(item => item.id).join(',')
      state.formParam.expertiseNames = state.formParam?.orgLists?.map(item => item.name).join(',')
      state.formParam = {...state.formParam,...state.tSystemNames}
      delete state.formParam.teaching
      if (state.vf == false) {
        updateInTeacher(state.formParam).then(response => {
            message.success("编辑成功");
            state.teacherdialog = false;
            cancel()
            getTableDate(); 
          }).catch(err=>{
            message.error(err.data.msg)
            state.teacherdialog = false;
          })
        }
        else {
          insertTeacher(state.formParam)
            .then((res) => {
              message.success("新增成功");
              state.teacherdialog = false;
              cancel()
        getTableDate(); 
            }).catch((err) => {
              message.error(err.data.msg)
              state.teacherdialog = false;
            });
        }
      // rule()
      // if (state.log = true) {
      //   state.teacherdialog = true;
      // }
      // else {
      //   // formRef.value.validate(valid => {
      //   //   if (valid) {
      //   //     if (state.vf == false) {
      //   //       updateInTeacher(state.formParam).then(response => {
      //   //         message.success("修改成功");
      //   //       });
      //   //     }
      //   //     else {
      //   //       insertTeacher(state.formParam)
      //   //         .then((res) => {
      //   //           message.success("保存成功");
      //   //         }).catch((err) => {
      //   //           console.log(err);
      //   //         });
      //   //     }
      //   //     state.teacherdialog = false;
      //   //     getTableDate();
      //   //   }
      //   // }
      //   // )
      //   if (state.vf == false) {
      //       updateInTeacher(state.formParam).then(response => {
      //         message.success("修改成功");
      //       });
      //     }
      //     else {
      //       insertTeacher(state.formParam)
      //         .then((res) => {
      //           message.success("保存成功");
      //         }).catch((err) => {
      //           console.log(err);
      //         });
      //     }
        //   state.teacherdialog = false;
        //  getTableDate(); 
      // }
    };
    //删除弹窗
    const deleteModal = (record) => {
      state.deleteInTeacherdialog = true
      state.delTeacherId = record.id
    };
    //修改状态窗口
    const handleOperate = (record) => {
      if (record.status == 1) {
        state.handleOperate1 = record.status
        state.newStatus = 2
      }
      if (record.status == 2) {
        state.handleOperate1 = record.status
        state.newStatus = 1
      }
      state.editTeacherid = record.id
      state.editTeacher = true
    };
    //确认删除
    const closeDeleteTeacher = () => {
      //调用删除接口
      deleteInTeacher(state.delTeacherId).then((res) => {
        if (res.data.code == 200) {
          message.success("删除成功");
          state.deleteInTeacherdialog = false
          getTableDate();
        }
      }).catch((err)=>{
        message.error(err.data.msg)
        state.deleteInTeacherdialog = false
      })
    }
    //确认启用停用
    const closehandleOperate = () => {
      //调用接口
      let ids = {
        id: state.editTeacherid,
        status: state.newStatus
      }
      console.log(ids)
      updateTeacherState(ids).then((res) => {
        message.success("操作成功");
        state.editTeacher = false
        getTableDate();
      }).catch((err)=>{
        state.editTeacher = false
      })
    }
    //取消按钮 清空输入的数据
    const cancelTeacherDialog = () => {
      if (state.teacherdialog = true) {
        formRef.value.resetFields();
        state.teacherdialog = false
        cancel()
      }
      // state.deleteInTeacherdialog = false
      // state.editTeacher = false
      // state.tagsshow = 1
    };
    const cancelTeacherDialog1 = () => {
      state.deleteInTeacherdialog = false
      state.editTeacher = false
      state.tagsshow = 1
    };
    watch(() => state.formParam.certStatus,(val)=>{
      if(!val){
        // state.formParam.certification = null
        // state.formParam.certificationName = null
      }
    })
    //清空数据
    const cancel = () => {
      state.formParam = {
        name: null,
        status: null,
        teacherType: 1,
        photo: null,
        gender: 0,
        name: null,
        newdepartId: null,
        tlevelId: null,
        defaultTeachingTime:0,
        tsystemName: null,
        certStatus: 0,
        description: '',
        workExperience: '',
        courses: '',
        orgLists: [],
        certification: null,
        certificationName: null,
      }
      state.tSystemNames = {
        systemName:null,
        systemId: null,
        levelVoList: []
      }
      state.id = null
    }
    const clearNonNumber = () => {
      state.formParam.defaultTeachingTime = state.formParam.defaultTeachingTime.replace(/\D/g, '');
      state.formParam.defaultTeachingTime = state.formParam.defaultTeachingTime.slice(0,8)
    }
    const blurNumber = () => {
      !state.formParam.defaultTeachingTime && (state.formParam.defaultTeachingTime = '0')
    }
    const focusNumber = () => {
      state.formParam.defaultTeachingTime==0 && (state.formParam.defaultTeachingTime = null)
    }
    const rules = {
      name: [{ required: true, message: '',log:'讲师不能为空' }],
      // newdepartId: [{ required: true, message: '组织不能为空' }],
      tsystemName: [{ required: true, message: '',log:'讲师体系不能为空' }],
      tlevelId: [{ required: true, message: '',log:'讲师级别不能为空' }],
      defaultTeachingTime: [{ required: true, message: '',log:'初始授课时长不能为空' }],
      // certStatus: [{ required: true, message: '认证状态不能为空' }],

    }
    // const rule = () => {
    //   if (state.formParam.name == null) {
    //     state.log = true
    //     message.warning('讲师不能为空')
    //     return
    //   }
    //   if (state.formParam.departId == null) {
    //     state.log = true
    //     message.warning('组织不能为空')
    //     return
    //   }
    //   if (state.formParam.tlevelId == null) {
    //     state.log = true
    //     message.warning('讲师级别不能为空')
    //     return
    //   }
    //   if (state.formParam.tsystemName == null) {
    //     state.log = true
    //     message.warning('讲师体系不能为空')
    //     return
    //   }
    //   if (state.formParam.defaultTeachingTime == null) {
    //     state.log = true
    //     message.warning('授课时长不能为空')
    //     return
    //   }
    //   if (state.formParam.certStatus == null) {
    //     state.log = true
    //     message.warning('认证状态不能为空')
    //     return
    //   }
    // }
    // //表格内查看数据操作
    const handleLook = (record) => {
      state.lookinsideVisi = true
      state.lookinsideId = record.id
      // sessionStorage.setItem('searchLecturer', JSON.stringify(state.searchParam))
      // let id = record.id
      // router.push({ path: '/LookInsideLecturer', query: { id } })
    }
    //内部讲师详情
    const TeacherSystem = () => {
      console.log(state.id)
      getTeacherById({id:state.id}).then((res) => {
        if (res.data.code === 200) {
          // let objA= res.data.data[0]
          //   if( objA.orgName !==null ){
          //     objA.neworgName=objA.orgName.split('/')

          //     objA.neworgName= objA.neworgName[objA.neworgName.length-1]
          // }
          state.formParam = res.data.data
          state.formParam.description = state.formParam.description == null ? '<p><br></p>' : state.formParam.description
          state.formParam.workExperience = state.formParam.workExperience == null ? '<p><br></p>' : state.formParam.workExperience
          state.formParam.courses = state.formParam.courses == null ? '<p><br></p>' : state.formParam.courses
          state.formParam.photo = state.formParam.photo == null ? null : state.formParam.photo.includes('upload') ? res.data.data.photo : '/upload'+res.data.data.photo
          state.tSystemNames.systemName = res.data.data.tsystemName
          state.tSystemNames.systemId = res.data.data.tsystemId
          state.tSystemNames.systemCode = res.data.data.systemCode
          state.tSystemNames.systemId = res.data.data.systemId
          state.tSystemNames.levelVoList = res.data.data?.levelList?.map(item=>{
            return {
              label: item.levelName,
              value: item.id,
              levelName: item.levelName,
              id: item.id,
            }
          })
          state.formParam.tlevelName = res.data.data.tlevelName
          state.formParam.tlevelId = res.data.data.tlevelId
          state.formParam.name = res.data.data.name+'/'+res.data.data.userNo
          state.formParam.orgNames =  state.formParam.orgName
          // state.formParam.orgLists = res.data.data.expertiseNames?.split(',').map(item=>({ name: item }))
          const ids = res.data.data?.expertise?.trim().split(',').filter(id => id !== '');
          const names = res.data.data?.expertiseNames?.split(',');
          state.formParam.orgLists = ids?.map((id, index) => ({
            name: names[index],
            id: id
          }))||[]
          state.formParam.certifications = state.formParam.certification
          state.formParam.certificationNames = state.formParam.certificationName
        }


        console.log("内部讲师详情", state.formParam);
      })
        .catch((err) => {
          console.log("内部讲师详情", err);
        });
    }
    // function managerChange(e, l, d, t, orgName) {
    //   console.log(e, l);
    //   state.searchParam.userNo = d;
    //   state.searchParam.name = t;
    //   // state.searchParam.trainorgName=orgName
    // }
    // const customPreview =(e)=>{
    //   e.stopPropagation()
    // }
    // const handlesearchlevel = () => {
    //   console.log('请先选择讲师体系')
    //   if (state.searchParam.tsystemName == undefined) {
    //     message.warning('请先选择讲师体系')
    //   }
    // }
    const handleformlevel = (val) => {
      state.formParam.tlevelName = state.tSystemNames.levelVoList.find(item=>item.id===val)?.levelName
      state.formParam.tlevelId = state.tSystemNames.levelVoList.find(item=>item.id===val)?.id
    }
    //导出功能
    const handleExport = () => {
      window.open(
        `${process.env.VUE_APP_BASE_API}/admin/export/exportInTeacher?name=${state.searchParam.name || ""}&tSystemId=${state.searchParam.tSystemId || ""}&tLevelName=${state.searchParam.tLevelName || "" }&waitStatus=${state.searchParam.waitStatus || ""}&certStatus=${state.searchParam.certStatus || ""}&courses=${state.searchParam.courses || ""}`
      );
      // this.download('lesson_records/export', {
      //           ...state.searchParam
      //       }, `project_${new Date().getTime()}.xlsx` )
    }
    const lecturerAdmin = (admin)=>{
        const roleCode = userInfo.value.roleList.map((item)=>item.roleCode)
        if (admin){
          return roleCode.some(t => t == admin)
        }
      }
    return {
      ...toRefs(state),
      lecturerAdmin,
      rules,
      // rule,
      formRef,
      // handlesearchlevel,
      handleformlevel,
      // customPreview,
      clearNonNumber,
      blurNumber,
      focusNumber,
      // managerChange,
      headers,
      beforeUpload,
      avatarChange,
      handlemoreid,
      handleExport,
      LecturerSystemList,
      getLevelList,
      OnTheJobStatusList,
      changetlevel,
      // PlaceOfPayLista,
      AuthenticationStatusList,
      // PlaceOfPayList,
      AccountStatusList,
      searchSubmit,
      enterPressHadlerSearch,
      searchReset,
      columns,
      tableData,
      changePagination,
      addTeacher,
      cancelTeacherDialog,
      cancelTeacherDialog1,
      handleLook,
      cancel,
      deleteModal,
      handleModify,
      closeDeleteTeacher,
      createTeacherDialog,
      repl,
      teacherTlevel,
      validateField,
      handleOperate,
      closehandleOperate,
      getTableDate,
      LecturerSystemLista,
      TeacherSystem,
      infoteacherList,
      getinfoteacher,
      addContentData,
      drawerContent,
      isupload,
      AddContentList,
      beforeUpload2,
      changeUpload,
      folderId,
      uploadRef,
      uploadUrl,
      accept,
      handleupdialog,
      cancelupdialog,
      createupdialog,
      removeList,
    }
  },
};
</script>
<style lang="scss" scoped>
// ::v-deep .ant-form-item-with-help .ant-form-item-explain{
//   min-height: 0 !important;
// }
// ::v-deep .ant-form-item-has-error .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input) .ant-select-selector{
//   border-color: #40a9ff !important;
// }
// ::v-deep .ant-form-item-has-error .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input).ant-select-focused .ant-select-selector {
//   border-color: #40a9ff !important;
// }
// ::v-deep .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector{
//   border-color: #40a9ff !important;
// }
// ::v-deep .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover{
//   border-color: #40a9ff !important;
// }
.ant-form-item{
  margin-bottom: 12px;
}
.headers {
  height: 56px;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // background-color: red;
  margin-bottom: 20px;
  flex-shrink: 0;

  .headerTitle {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    line-height: 25px;
    // margin-left: 24px;
  }
}
.selectonlineface{
  z-index: 999;
  width: 679px;
  background: #ffffff;
  box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
  position: absolute;
  left: 50%;
  top: -100%;
  transform: translate(-50%, -50%);
  .bg_headers {
    position: absolute;
    width: 100%;
    height: 40px;
    background: linear-gradient(
      rgba(78, 166, 255, 0.2) 0%,
      rgba(78, 166, 255, 0) 100%
    );
  }
  .bg_main {
    width: 100%;
    position: relative;
    .bg_main_header {
      display: flex;
      align-items: center;
      padding-top: 20px;
      padding-left: 26px;
      font-size: 16px;
      .bg_main_header_icon {
        width: 16px;
        height: 16px;
        margin-right: 10px;
        background-image: url(@/assets/images/evaluation/uploads.png);
        background-size: 100% 100%;
      }
      .bg_main_header_close {
        position: absolute;
        right: 42px;
        cursor: pointer;
        width: 20px;
        height: 20px;
        background-image: url(@/assets/images/coursewareManage/close.png);
        background-size: 100% 100%;
      }
    }
    .text_color{
      color:#d9d9d9;
    }
    .bg_body {
      width: 80%;
      margin: 3px auto;

      .bg_body_bt {
        display: flex;
        align-items: center;
        justify-content: end;
        margin: 14px auto;

        .bg_body_bttext {
          width: 110px;
          display: flex;
          justify-content: end;
          margin-right: 20px;
          .bg_body_btimg{
            width: 10px;
            height: 10px;
            margin-top: -3px;
            margin-right: 6px;
            background-size: 100% 100%;
          }
        }
        .mbl_items12 {
          width: 333px;
          margin-left: 128px;
          .item_text{
            width: 300px;
            white-space: nowrap; /* 不换行 */
            overflow: hidden; /* 超出部分隐藏 */
            text-overflow: ellipsis; /* 使用省略号表示被隐藏的部分 */
          }
          .i12_box1 {
            display: flex;
            align-items: center;
            padding: 10px 0px 17px 21px;
            border: 1px solid #eff4fc;
            border-radius: 8px;
            margin-bottom: 10px;

            .file_img {
              width: 27px;
              height: 32px;
              background-image: url(@/assets/images/coursewareManage/imgs.png);
              margin-right: 22px;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .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: #4ea6ff;
                    border-radius: 3px;
                  }
                  .updataxq1{
                    margin-top: 7px;
                  }

                  .updataxq {
                    position: absolute;
                    right: 2px;
                    top: -37px;
                    color: #57c887;
                  }

                  .updataxq2 {
                    position: absolute;
                    right: 2px;
                    top: -35px;
                    color: #ff7474;
                  }

                  .updataxq3 {
                    position: absolute;
                    right: 2px;
                    top: -30px;
                    color: #4ea6ff;
                  }
                }
              }
            }

            .file_operation {
              display: flex;

              .fobox {
                margin-right: 5px;
                cursor: pointer;
              }
            }
          }
        }
      }
      .bg_body_input {
        flex: 1;
        position: relative;
        .ant-upload-picture-card-wrapper{
          width: 200px;
          margin-right: 18px;
        }
        .i_upload_img {
            width: 200px;
            height: 112px;
          }
          ::v-deep .ant-upload.ant-upload-select-picture-card{
            width: 90px;
            height: 90px;
          }
          .i_upload {
            width: 200px;
            height: 112px;
            text-align: center;
            align-items: center;
            cursor: pointer;

            .addimg {
              position: relative;

              .heng {
                position: absolute;
                top: 59px;
                left: 71px;
                width: 60px;
                border: 1px solid #d9d9d9;
              }

              .shu {
                position: absolute;
                top: 30px;
                left: 100px;
                height: 60px;
                border: 1px solid #d9d9d9;
              }
            }
          }
        .upload_box{
          border: 1px solid #d9d9d9;
          padding: 2px 5px;
          background-color: #d9d9d9;
          border-radius: 2px;
          cursor: pointer;
        }
        .error-message{
          color: red;
          font-size: 11px;
          margin-top: 2px;
          margin-bottom: 0;
        }
      }
      .bg_footer {
        width: 100%;
        margin-left: 174px;
        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;
        }
        .btndesign {
          background-color: #eff4fc;
          color: #ffffff;
        }
      }
    }
    .headers{
      margin-left: 38px;
      margin-right: 38px;
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .btn{
        display: flex;
      }
      .headers_item{
        margin-right: 20px;
        margin-bottom: 20px;
        .headers_item_text{
          margin-right: 15px;
        }
        .headers_item_btn {
          padding: 0px 26px 0px 26px;
          height: 38px;
          background: #4ea6ff;
          border-radius: 8px;
          border: 1px solid rgba(64, 158, 255, 1);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 14px;
          flex-shrink: 0;
          cursor: pointer;

          .search {
            background-size: 100%;
          }

          .btnText {
            font-size: 14px;
            font-weight: 400;
            color: #ffffff;
            line-height: 36px;
            margin-left: 5px;
          }
        }
        .btn1 {
          .search {
            width: 15px;
            height: 17px;
            background-image: url("../../assets/images/courseManage/search0.png");
          }
        }
        .btn2 {
          .search {
            width: 16px;
            height: 18px;
            background-image: url("../../assets/images/courseManage/reset0.png");
          }
        }
        ::v-deep .ant-select {
          border-radius: 5px;
          width: 100%;
          height: 40px;
          .ant-select-selector {
            border-radius: 8px;
            width: 100%;
            height: 40px;
          }
          .ant-select-selection-placeholder{
            line-height: 40px;
          }
          .ant-select-selection-item{
            line-height: 40px;
          }
        }
      }
    }
  }
}
::v-deep .ant-upload.ant-upload-select-picture-card {
  border-radius: 50% !important;
  width: 90px;
  height: 90px;
}

.add_content {
  width: 20px;
  height: 20px;
  cursor: pointer;
  border-radius: 50%;
  background-color: #4ea6ff;
  display: flex;
  justify-content: center;
  align-items: center;
  .text{
    font-size: 20px;
    color: #fff;
    margin-top: -4px;
  }
}
.add_list{
  width: 136%;
  margin-right:20px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-bottom: 20px;
  // overflow: auto;
  .add_item{
    padding: 5px 15px;
    color: #096dd9;
    background: #e6f7ff;
    border: 1px solid #91d5ff;
    margin-left: 10px;
    // width: 66px;
    // height: 22px;
    // line-height: 22px;
    // text-align: center;
    // white-space: nowrap;
    // overflow: hidden;
    // text-overflow: ellipsis;
    margin-bottom: 20px;
    font-size: 12px;
  }
  .add_content {
    width: 30px;
    height: 30px;
    cursor: pointer;
    border-radius: 50%;
    background-color: #4ea6ff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    .text{
      font-size: 20px;
      color: #fff;
      margin-top: -4px;
    }
  }
}
//导出按钮icon
.daochu {
  width: 16px;
  height: 18px;
  background-image: url("../../assets/images/coursewareManage/export1.png");
}

//弹窗内详情样式
.display1 {
  display: inline-block;
  width: 200px;
}

// .display0{
// display:inline-block ;
// width:200px ;
// text-align:center }
//弹窗内确认取消按钮布局
.del_btnbox {
  display: flex;
  margin: 30px auto;
  justify-content: center;

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

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

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

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

.ant-table-cell-fix-right {
  width: 300px !important;
}

.ant-table-tbody>tr>td {
  text-align: center;
}

.InsideLecturer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;

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

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

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

    .ant-modal-body {
      .delete {
        width: 424px;
        background: #ffffff;
        box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
        border-radius: 4px;
        position: absolute;
        left: 50%;
        top: 10%;
        transform: translate(-50%, -50%);

        .del_header {
          position: absolute;
          width: calc(100%);
          height: 40px;
          background: linear-gradient(rgba(78, 166, 255, 0.2) 0%,
              rgba(78, 166, 255, 0) 100%);
        }

        .del_main {
          width: 100%;
          position: relative;

          .header {
            display: flex;
            align-items: center;
            padding-top: 20px;
            padding-left: 26px;
            font-size: 16px;

            .del-icons {
              width: 16px;
              height: 16px;
              position: relative;
              margin-right: 10px;

              img {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0px;
                left: 0px;
                background-size: 100% 100%;
              }
            }

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

          .body {
            width: 100%;
            margin: 34px auto 56px auto;
            display: flex;
            justify-content: center;
            align-items: center;
          }

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

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

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

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

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


// 重置样式
.resetbtn {
  width: 100px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 14px;
  flex-shrink: 0;
  cursor: pointer;
  .search {
    width: 15px;
    height: 16px;
    margin-right: 5px;
    background: url("../../assets/images/courseManage/add0.png") no-repeat;
    background-size: 100% 100%;
  }
}

//展开收起样式
.moreidbtn {
  border: none;
  color: #4ea6ff;
  width: 80px
}

//小竖线
.line {
  float: left;
  width: 3px;
  height: 16px;
  background: #4ea6ff;
  margin-left: -10px;
  margin-top: 5px;
}

//抽屉功能
.drawaer

/* 改变所有 a-tree-select 输入框的高度 */
.ant-tree-select .ant-select-selection {
  height: 40px;
  line-height: 40px;
  /* 确保文字垂直居中 */
}

.draitem {
  width: 100%;
  height: 40px !important;
  border-radius: 8px;
  line-height: 40px;
}

.drabtn {
  cursor: pointer;
  width: 100px;
  height: 40px;
  background: #4ea6ff;
  border-radius: 8px;
  border: 0;
  margin-left: 15px;
  color: #fff;
}

::v-deep .ant-select:not(.ant-select-customize-input) .ant-select-selector {
  border-radius: 8px;
  height: 40px;
  line-height: 40px;
}

.ant-col-12 {
  height: 90px;
}

.item_inp {
  flex: 1;
  text-align: center;

  .i_upload_img {
    width: 84px;
    height: 84px;
    border-radius: 8px;
  }

  .i_upload {
    width: 100px;
    height: 100px;
    border: 1px solid #4ea6ff;
    border-radius: 50%;
    text-align: center;
    align-items: center;
    cursor: pointer;

    .addimg {
      position: relative;

      .heng {
        position: absolute;
        top: 50px;
        left: 25px;
        width: 50px;
        border: 1px solid #4ea6ff;
      }

      .shu {
        position: absolute;
        top: 25px;
        left: 50px;
        height: 50px;
        border: 1px solid #4ea6ff;
      }
    }
  }

  .ant-upload.ant-upload-select-picture-card {
    border: 0px !important;
    border-radius: 50% !important;
  }
}

.item_inp .i_upload[data-v-6b882d01] {
  border-radius: 50% !important;
}

::v-deep .ant-modal-close {
  display: none;
}
.tableBox {
padding-bottom: 20px;
margin: 20px 38px 30px;
::v-deep .ant-select-dropdown{
 display: inline-block;
}
::v-deep .ant-select-selection-item{
margin-left: 3px;
}
::v-deep .ant-pagination-options-size-changer.ant-select{
width: 84px;
}
.pa {
width: 100%;
display: flex;
justify-content: right;
}
}
.item_inp .i_upload_img[data-v-6b882d01] {
  border-radius:50% 
}
</style >