<!-- 内部授课页面 -->
<template>
  <div>
    <!-- 搜索框及按钮 -->
    <div class="filter">
      <a-form layout="inline" style="min-width: 1380px;">
        <a-form-item class="select">
            <a-input v-model:value="searchParam.name" style="width: 276px; height: 40px; border-radius: 8px"
            placeholder="请输入工号/讲师姓名进行检索" allowClear showSearch v-on:keydown.enter="enterPressHadlerSearch" >
          </a-input>
        </a-form-item>
        <a-form-item class="select">
          <a-input v-model:value="searchParam.courseName" style="width: 276px; height: 40px; border-radius: 8px"
            placeholder="请输入课程名称进行搜索" allowClear showSearch v-on:keydown.enter="enterPressHadlerSearch">
          </a-input>
        </a-form-item>
        <!-- <a-form-item class="select ">
          <a-range-picker style="width: 276px; height: 40px; border-radius: 8px" v-model:value="searchdate" separator="至"
            :placeholder="['      开始时间', '        结束时间']" @change="searchTimeChange" />
        </a-form-item> -->
        <a-form-item class="select ">
          <div class="select addTimeBox">
            <div class="addTime" >授课日期</div>
            <a-range-picker
              v-model:value="searchdate"
              style="width: 420px"
              format="YYYY-MM-DD"
              valueFormat="YYYY-MM-DD"
              separator="至"
              :placeholder="['      开始时间', '        结束时间']"
              v-on:keydown.enter="enterPressHadlerSearch"
            />
            <!--    @change="searchTimeChange" -->
          </div>
          </a-form-item>
        <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-item class="select" v-if="moreid == 2">
          <a-select style="width: 230px ;margin-bottom:20px" v-model:value="searchParam.createFrom" placeholder="录入类型"
            :options="entryTypeList" allowClear
            v-on:keydown.enter="enterPressHadlerSearch">
          </a-select>
        </a-form-item>
        <a-form-item class="select" v-if="moreid == 2">
          <a-select style="width: 230px" v-model:value="searchParam.courseStatus" placeholder="开课状态"
            :options="AuthenticationStatusList" allowClear showSearch
            v-on:keydown.enter="enterPressHadlerSearch">
          </a-select>
        </a-form-item>
        <a-form-item class="select" v-if="moreid == 2">
          <a-select style="width: 230px" placeholder="请选择讲师体系" v-model:value="searchParam.tSystemId"
            :options="LecturerSystemList" allowClear showSearch  @change="changetlevel"
            v-on:keydown.enter="enterPressHadlerSearch">
          </a-select>
        </a-form-item>
        <a-form-item class="select" v-if="moreid == 2">
          <a-select style="width: 230px" placeholder="请选择所属组织" v-model:value="searchParam.orgId"
            :options="getOrganizationList" allowClear showSearch
            v-on:keydown.enter="enterPressHadlerSearch">
          </a-select>
        </a-form-item>
        <a-form-item class="select" v-if="moreid == 2">

          
          <a-tree-select style="width: 230px"
								:fieldNames="{
									children: 'children',
									label: 'name',
									value: 'code',
								}"
								allow-clear
								:getPopupContainer="triggerNode => triggerNode.parentNode || document.body"
								v-model:value="searchParam.courseTypeId" 
								show-search 
								:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
								placeholder="请选择内容分类" 
								tree-default-expand-all 
								:tree-data="sysTypeOptions"
                v-on:keydown.enter="enterPressHadlerSearch">
							</a-tree-select>
        </a-form-item>
        <div style="width: 100%;"></div>
        <a-form-item class="select" v-if="moreid == 2">
          <a-select style="min-width: 230px ; height: auto ;margin-bottom:20px" v-model:value="searchParam.score"
            placeholder="请选择评分" :options="scoreList" allowClear showSearch mode="tags" @change="scoreChange"
            v-on:keydown.enter="enterPressHadlerSearch">
          </a-select>
        </a-form-item>
        <a-form-item class="select" v-if="moreid == 2">
          <a-select style="width: 230px" v-model:value="searchParam.studys" placeholder="授课人数" :options="studysList"
            allowClear showSearch
            v-on:keydown.enter="enterPressHadlerSearch">
          </a-select>
          <!-- <a-input v-model:value="searchParam.name" style="width: 276px; height: 40px; border-radius: 8px"
            placeholder="授课人数" allowClear showSearch>
          </a-input> -->
        </a-form-item>
      </a-form>
      <div style="width: 100%;"></div>
      <div style="display: flex; margin-bottom: 20px">
        <a-button @click="addTeacher()" type="primary" class="langbtn">
          <FolderAddOutlined /> 添加授课记录
        </a-button>
        <!-- <a-upload multiple :headers="headers" :show-upload-list="false" :before-upload="beforeUpload2"> -->
          <a-button class="resetbtn" @click="handleImport()" >
            <DownloadOutlined /> 导入
          </a-button>
        <!-- </a-upload> -->
        <a-button @click="handleExport()" class="resetbtn">
          <UploadOutlined /> 导出
        </a-button>
      </div>
      <!-- 表格 -->
      <div style="padding: 10px 0">
        <a-table :header-cell-style="{ 'text-align': 'center' }" style="border: 1px solid #f2f6fe" :columns="columns"
          :scroll="{ x: 1500 }" :data-source="tableData" :loading="tableLoading" @expand="expandTable"
          :pagination="false">
          <template #bodyCell="{ record, column }">
            <template v-if="column.key === 'teaching'">
              <a-space style="display:flex ;justify-content: space-around;  ">
                  <span>{{ (record?.teaching/60).toFixed(2) || '-' }}</span> 
              </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 type="link" @click="() => handleModify(record, String(record.courseform))"   v-if="record.createFrom == 1 && record.courseStatus == 0 ">编辑 </a-button>
                <a-button type="link" v-if="record.createFrom == 1" @click="() => deleteModal(record, String(record.courseform))">删除</a-button>
                <!-- <a-button type="link" @click="() => deleteModal(record, String(record.courseform))">删除</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 v-model:visible="teacherdialog" placement="right" @closa="cancelTeacherDialog" :maskClosable="true" 
       width="60%" :title="teacherdialogtitle">
      <a-form :model="formParam" :rules="rules" layout="vertical"  ref="formRef">
        <!-- 讲师姓名  teacher  组织 orgName-->
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="讲师名称" name="name">
                <SearchTeacher @tlevel="tlevelChange" v-model:value="formParam.name" v-model:lable="formParam.orgNames"
                v-model:system="tSystemNames" v-model:level="formParam.tlevelId"></SearchTeacher>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <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>
        <!-- 讲师体系  tsystemName  级别 tlevelId -->
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="讲师体系" name="tsystemName">
              <a-input disabled v-model:value="tSystemNames.systemName" class="draitem"
                  placeholder="自动带出讲师的体系" allowClear showSearch>
                </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="讲师级别" name="tlevelName">
                <a-input disabled v-model:value="formParam.tlevelName" class="draitem"
                  placeholder="自动带出讲师级别" allowClear showSearch>
                </a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <!-- 内容分类 courseTypeId  课程名称 name  -->
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="内容分类" name="courseTypeId">
              <a-tree-select
								:fieldNames="{
									children: 'children', 
									label: 'name',
									value: 'code',
								}"
								allow-clear
								:getPopupContainer="triggerNode => triggerNode.parentNode || document.body"
								v-model:value="formParam.courseTypeId" 
								show-search 
								:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
								placeholder="请选择内容分类" 
								tree-default-expand-all 
								:tree-data="sysTypeOptions"
                @change="treetype"
                >
							</a-tree-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="课程名称：" name="courseName">
              <a-input class="draitem" v-model:value="formParam.courseName" placeholder="请输入后搜索面授课" allowClear showSearch :maxlength="20"   showCount      @blur="sendName"
              >
              </a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <!-- 授课日期 teachingDate     开课状态 courseStatus -->
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="授课/课程日期 :" name="teachingDate">
              <a-date-picker class="draitem" v-model:value="teachingDate" style="width:100%" format="YYYY-MM-DD HH:mm" :show-time="{ format: 'HH:mm' }"
              type="datetime"
                placeholder="请选择课程日期"  />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="开课状态">
              <a-radio-group v-model:value="formParam.courseStatus" class="draitem">
                <a-radio :value="0">未开课</a-radio>
                <a-radio :value="1">已开课</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <!-- 授课时长 teaching  评分 score-->
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="授课时长" name="teaching">
              <a-input v-model:value="formParam.teaching" style="width:80%; height: 40px; border-radius: 8px ; "
                placeholder="0" allowClear showSearch suffix="分钟" 
                :maxLength="8"
                 @blur="clearNonNumber">
              </a-input>
              <span style="margin-left: 5px ;" v-if="formParam.teaching != null">{{ (formParam.teaching / 60
              ).toFixed(2) }}小时</span>
              <span style="margin-left: 5px ;" v-if="formParam.teaching == null">0.00小时</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="评分" name="score">
              <!-- <a-input class="draitem" v-model:value="formParam.score"  @blur="clearscoreNumber" placeholder="" allowClear showSearch>
              </a-input> -->
                   <a-input-number v-model:value="formParam.score" :min="0" :max="10" 
              style="width:100%; height: 40px; border-radius: 8px ; " />
            </a-form-item>
          </a-col>
        </a-row>
        <!-- 参训人数 studys-->
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="参训人数" name="studys">
              <a-input v-model:value="formParam.studys" class="draitem" placeholder="0 "   :maxLength="8"
              @blur="clearstudysNumber" allowClear showSearch>
              </a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <!-- 备注 remark -->
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="备注">
              <a-textarea v-model:value="formParam.remark" showCount :maxlength="200"
              @blur="sendRemark"
                style="width: 100%; height: 100px; border-radius: 8px" placeholder="请输入" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1,
      }">
        <a-button class="drabtn" @click="cancelTeacherDialog">取消</a-button>
        <a-button class="drabtn" type="primary" @click="createTeacherDialog" :loading="buttonLoading">保存
        </a-button>
      </div>
    </a-drawer>
    <!--查看授课详情 -->
    <a-drawer v-model:visible="teachingdialog" placement="right" @closa="cancelTeachingDialog" :maskClosable="true"
      width="60%" title="查看讲师授课记录">
      <span class="line"></span>
      <span>讲师信息</span>
      <a-descriptions bordered :column="2" :contentStyle="rowCenter" :labelStyle="rowCenter">
        <a-descriptions-item label="讲师名称">{{ formParam.teacherName }}</a-descriptions-item>
        <a-descriptions-item label="讲师工号">{{ formParam.userNo }}</a-descriptions-item>
        <a-descriptions-item label="讲师组织" :span="2">{{ formParam.orgName }}</a-descriptions-item>
        <a-descriptions-item label="讲师体系">{{ formParam.tsystemName }}</a-descriptions-item>
        <a-descriptions-item label="讲师级别">{{ formParam.tlevelName
 }}</a-descriptions-item>
        <a-descriptions-item label="录入方式">
          {{  formParam.createFrom == 0 ? '系统生成' : formParam.createFrom == 1 ? '手动录入' : '-' }}</a-descriptions-item>
        <a-descriptions-item label="课程类型">{{ formParam.type == 1 ? '在线课' : formParam.type == 0 ? '面授课' : '' }}</a-descriptions-item>
        <a-descriptions-item label="课程名称">{{ formParam.courseName }}</a-descriptions-item>
        <a-descriptions-item label="开课状态">{{ formParam.courseStatus == 0? '未开课' : formParam.courseStatus == 1
          ? '已开课' : '' }}</a-descriptions-item>
        <a-descriptions-item label="授课时长  ">
          <span > {{ formParam.teaching }} 分钟</span> 
          <span style="margin-left: 10px ;" v-if="formParam.teaching != '0'">({{ (formParam.teaching / 60
          ).toFixed(2) }}小时)</span> </a-descriptions-item>
        <a-descriptions-item label="授课/课程日期  ">{{ formParam.teachingDate }}</a-descriptions-item>
        <a-descriptions-item label="参训人数  ">{{ formParam.studys }}</a-descriptions-item>
        <a-descriptions-item label="评分  ">{{ formParam.score }}</a-descriptions-item>
        <a-descriptions-item label="内容分类">{{ formParam.courseTypeName }}</a-descriptions-item>
        <a-descriptions-item label="备注  ">{{ formParam.remark }}</a-descriptions-item>
      </a-descriptions>
      <div style="margin-top:20px ;line-height: 24px;"  >
      <span class="line"></span>
      <span>讲师费发放情况</span>
      </div>
      <a-table :header-cell-style="{ 'text-align': 'center' }" style="border: 1px solid #f2f6fe" :columns="column"
        :data-source="tableDatas"  :pagination="false">
        <template #bodyCell="{ record, column }">
          <template v-if="column.key === 'operation'">
            <a-space>
              <!-- <a-button type="link" @click="() => handleLooka(record, String(record.courseform))">查看</a-button> -->
            </a-space>
          </template>
        </template>
      </a-table>
      <div :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1,
      }">
        <a-button class="drabtn" @click="cancelTeachingDialog">取消</a-button>
        <a-button class="drabtn" type="primary" @click="cancelTeachingDialog" :loading="buttonLoading">返回
        </a-button>
      </div>
    </a-drawer>
    <!-- 删除功能弹窗 -->
    <div>
      <a-modal v-model:visible="deleteTeacherdialog" :footer="null" :closable="close" wrapClassName="canclestu1"
        centered="true">
        <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>您确定要删除此条记录吗</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>
    <ImportWork v-model:showWork="showWork" :url="'/admin/export/importInTeacherRecord'" :title="title"></ImportWork>
    <!-- <div> <Upload/> </div>         -->
  </div>
</template>
<script lang="jsx">
import { reactive, toRefs, ref,computed ,watch ,onMounted} from "vue";
import moment, { Moment } from 'moment';
import { useRouter,useRoute  } from "vue-router";
import {
  RightOutlined,
  UpOutlined,
  UploadOutlined,
  FolderAddOutlined,
  DownloadOutlined
} from '@ant-design/icons-vue';
import dayjs from "dayjs";
// import Editor from "@/components/project/Editor";
import ProjectManager from "@/components/project/ProjectManagerNew";
import { message } from "ant-design-vue";
import { getTeacherSystemList, infoteacher, getTeacherExpertise } from "../../api/Lecturer";
import { getNewInTeacherCourseList, getOrganization, getTeacherCourseList, insertInTeacherCourse, updateInTeacherCourse,  deleteInTeacherCourse } from "../../api/Teaching";
import{getExpenseByCourseId} from "../../api/lecturerFeeManagement";
// import AddTeacher from "../../components/drawers/project/AddTeacher"
import ImportWork from "../../components/lecturer/ImportWork.vue";
import { fileUp } from "../../api/Lecturer";
import SearchTeacher from "@/components/project/SearchTeacher";
import { useStore } from "vuex";
export default {
  name: "InsideTeaching",
  components: {
    // AddTeacher,
    // Editor,
    // Upload,
    ImportWork,
    SearchTeacher,
    // Editor,
    // ImageUpload
    ProjectManager,
    RightOutlined, //图标--展开
    UpOutlined,//图标--收起
    UploadOutlined,//图标--导出
    DownloadOutlined,//图标-导入
    FolderAddOutlined,//图标--新增
  },
  setup() {
    onMounted(() => {
      const search = sessionStorage.getItem('searchLecturer')
      if(route.query.activeKey == 1){
        state.moreid = 2
        state.searchParam = JSON.parse(search)
      }
      searchSubmit()
    })
    const route = useRoute()
    const formRef = ref();
    const router = useRouter();
    const state = reactive({
      moreid: 1,
      title:'导入内部授课记录',
      vf: false,
      log: false,
      close: false,
      showWork: false,
      currentPage1: 1,
      pageSize1: 10,
      tableLoading: false,
      delTeacherId: null, //删除id确认
      userNoid: null,    //详情工号确认 
      lookTeacherId: null, //详情id确认
      deleteTeacherdialog: false, //删除弹窗
      teacherdialog1: null,
      teacherdialog: false,  //控制讲师弹窗
      teacherdialogtitle: '',//讲师弹框title内容
      teachingdialog: false,//控制查看抽屉
      pageSizeOptions: ['10', '20', '30', '50'], //下拉选择每页显示多少条
      pageSize: 10,
      tableDataTotal: -1,//table列表总条数
      searchdate: undefined, //选择时间
      teachingDate: undefined, //选择时间
      beginTime: null, //开始时间
      endTime: null, //结束时间
      tSystemNames:{
        systemName:null,
        levelVoList: []
      },
      formParam: {
        courseStatus: 1,
        createFrom: 1,
        teaching: null,
        name:null,
        teacherName: null,
        teachingDate:null
      },
      startTime:null,
      searchParam: 
      { "recordType": 1, "pageNo": 1, "pageSize": 10, "managerId": null, "name": null, "createFrom": null, "courseStatus": null, "orgId": null, "tSystemId": null, "endTime": null, "beginTime":null, "studys": [], "score": null }
    })
    // watch(()=>state.formParam.name,(val)=>{
    //     state.formParam.teacherName = val?.split('/')[1]
    //   }
    //   )
    //获取所属组织
    const getOrganizationList = ref([
      //   { value: 0, systemName: "讲师体系" },
    ]);
    //获取所属组织
    const getOrganizationLista = () => {
      // console.log('getOrganizationList')
      let obj={
        pageNo:1,
        pageSize:1000
      }
      getOrganization(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.affiliationName,
            };
            array.push(obj);
          });
          getOrganizationList.value = array;
        }
      })
    }
    getOrganizationLista()
    const LecturerSystemList = ref([
      //   { value: 0, systemName: "讲师体系" },
    ]);
    //获取讲师体系列表
    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;
        }
        console.log("获取讲师", LecturerSystemList);
      })
    }
    LecturerSystemLista()
    //获取内容分类
    const store = useStore();
    const sysTypeOptions = computed(() => store.state.content_type);
    const treetype =(val,lab)=>{
      console.log(lab)
      state.formParam.courseTypeName =lab.toString()
    }
    const OnTheJobStatusList = ref([
      { value: 1, label: "项目开课" },
      { value: 2, label: "路径开课" },
      { value: 3, label: "面授开课" },
    ])
    const AuthenticationStatusList = ref([
    { value: '', label: "全部" },
      { value:0, label: "未开课" },
      { value: 1, label: "已开课" },
    ])
    const entryTypeList = ref([
    { value: '', label: "全部" },
      { value: 0, label: "系统生成" },
      { value: 1, label: "手动录入" },
    ])
    const scoreList = ref([
      { value: '', label: "全部" },
      { value: '90-100', label: "90~100" },
      { value: '80-90', label: "80~90" },
      { value: '70-80', label: "70~80" },
      { value: '60-70', label: "60~70" },
      { value: '10-50', label: "10~50" },
    ])
    const studysList = ref([
      { value: '0-30', label: "0~30" },
      { value: '0-50', label: "0~50" },
      { value: '0-70', label: "0~70" },
      { value: '0-100', label: "0~100" },
      { value: '0-150', label: "0~150" },
      { value: '0-200', label: "0~200" },
      { value: '0-300', label: "0~300 " },
    ])
    const scoreChange = (e) => {
      if(e.length!==0){
      e.map((item)=>{
        if(item !== ''){
          scoreList.value.map((item) => {
          item.disabled = false
        })
        }
        else {
          scoreList.value.map((item) => {
          if (item.value !== '') {
            item.disabled = true
          }
        })
      }
      })}
      else{
        scoreList.value.map((item) => {
          item.disabled = false
        })
      }
      // if (e == '0') {
      //   scoreList.value.map((item) => {
      //     if (item.value !== '0') {
      //       item.disabled = true
      //     }
      //   })
      // }
      // else {
      //   scoreList.value.map((item) => {
      //     item.disabled = false
      //   })
      // }
    }
    const columns = ref([

      {
        title: '讲师姓名 ',
        dataIndex: 'teacherName',
        key: 'teacherName',
        ellipsis: true, align: "center",
        width: 120,
      },
      {
        title: '讲师工号 ',
        dataIndex: 'userNo',
        key: 'userNo',
        ellipsis: true, align: "center",
        width: 120,
      },
      {
        title: '讲师体系 ',
        dataIndex: 'tsystemName',
        key: 'tsystemName',
        ellipsis: true, align: "center",
        width: 120,
      },
      {
        title: '所属组织 ',
        dataIndex: 'orgName',
        key: 'orgName',
        ellipsis: true, align: "center",
        width: 200,
        //  customRender: (value, record) => {
        //   return (
        //     <div>
        //       {value.record.orgName}
        //     </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: 'courseName',
        key: 'courseName ',
        ellipsis: true, align: "center",
        width: 120,
      },
      {
        title: '课程类型 ',
        dataIndex: 'type',
        key: 'type',
      ellipsis: true, align: "center",
        width: 120,
        customRender: (value) => {
          return (
            <div>
              {value.record.type == "1" || value.record.type == "0" 
                ? {
                  "1": "在线课",
                  "0": "面授课",
                }[value.record.type + ""] || ""
                : "-"}
            </div>
          )
        }
      },
      {
        title: '授课时间',
        dataIndex: 'teachingDate',
        key: 'teachingDate',
        ellipsis: true, align: "center",
        width: 120,
      },
      {
        title: '开课状态 ',
        dataIndex: 'courseStatus',
        key: 'courseStatus',
        ellipsis: true, align: "center",
        width: 120,
        customRender: (value) => {
          return (
            <div>
              {value.record.courseStatus == 0 || value.record.courseStatus == 1
                ? {
                  "0": "未开课",
                  "1": "已开课",
                }[value.record.courseStatus + ""] || ""
                : "-"}
            </div>
          )
        }
      },
      {
        title: '内容分类',
        dataIndex: 'courseTypeName',
        key: 'courseTypeName',
        ellipsis: true, align: "center",
        width: 120,
      },
      {
        title: '授课时长(H) ',
        dataIndex: 'teaching',
        key: 'teaching',
        ellipsis: true, align: "center",
        scopedSlots: { customRender: "teaching" },
        width: 120,
      },
      {
        title: '参训人数',
        dataIndex: 'studys',
        key: 'studys',
        ellipsis: true, align: "center",
        width: 120,
      },
      {
        title: '评分',
        dataIndex: 'score',
        key: 'score',
        ellipsis: true, align: "center",
        width: 120,
      },
      {
        title: '是否生成课时费 ',
        dataIndex: 'createdFee',
        key: 'createdFee',
        ellipsis: true, align: "center",
        width: 150,
        customRender: (value) => {
          return (
            <div>
              {value.record.createdFee == 0 || value.record.createdFee == 1
                ? {
                  "0": "否",
                  "1": "是",
                }[value.record.feeCreated + ""] || ""
                : "-"}
            </div>
          )
        }
      },
      {
        title: '操作 ',
        dataIndex: 'operation',
        key: 'operation',
        ellipsis: true, align: "right",
        width: 200,
        fixed: "right",
        scopedSlots: { customRender: "action" },
      },
    ])
    //列表数据
    const tableData = ref([

    ])
    const rules = {
      // name: [{ required: true, message:'',log: '讲师不能为空' }],
      // orgName: [{ required: true, message: '',log:'讲师组织不能为空' }],
      // tlevelName: [{ required: true, message: '',log:'讲师级别不能为空' }],
      // tsystemName: [{ required: true, message: '',log:'讲师体系不能为空' }],
      courseTypeId: [{ required: true, message: '',log:'内容分类不能为空' }],
      courseName: [{ required: true, message: '',log:'课程名称不能为空' }],
      teachingDate: [{ required: true, message: '', log: '授课日期不能为空' }],
      teaching: [{ required: true, message:'',log: '授课时长不能为空' }],
      courseStatus: [{ required: true, message: '',log:'开课状态不能为空' }],
    }
    //展开切换
    const handlemoreid = () => {
      if (state.moreid == 1) {
        state.moreid = 2
      }
      else if (state.moreid == 2) {
        state.moreid = 1
        state.searchParam.createFrom = null
        state.searchParam.courseStatus =null
        state.searchParam.orgId = null
        state.searchParam.tSystemId = null
        state.searchParam.id = null
        state.searchParam.score = []
        state.searchParam.studys = []
      }
    }
    // 搜索
    const searchSubmit = () => {
      getTableDate();
    };
     //修改时间
//     function searchTimeChange(time, timeStr) {
//       // let startTime = timeStr[0]
//       // let endTime = timeStr[1] ;
//       // state.startTime = new Date(startTime).getTime();
//       // state.endTime = new Date(endTime).getTime();
//       // // state.searchParam.beginTime = new Date(beginTime).getTime() ;
//       // // state.searchParam.endTime = new Date(endTime).getTime() ;
//       // state.searchParam.beginTime = state.startTime ? state.startTime : null,
//       //   state.searchParam.endTime = state.endTime ? state.endTime : null
// }

    // const editTimeChange = (e, date) => {
    //   console.log(date);
    //   state.beginTime = date;
    //   // console.log(date, state.searchParam.beginTime, state.searchParam.endTime);
    // };
    //重置
    const searchReset = () => {
      state.searchdate= undefined,
      state.searchParam = {
        recordType: 1,
        pageNo: 1,
        pageSize: 10,
        managerId: null,
        name: null,
        courseName:null,
        createFrom: null,
        courseStatus:null,
        orgId: null,
        tSystemId: null,
        endTime: null,
        beginTime: null,
        studys: [],
        score: undefined,
        status:null,
      };
      getTableDate();
    };
    //  List接口数据
    const getTableDate = (obj) => {
      state.tableLoading = true
      let objA = { ...state.searchParam };
         objA.beginTime = state.searchdate ? dayjs(state.searchdate[0]).format("YYYY-MM-DD") : "",
        objA.endTime =  state.searchdate ? dayjs(state.searchdate[1]).format("YYYY-MM-DD") : "",
      // objA.beginTime = state.searchParam.beginTime !== null ? dayjs(new Date(state.searchParam.beginTime).getTime()).format("YYYY-MM-DD") : "",
      //   objA.endTime = state.searchParam.endTime !== null ? dayjs(new Date(state.searchParam.endTime).getTime()).format("YYYY-MM-DD") : "",
        getNewInTeacherCourseList(objA)
          .then((res) => {
            tableData.value = res.data.data.records
            state.tableDataTotal = Number(res.data.data.total);
            state.tableLoading = false
            console.log("获取tableData", tableData);
          })
          .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.teacherdialog1 = 0
      state.teacherdialog = true;
      state.teacherdialogtitle = '添加授课记录'
      state.vf = true
    }
    //修改信息弹窗
    const handleModify = (record) => {
      state.teacherdialog = true;
      state.teacherdialogtitle = '编辑授课记录'
      state.lookTeacherId = record.teacherId
      state.vf = false
      TeacherSystem1(record)
    }
    async function validateField(name) {
      return new Promise((resolve) => {
        formRef.value.validateFields([name])
          .then(() => {
            resolve(false);
          })
          .catch(() => {
            resolve(true);
          });
      });
    }
  const tlevelChange = (e) => {
    state.formParam.tlevelName = e?.tlevelName
    state.formParam.tlevelId = e?.tlevelId
  }
  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 createTeacherDialog = async () => {
    state.formParam.teachingDate = state.teachingDate ? dayjs(state.teachingDate).format("YYYY-MM-DD HH:mm").toString() : ""
    state.formParam.teacherName = state.formParam.name?.split('/')[0]
    state.formParam.userNo  =state.formParam.name?.split('/')[1]
      state.formParam.tsystemName = state.tSystemNames.systemName
      state.formParam.tsystemId = state.tSystemNames?.systemId
      const formItemNames = Object.keys(rules);
      for(let i=0;i<formItemNames.length;i++){
        const result = await validateField(formItemNames[i]);
        if (result) {
          return message.error(rules[formItemNames[i]][0].log)
        }
      }
      state.formParam.orgName = state.formParam.orgNames
      state.formParam = {...state.formParam,...state.tSystemNames}
      console.log( state.formParam)
      if (state.vf == false) {
        updateInTeacherCourse(state.formParam).then(response => {
            message.success("编辑成功");
            state.teacherdialog = false;
            cancel()
            getTableDate(); 
          });
        }
        else {
          insertInTeacherCourse(state.formParam)
            .then((res) => {
              message.success("添加成功");
              state.teacherdialog = false;
              cancel()
        getTableDate(); 
            }).catch((err) => {
              console.log(err);
            });
        }
    };
    //删除弹窗
    const deleteModal = (record) => {
      state.deleteTeacherdialog = true
      state.delTeacherId = record.id

    };

    //确认删除
    const closeDeleteTeacher = () => {
      //调用删除接口
      // let obj = {
      //   offcourseId: state.delTeacherId,
      //   recordType: 1
      // }
      deleteInTeacherCourse(state.delTeacherId).then((res) => {
        if (res.data.code == 200) {
          message.success("删除成功");
          state.deleteTeacherdialog = false
          getTableDate();
        }
      })
    }

    //取消按钮 清空输入的数据
    const cancelTeacherDialog = () => {
      if (state.teacherdialog = true) {
        formRef.value.resetFields();
        state.teacherdialog = false
        cancel()
      }
      // state.deleteTeacherdialog = false
    };
    const cancelTeacherDialog1 = () => {
      state.deleteTeacherdialog = false
    };
    //清空数据
    const cancel = () => {
      state.formParam = {
        recordType: 1,
        courseStatus:1,
        teacher: null,
        orgName: null,
        tsystemName: null,
        tlevelId: null,
        courseName: null,
        teaching:null,
        studys: null,
        score: null,
        type: null,
        remark: null,
        offcourseId: null,
        createFrom: null,
        teachingDate:null,
      }
      state.teachingDate=null
      state.tSystemNames = {
        systemName:null,
        levelVoList: []
      }
    }
    // //页面内部姓名
    // const infoteacherList = ref([
    // ]);
    // const getinfoteacher = (obj) => {
    //   state.tableLoading = true
    //   infoteacher()
    //     .then((res) => {
    //       infoteacherList.value = res.data.data.records
    //     })
    // };
    function managerChange(e, l, d, t, orgName) {
      console.log(e, l);
      state.searchParam.userNo = d;
      state.searchParam.name = t;
      // state.searchParam.trainorgName=orgName
    }
    //表格内查看数据操作
    const handleLook = (record) => {
      // state.teacherdialog1 = 1
      state.teachingdialog = true;
      state.teacherdialogtitle = '查看详情'
      state.lookTeacherId = record.teacherId
      TeacherSystem1(record)
      gettableDatas(record)
      // let id = record.userNo
      // router.push({ path: '/insideteachingdetail', query: { id  } })
      // router.push({ path: '/InsideTeachingDetail' })
    }
    const cancelTeachingDialog = () => {
      state.teachingdialog = false;
    }
    //内部授课详情
    // const TeacherSystem = (record) => {
    //   state.formParam = {
    //     recordType: 1,
    //     name: record.name,
    //     userNo: record.userNo,
    //     orgName: record.orgName,
    //     tsystemName: record.tsystemName,
    //     tlevelId: record.tlevelId,
    //     type: record.type,
    //     courseName: record.courseName,
    //     courseStatus:record.courseStatus,
    //     beginTime: dayjs(record.beginTime, 'YYYY-MM-DD'),
    //     // ref< moment.Moment >(moment(record.beginTime,'YYYY-MM-DD')),
    //     //  record.beginTime,
    //     teaching: record.teaching,
    //     score: record.score,
    //     studys: record.studys,
    //     remark: record.remark,
    //     createFrom: record.createFrom
    //   }
    //   console.log(state.formParam)
    // }
     //内部授课详情
     const TeacherSystem1 = (record) => {
      getTeacherCourseList({id:record.id}).then((res) => {
        state.formParam = res.data.data
        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.levelVoList
          state.formParam.tlevelName = res.data.data.tlevelName
          state.formParam.tlevelId = res.data.data.tlevelId
          state.formParam.name = res.data.data.teacherName+'/'+res.data.data.userNo
          state.formParam.orgLists = res.data.data.expertiseNames?.split(',').map(item=>({ name: item }))
          state.teachingDate=dayjs(res.data.data.teachingDate, 'YYYY-MM-DD HH:mm' ),
          state.formParam.orgNames = state.formParam.orgName
        console.log( state.formParam);
      })
        .catch((err) => {
        });
      // state.formParam = {
      //   recordType: 1,
      //   name: record.name,
      //   userNo: record.userNo,
      //   organizationName: record.organizationName,
      //   systemName: record.systemName,
      //   sLevelName: record.sLevelName,
      //   type: record.type,
      //   courseName: record.courseName,
      //   courseStatus:record.courseStatus,
      //   beginTime:record.beginTime,
      //   // ref< moment.Moment >(moment(record.beginTime,'YYYY-MM-DD')),
      //   //  record.beginTime,
      //   teaching: record.teaching,
      //   score: record.score,
      //   studys: record.studys,
      //   remark: record.remark,
      //   createFrom: record.createFrom
      // }
      console.log(state.formParam)
    }
    const column = ref([{
      title: '基准课酬 ',
      dataIndex: 'levelPay',
      key: 'levelPay',
      ellipsis: true, align: "center",
      width: 120,
    }, {
      title: '计划费用 ',
      dataIndex: 'expense',
      key: 'expense',
      ellipsis: true, align: "center",
      width: 120,
    },
    {
      title: '应发费用 ',
      dataIndex: 'payableExpense',
      key: 'payableExpense',
      ellipsis: true, align: "center",
      width: 120,
    },
    {
      title: '状态 ',
      dataIndex: 'status',
      key: 'status',
      ellipsis: true, align: "center",
      width: 120,
      customRender: (value) => {
        return (
          <div  >
            {value.record.status == "A10" || value.record.status == "A20" || value.record.status == "A30" || value.record.status == "E10" || value.record.status == "S20"
              ? {
                "A10": "待审核",
                "A20": "已提交",
                "A30": "审核中",
                "E10": "审核打回",
                "S20": "审核通过",
              }[value.record.status + ""] || ""
              : "-"}
          </div>
        )
      }
    },
    // {
    //   title: '操作 ',
    //   dataIndex: 'operation',
    //   key: 'operation',
    //   ellipsis: true, align: "right",
    //   width: 400,
    //   scopedSlots: { customRender: "action" },
    // },
    ])
    const gettableDatas = (record) => {
      getExpenseByCourseId({ id: record.id })
        .then((res) => {
          console.log(res)
          tableDatas.value = res.data.data.records
          state.tableDataTotal = Number(res.data.data.total);
        }).catch(err=>{
          message.destroy()
          message.error(err.data.msg)
        })
    }
    const tableDatas = ref([])
   
    // function managerChange(e, l, d, t, orgName) {
    //   console.log(e, l);
    //   state.searchParam.userNo = d;
    //   state.searchParam.name = t;
    //   // state.searchParam.trainorgName=orgName
    // }
    //导出功能
    const handleExport = () => {
      window.open(
        `${process.env.VUE_APP_BASE_API}/admin/export/exportInTeacherRecord?pageNo=${state.searchParam.pageNo}&pageSize=${state.searchParam.pageSize}&recordType=1&name=${state.searchParam.name ? state.searchParam.name :''}&courseName=${state.searchParam.courseName ? state.searchParam.courseName :''}&createFrom=${state.searchParam.createFrom ? state.searchParam.createFrom : ''}&courseStatus=${state.searchParam.courseStatus ? state.searchParam.courseStatus :''}&tSystemId=${state.searchParam.tSystemId ? state.searchParam.tSystemId : ''}&beginTime=${state.searchParam.beginTime ? state.searchParam.beginTime : ''}&endTime=${state.searchParam.endTime ? state.searchParam.endTime : ''}&orgId=${state.searchParam.orgId ? state.searchParam.orgId :''}&courseTypeId=${state.searchParam.courseTypeId ? state.searchParam.courseTypeId : ''}&score=${state.searchParam.score ? state.searchParam.score : ''}&studys=${state.searchParam.studys ? state.searchParam.studys : ' '}
      `)
      console.log(state.searchParam.name,state.searchParam,'参数')
    }
    const handleImport = () => {
      state.showWork = true
    }
    const beforeUpload2 = (file) => {
      console.log(file);
      const fileType = [
        "xls",
        "xlsx",
        "zip",
      ];
      if (!fileType.includes(file.name.split(".")[1])) {
        message.error(
          "仅支持.xls,.xlsx,.zip格式!"
        );
        return false;
      }

      const formData = new FormData();
      formData.append("file", file);
      console.log(file);
      fileUp(formData).then((res) => {
        if (res.data.code === 200) {
          state.imgList.push({
            img: res.data.data,
            name: file.name,
            size: file.size,
          });
          console.log(state.imgList);
          // state.hasImgName = res.data.data;
        }
      });
      return false;
    };
    const clearNonNumber = () => {
      state.formParam.teaching = state.formParam.teaching.replace(/\D/g, '');
      // state.formParam.teaching
    }
    const clearscoreNumber = () => {
      state.formParam.score = state.formParam.score.replace(/\D/g, '');
    }
    const clearstudysNumber = () => {
      state.formParam.studys = state.formParam.studys.replace(/\D/g, '');
    }
    //回车
const enterPressHadlerSearch = e => {
  console.log("e",e);
    if (e.keyCode === 13) {
      searchSubmit()

    }
};
const sendName=()=>{
      state.formParam.courseName = state.formParam.courseName.replace(/\s/g, '');
    }
    const sendRemark=()=>{
      state.formParam.remark = state.formParam.remark.replace(/\s/g, '');
    }
    return {
      ...toRefs(state),
      sendName,
      sendRemark,
      sysTypeOptions,
      enterPressHadlerSearch,
      treetype,
      validateField,
      // managerChange,
      clearNonNumber,
      clearscoreNumber,
      clearstudysNumber,
      beforeUpload2,
      rules,
      formRef,
      column,
      tableDatas,
      gettableDatas,
      handlemoreid,
      handleExport,
      handleImport,
      LecturerSystemList,
      scoreList,
      studysList,
      OnTheJobStatusList,
      AuthenticationStatusList,
      entryTypeList,
      searchSubmit,
      searchReset,
      columns,
      tableData,
      changePagination,
      addTeacher,
      cancelTeacherDialog,
      cancelTeacherDialog1,
      handleLook,
      cancel,
      deleteModal,
      handleModify,
      closeDeleteTeacher,
      createTeacherDialog,
      tlevelChange,
      getTableDate, //list接口数据调用
      // getStu
      LecturerSystemLista,
      // TeacherSystem,
      TeacherSystem1,
      getOrganizationLista,
      getOrganizationList, 
      // searchTimeChange,
      cancelTeachingDialog,
      // editTimeChange,
      scoreChange
    }
  },
};
</script>
<style lang="scss" scoped >
.select .ant-picker {
  width: 410px !important;
}

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

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

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

      ::v-deep  .ant-picker-range .ant-picker-active-bar {
          margin-left: 85px  !important;
        }
      }
.addTimeBox .ant-picker{
  padding-left: 85px;
}
//导出按钮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;
}

.InsideTeaching {
  width: 100%;
  height: 100%;


  .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;
            }
          }
        }
      }
    }
  }
}

.CreatePath {
  .out {
    z-index: 9999;
    display: block;
    position: absolute;
    top: 90px;
    width: 1080px !important;
    height: 650px;
    overflow: auto;
    background-color: #fff;

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

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

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

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

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

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

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

//添加样式
.langbtn {
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 14px;
  flex-shrink: 0;
  cursor: pointer;
}

// 重置样式
.resetbtn {
  width: 100px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 14px;
  flex-shrink: 0;
  cursor: pointer;
}

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

//小竖线
.line {
  float: left;
  width: 3px;
  height: 25px;
  background: #4ea6ff;
  border-radius: 30%;
  margin-right: 5px;
}

//抽屉功能
.drawaer // /* 改变所有 a-tree-select 输入框的高度 */
//   ::v-deep  .ant-select:not(.ant-select-customize-input) .ant-select-selector{
//   height: 40px;
//   line-height: 40px;
//   border-radius: 8px

//   /* 确保文字垂直居中 */
// }
::v-deep .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
  height: 40px !important;
  line-height: 40px;
  border-radius: 8px
}

// 抽屉内样式
.draitem {
  width: 100%;
  height: 40px !important;
  border-radius: 8px;
  line-height: 40px;
}

.drabtn {
  height: 40px;
  width: 80px;
  border-radius: 8px;
  margin-right: 20px
}

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

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

::v-deep .ant-select-selection-overflow-item {
  margin-top: -2px;
}

::v-deep .ant-select-multiple .ant-select-selection-item {
  height: 34px
}
.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;
}
}
</style>