<template>
  <div class="courseManage">
    <div class="headerf">
      <!-- 搜索框及按钮 -->
      <div class="filter">
        <div class="filterItems">
          <div style="display: flex; width: 100%;">
            <div class="pathnameInp">
              <a-input v-model:value="courseNameOrTeacherName" style="width: 276px; height: 40px; border-radius: 8px;"
                placeholder="请输入课程名称或授课教师" />
            </div>
            <div class="select">
              <a-select v-model:value="courseSource" style="width: 200px" placeholder="请选择课程类型" allowClear>
                <a-select-option value="1">内部课</a-select-option>
                <a-select-option value="2">外部课</a-select-option>
              </a-select>
            </div>
            <div class="select">
              <a-tree-select v-model:value="sysTypeId" show-search style="width: 200px"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="请选择内容分类" allow-clear
                tree-default-expand-all :fieldNames="{
                  children: 'children',
                  label: 'name',
                  value: 'code',
                }" :tree-data="sysTypeOptions">
              </a-tree-select>
            </div>
            <!-- 添加年份选择 -->
            <div class="select yearSelect">
              <a-select v-model:value="years" mode="multiple" style="width: 200px" placeholder="请选择年份"
                :options="yearOptions" allow-clear :max-tag-count="1">
              </a-select>
            </div>
            <!-- 导入标记弹窗 -->
            <!-- <a-modal v-model:visible="importMarkVisible" title="导入标记" @ok="handleImportMarkOk"
              @cancel="handleImportMarkCancel">
              <a-form :model="importMarkForm" layout="vertical">
                <a-form-item label="课程名称" name="courseName">
                  <a-input v-model:value="importMarkForm.courseName" placeholder="请输入课程名称" />
                </a-form-item>
              </a-form>
            </a-modal> -->
            <a-modal v-model:visible="importMarkVisible" :closable="closableQR" wrapClassName="sofModal" :footer="null"
              style="margin-top: 400px">
              <div class="selectonlineface" :style="{ display: importMarkVisible ? 'block' : 'none' }">
                <div class="of_header"></div>
                <div class="of_main">
                  <div class="ofm_header">
                    <span>批量标记</span>
                    <div class="close_exit" @click="importMarkVisible = false"></div>
                  </div>
                  <div class="ofm_body">
                    <div class="ofmb_items">
                      <div class="signbox">
                        <div class="sign">
                          <img src="@/assets/images/coursewareManage/asterisk.png" alt="" />
                        </div>
                        <span style="margin-right: 3px">课程名称</span>
                      </div>
                      <div class="in b_input">
                        <a-input v-model:value="xzinputV1" maxlength="200"
                          style="width: 440px; height: 40px; border-radius: 8px" placeholder="请输入课程名称" 
                          @blur="handleCourseNameInput" />
                      </div>
                    </div>
                    <div class="b_sub">
                      <div class="bs_header">
                        <div class="b_left">
                          <span style="color: #999ba3">*请按照excel表格中按列粘贴课程名称</span>
                        </div>
                      </div>
                    </div>
                    
                    <!-- 添加表格展示按空格分割的课程名称 -->
                    <div class="course-name-table" v-if="splitCourseNames.length > 0">
                      <a-table 
                        :columns="courseNameColumns" 
                        :data-source="splitCourseNames" 
                        :pagination="false"
                        size="small"
                        :scroll="{ y: 200 }">
                        <template #bodyCell="{ column, record, index }">
                          <template v-if="column.dataIndex === 'index'">
                            {{ index + 1 }}
                          </template>
                          <template v-else-if="column.dataIndex === 'name'">
                            {{ record }}
                          </template>
                        </template>
                      </a-table>
                    </div>
                    
                    <div class="b_footer">
                      <a-button class="btn btn6" @click="handleImportMarkOk" :loading="validated === 1" v-if="splitCourseNames.length === 0">
                        确定
                      </a-button>
                      <a-button class="btn btn6" @click="okMark" :loading="validated === 1" v-if="splitCourseNames.length > 0">
                        确定标记
                      </a-button>
                      <div class="btn btn6" @click="handleImportMarkCancel">
                        <div class="btnText">取消</div>
                      </div>
                     
                    </div>
                  </div>
                </div>
              </div>
            </a-modal>
            <div style="display: flex; margin-bottom: 20px; margin-left: auto;" class="courseBtn">
              <div class="btn btn1" @click="exportTaskStu">
                <div class="btnText">导入标记</div>
              </div>
              <div class="btn btn1" @click="exportAll">
                <div class="btnText">导出表格</div>
              </div>
              <div class="btn btn1" @click="handleSearch1">
                <div class="search"></div>
                <div class="btnText">搜索</div>
              </div>
              <div class="btnn btn2" @click="handleRest1">
                <div class="search"></div>
                <div class="btnText">重置</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 搜索框及按钮 -->
    </div>
    <!-- 表格 -->
    <div style="padding: 10px 35px">
      <a-table :header-cell-style="{ 'text-align': 'center' }" style="border: 1px solid #f2f6fe" :columns="columns1"
        :data-source="tableData1" :loading="tableLoading" :pagination="false" :scroll="{ x: 1300 }" row-key="id">
        <template #actions="{ text, record, index }">
          <a-space :key="record.id">
            <a-button @click="() => handleMark(record)" type="link" v-if="!record.qualityStatus">
              标记精品课
            </a-button>
            <a-button @click="() => handleNo(record)" type="link" v-if="record.qualityStatus">
              取消标记
            </a-button>
            <a-button @click="() => handleTop(record)" type="link" v-if="!record.qualityTop"
              :disabled="!record.qualityStatus">
              置顶展示
            </a-button>
            <a-button @click="() => handleNoTop(record)" type="link" v-if="record.qualityTop">
              取消置顶
            </a-button>
          </a-space>
        </template>
      </a-table>
    </div>
    <div class="pa">
      <a-pagination v-if="tableDataTotal1 > 10" :showSizeChanger="true" :showQuickJumper="true" :hideOnSinglePage="true"
        :pageSize="pageSize1" :current="currentPage1" :total="tableDataTotal1" class="pagination"
        @change="handelChangePage1" />
    </div>
    <!-- 表格 -->
  </div>
</template>

<script lang="jsx">
import {
  reactive,
  toRefs,
  defineComponent,
  computed,
  ref,
  onMounted
} from "vue";
import { useStore } from "vuex";
import { message } from "ant-design-vue";
import dialog from "@/utils/dialog";
import "@wangeditor/editor/dist/css/style.css";
import {
  getExquisiteCoursePage,
  getExquisiteYearList,
  getMark,
  getToTop,
  getToTopSort,
  getExport
} from "@/api/indexCourse";
import * as moment from "moment";
import downLoad from "../../utils/downLoad";
import Cookies from "vue-cookies";
import axios from "axios";

export default defineComponent({
  components: {},
  setup() {
    const userInfo = computed(() => store.state.userInfo)
    const store = useStore();
    // 内容分类
    const sysTypeOptions = computed(() => { return store.state.content_type; });

    const handleMsg = {
      mark: "是否确认标记当前课程为精品课？",
      top: "是否确认置顶当前课程？",
      noMark: "是否确认取消标记当前课程为精品课？",
      noTop: "是否确认取消置顶当前课程？"
    };
    const state = reactive({
      userName:"",
      userId:"",
      tableLoading: false,
      // 添加年份相关数据
      selectedYears: [],
      yearOptions: [],
      // 添加导入标记弹窗相关数据
      importMarkVisible: false,
      importMarkForm: {
        courseName: ''
      },
      // 添加课程名称表格列定义
      courseNameColumns: [
        {
          title: "序号",
          dataIndex: "index",
          width: 60,
          align: "center",
        },
        {
          title: "名称",
          dataIndex: "name",
          align: "center",
        }
      ],
      xzinputV1: "", // 输入的课程名称字符串
      splitCourseNames: [], // 失焦后分割的课程名称数组
      // 计算属性：将输入的课程名称按空格分割成数组
      courseNames: computed(() => {
        if (!state.xzinputV1) return [];
        return state.xzinputV1.trim().split(/\s+/).filter(name => name.length > 0);
      }),
      columns1: [
        {
          title: "序号",
          width: 40,
          dataIndex: "xuhaoid",
          key: "xuhaoid",
          align: "center",
          customRender: ({ text, record, index }) => {
            return index + 1
          },
        },
        {
          title: "名称",
          width: 120,
          dataIndex: "name",
          key: "name",
          ellipsis: true,
          align: "center",
          customRender: ({ text }) => {
            return text ? text : "";
          },
        },
        {
          title: "课程类型",
          width: 100,
          dataIndex: "courseSource",
          ellipsis: true,
          key: "courseSource",
          align: "center",
          customRender: ({ text }) => {
            return text == 1 ? '内部课' : text == 2 ? "外部课" : "-";
          },
        },
        {
          title: "内容分类",
          width: 90,
          dataIndex: "sysType1",
          key: "sysType1",
          align: "left",
          ellipsis: true,
          customRender: ({ record, text }) =>
            `${getSysTypeMap(record.sysType1, record.sysTypeId) ? getSysTypeMap(record.sysType1) : ""}
          ${getSysTypeMap(record.sysType2, record.sysTypeId) ? '-' + getSysTypeMap(record.sysType2) : ""}
          ${getSysTypeMap(record.sysType3, record.sysTypeId) ? '-' + getSysTypeMap(record.sysType3) : ""}
          `
        },
        {
          title: "关键字",
          width: 52,
          dataIndex: "keywords",
          key: "8",
          ellipsis: true,
          align: "center",
          customRender: ({ text }) => {
            return text ? text : "-";
          },
        },
        {
          title: "授课教师",
          width: 52,
          dataIndex: "teacherName",
          key: "8",
          ellipsis: true,
          align: "center",
          customRender: ({ text }) => {
            return text ? text : "-";
          },
        },
        {
          title: "创建时间",
          width: 52,
          dataIndex: "sysCreateTime",
          key: "9",
          ellipsis: true,
          align: "center",
          customRender: ({ text }) => {
            return text ? text : "-";
          },
        },
        {
          title: "操作时间",
          width: 84,
          ellipsis: true,
          dataIndex: "qualityTime",
          key: "10",
          align: "center",
          customRender: ({ text }) => {
            return text || "-";
          },
        },
        {
          title: "操作人",
          width: 52,
          dataIndex: "qualityPeople",
          key: "qualityPeople",
          align: "center",
          customRender: ({ text }) => {
            return text || "-";
          },
        },
        {
          title: "置顶顺序",
          width: 52,
          dataIndex: "qualityTopSort",
          key: "qualityTopSort",
          align: "center",
          customRender: ({ text, record, index }) => {
            if (record.qualityTop) {
              // 如果处于编辑状态，显示输入框
              if (record.editingTopOrder) {
                return (
                  <a-input
                    value={text || ''}
                    style={{ width: '60px' }}
                    onBlur={() => {
                      // 失去焦点时取消编辑状态
                      record.editingTopOrder = false;
                      try {
                        // 这里应该调用实际的API接口
                        let res = getToTopSort({ courseId: record.courseId, qualityTopSort: record.qualityTopSort });
                        if (res.data.data.status == 200) {
                          message.success(res.data.data.message);
                          // 重新加载数据
                          // getTableDate();
                        } else {
                          message.error(res.data.data.message);
                        }
                      } catch (error) {
                        console.error(error);
                      }
                      // 重新加载数据
                      getTableDate();
                      // 这里可以添加保存到服务器的逻辑
                    }}
                    onChange={(e) => {
                      // 更新数据
                      record.qualityTopSort = e.target.value;

                    }}
                    onKeydown={(e) => {
                      if (e.key === 'Enter') {
                        // 按回车时保存并取消编辑状态
                        record.editingTopOrder = false;
                        // 这里可以添加保存到服务器的逻辑
                      }
                    }}
                  />
                );
              }
            }


            // 否则显示文本，点击后进入编辑状态
            return (
              <div onClick={() => { record.editingTopOrder = true; }}>
                <span style={{ cursor: 'pointer' }}>
                  {text || '-'}
                </span>
              </div>
            );
          },
        },
        {
          title: "操作",
          width: 84,
          dataIndex: "id",
          key: "id",
          fixed: "right",
          align: "center",
          slots: { customRender: "actions" },
        },
      ],
      //列表表格
      tableData1: [
        {
          id: 2,
          name: "React核心概念详解",
          sysType1: "A01",
          sysType2: "B02",
          sysTypeId: "A01",
          keywords: "前端,React,JavaScript",
          teacherName: "王五",
          sysCreateTime: "2023-01-20",
          exquisiteTime: "2023-02-05",
          exquisiteRecommender: "赵六",
          qualityTop: true,
          courseSource: 1,
          qualityStatus: true,
          qualityTopSort: 2
        },
        {
          id: 2,
          name: "React核心概念详解",
          sysType1: "A01",
          sysType2: "B02",
          sysTypeId: "A01",
          keywords: "前端,React,JavaScript",
          teacherName: "王五",
          sysCreateTime: "2023-01-20",
          exquisiteTime: "2023-02-05",
          exquisiteRecommender: "赵六",
          courseSource: 2,
          getExport: null,
          qualityStatus: true,
          qualityTopSort: 2
        },
        // {
        //   id: 1,
        //   name: "Vue从入门到精通",
        //   sysType1: "A01",
        //   sysType2: "B01",
        //   sysType3: "C01",
        //   keywords: "前端,Vue,JavaScript",
        //   teacherName: "",
        //   sysCreateTime: "2023-01-15",
        //   exquisiteTime: "2023-02-01",
        //   exquisiteRecommender: "李四",
        //   qualityTop: false,
        //   qualityStatus: false,
        //   qualityTopSort: 1
        // },
        // {
        //   courseId: "965356498114842624",
        //   name: "走进京东方",
        //   courseSource: 1,
        //   sysType1: "966458773186465792",
        //   sysType2: "0",
        //   sysType3: "0",
        //   keywords: "新员工 职场,定目标,传文化,带团队",
        //   teacherName: "齐铮",
        //   sysCreateTime: "2022-04-17 21:02:05",
        //   qualityTime: "2022-04-17 21:02:05",
        //   qualityPeople: "齐铮",
        //   qualityTop: false,
        //   qualityStatus: true,
        //   qualityTopSort: 2
        // },
      ],
      currentPage1: 1,
      tableDataTotal1: 3,
      pageSize1: 10,
      pageSize: 10,
      courseNameOrTeacherName: "",
      courseSource: undefined,
      years: [],
      sysType: null,
      sysType1: "",      //内容分类
      sysType2: "",
      sysType3: "",
      sysTypeId: undefined,
      sysTypeMap: null

    });
    // // 调整顺序
    // const handleSort = (record) => async () => {
    //   try {
    //     // 这里应该调用实际的API接口
    //     await getToTopSort({ courseId: record.courseId, qualityTopSort: record.qualityTopSort });
    //     message.success("标记课程成功！");
    //     // 重新加载数据
    //     // getTableDate();
    //   } catch (error) {
    //     message.error("标记课程失败！");
    //   }
    // };
    // 标记课程处理
    function handleMark(record) {
      dialog({ content: handleMsg.mark, ok: handleMarkOk(record) });
    }
    // 取消标记课程处理
    function handleNo(record) {
      dialog({ content: handleMsg.noMark, ok: handleMarkNo(record) });
    }

    // 置顶处理
    function handleTop(record) {
      dialog({ content: handleMsg.top, ok: handleTopOk(record) });
    }


    // 取消置顶处理
    function handleNoTop(record) {
      dialog({ content: handleMsg.noTop, ok: handleTopNo(record) });
    }

    // 标记课程确认操作
    const handleMarkOk = (record) => async () => {
      try {
        // 这里应该调用实际的API接口
        let res = await getMark({ courseId: record.courseId, userName: state.userName, userId: state.userId });
        if (res.data.data.status == 200) {
          message.success(res.data.data.message);
          // 重新加载数据
          getTableDate();
        } else {
          message.error(res.data.data.message);
        }
        // 重新加载数据
        getTableDate();
      } catch (error) {
        console.log(error);

      }
    };
    // 取消标记课程确认操作
    const handleMarkNo = (record) => async () => {
      try {
        // 这里应该调用实际的API接口
        let res = await getMark({ courseId: record.courseId, userName: state.userName, userId: state.userId });
        if (res.data.data.status == 200) {
          message.success(res.data.data.message);
          // 重新加载数据
          getTableDate();
        } else {
          message.error(res.data.data.message);
        }
      } catch (error) {
        console.log(error);

      }
    };

    // 置顶确认操作
    const handleTopOk = (record) => async () => {
      try {
        // 这里应该调用实际的API接口
        let res = await getToTop({ courseId: record.courseId });
        if (res.data.data.status == 200) {
          message.success(res.data.data.message);
          // 重新加载数据
          getTableDate();
        } else {
          message.error(res.data.data.message);
        }
        // 重新加载数据
        getTableDate();
      } catch (error) {
        message.error("置顶课程失败！");
      }
    };
    // 取消置顶确认操作
    const handleTopNo = (record) => async () => {
      try {
        // 这里应该调用实际的API接口
        let res = await getToTop({ courseId: record.courseId });
        if (res.data.data.status == 200) {
          message.success(res.data.data.message);
          // 重新加载数据
          getTableDate();
        } else {
          message.error(res.data.data.message);
        }
        // 重新加载数据
        getTableDate();
      } catch (error) {
        message.error("取消置顶课程失败！");
      }
    };
    // 渲染列表1操作
    const getTableDate = async () => {
      state.tableLoading = true;
      console.log("我是点击搜索的数据", state.sysTypeId);
      let res = await getExquisiteCoursePage({
        courseNameOrTeacherName: state.courseNameOrTeacherName,
        pageNum: state.currentPage1,
        pageSize: state.pageSize1,
        courseSource: state.courseSource,
        years: state.years,
        sysType: state.sysTypeId,
        sysType1: state.sysType1,
        sysType2: state.sysType2,
        sysType3: state.sysType3,
        sysTypeId: state.sysTypeId,
      });
      const { records, total } = res.data.data.result;
      const { count } = res.data.data
      state.count = count
      state.tableData1 = records;
      state.tableDataTotal1 = total;
      state.tableLoading = false;
      console.log("state.tableData1", state.tableData1);

    };
    // getTableDate();

    // 初始化年份选项
    const initializeYearOptions = async () => {
      let res = await getExquisiteYearList({})
      const years = res.data.data.result.map((year) => {
        return { 
          label: year, 
          value: year
        };
      });
      state.yearOptions = years;
    };

    //内容分类
    const getSysTypeMap = (code) => {
      if (code == "") return
      // console.log(store.state.sysTypeMap, 'map集合');
      // return store.state.sysTypeMap.get(code)
    }
    getSysTypeMap()

    //分页
    const handelChangePage1 = (page, pageSize) => {
      state.currentPage1 = page;
      state.pageSize1 = pageSize;
      getTableDate();
    };
    //搜索
    const handleSearch1 = () => {
      state.currentPage1 = 1
      // 在这里可以添加实际的搜索逻辑
      console.log('搜索参数:', {
        courseNameOrTeacherName: state.courseNameOrTeacherName,
        courseSource: state.courseSource,
        sysType: state.sysTypeId,
        years: state.years // 添加年份参数
      })
      getTableDate();
    };
    // 全部导出
    const exportAll = async () => {
      if(state.courseNameOrTeacherName!=""||state.courseSource!=undefined||state.years.length!=0||state.sysTypeId!=undefined){
        dialog({ content: '是否确认导出当前表格？', ok: okExport() });
      }else{
        axios({
        method: "post",
        url: `${process.env.VUE_APP_BASE_API}/quality/manage/export`,
        data:{
            courseNameOrTeacherName: state.courseNameOrTeacherName,
            courseSource: state.courseSource,
            years: state.years,
            sysType: state.sysTypeId,
          },
        responseType: "blob",
        headers: {
          token: Cookies.get("token"),
        },
      }).then((res) => {
        downLoad(res.data, "精品课程导出.xlsx");
      });
      }
      
    };
   const okExport = ()=>{
    axios({
        method: "post",
        url: `${process.env.VUE_APP_BASE_API}/quality/manage/export`,
        data:{
            courseNameOrTeacherName: state.courseNameOrTeacherName,
            courseSource: state.courseSource,
            years: state.years,
            sysType: state.sysTypeId,
          },
        responseType: "blob",
        headers: {
          token: Cookies.get("token"),
        },
      }).then((res) => {
        downLoad(res.data, "精品课程导出.xlsx");
      });
    
   }
    // 导入标记
    const exportTaskStu = () => {
      state.importMarkVisible = true;
      state.importMarkForm.courseName = '';
      // // 清空分割的课程名称数组
      state.splitCourseNames = [];
      state.xzinputV1 = '';
    };

    // // 处理课程名称输入框失焦事件
    const handleCourseNameInput = () => {
      if (state.xzinputV1) {
        // 按空格分割输入的内容，并过滤掉空字符串
        state.splitCourseNames = state.xzinputV1.trim().split(/\s+/).filter(item => item.length > 0);
      } else {
        state.splitCourseNames = [];
      }
    };
    
    // 导入标记弹窗确认
    const handleImportMarkOk = () => {
      // console.log('导入标记表单数据:', state.importMarkForm);
      if (state.xzinputV1) {
        // 按空格分割输入的内容，并过滤掉空字符串
        state.splitCourseNames = state.xzinputV1.trim().split(/\s+/).filter(item => item.length > 0);
      } else {
        state.splitCourseNames = [];
      }
    };
    
    const okMark = async () =>{
      let res = await getMark({ courseName:state.splitCourseNames, userName: state.userName, userId: state.userId });
        if (res.data.data.status == 200) {
          message.success(res.data.data.message);
          state.importMarkVisible = false
          // 重新加载数据
          getTableDate();
        } else {
          // state.importMarkVisible = false;
          dialog({ content: res.data.data.message, ok: okMarkT(), okText: "重新输入" });
          // message.error(res.data.data.message);
        }
        // 重新加载数据
        getTableDate();
    }
    const okMarkT=()=>{
      
    }

    // 导入标记弹窗取消
    const handleImportMarkCancel = () => {
      state.importMarkVisible = false;
      state.importMarkForm.courseName = '';
      // 清空分割的课程名称数组
      state.splitCourseNames = [];
      state.xzinputV1 = '';
    };
    // const handleSearch = () => {
    //   state.currentPage1 = 1
    //   // 在这里可以添加实际的搜索逻辑
    //   console.log('搜索参数:', {
    //     courseNameOrTeacherName: state.courseNameOrTeacherName,
    // courseSource: state.courseSource,
    // years: state.years,
    // sysType: state.sysTypeId,// 添加年份参数
    //   })
    // }
    //重置
    const handleRest1 = () => {
      state.courseNameOrTeacherName = ''
      state.courseSource = undefined
      // state.sysType = null;
      state.sysTypeId = null;
      state.years = []; // 重置年份选择
      getTableDate();
    };

    onMounted(() => {
      initializeYearOptions(); // 初始化年份选项
      state.userName = userInfo.value.realName
      state.userId = userInfo.value.userId
    });

    return {
      ...toRefs(state),
      sysTypeOptions,
      moment,
      handelChangePage1,
      handleSearch1,
      // handleSearch,
      handleRest1,
      getSysTypeMap,
      handleMark,
      handleTop,
      handleNo,
      handleNoTop,
      handleMarkOk,
      handleTopOk,
      handleMarkNo,
      handleTopNo,
      exportAll,
      okExport,
      exportTaskStu,
      handleImportMarkOk,
      handleImportMarkCancel,
      handleCourseNameInput,
      okMark
    };
  },
});
</script>
<style lang="scss" scoped>
:deep(.ant-table-thead > tr > th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before) {
  background-color: rgba(0, 0, 0, 0.1);
}

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

  .filter {
    margin-left: 35px;
    margin-right: 35px;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;

    .filterItems {
      width: 100%;
      justify-content: space-between;
      display: flex;
      flex-wrap: wrap;

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

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

      .btn {
        padding: 0px 26px 0px 26px;
        height: 38px;
        background: #4ea6ff;
        border-radius: 8px;
        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;
        }
      }

      .btnn {
        padding: 0px 26px 0px 26px;
        height: 38px;
        background: #ffffff;
        color: #388BE1;
        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: #388BE1;
          line-height: 36px;
          margin-left: 5px;
        }
      }

      .btn1 {
        .search {
          width: 15px;
          height: 17px;
          background-image: url("../../assets/images/courseManage/search0.png");
        }
      }

      .btn1:active {
        background: #0982ff;
      }

      .btn2:active {
        background: #0982ff;
      }

      .btn2 {
        .search {
          width: 16px;
          height: 18px;
          background-image: url("../../assets/images/courseManage/reset1.png");
        }

        .daochu {
          width: 16px;
          height: 18px;
          background-image: url("../../assets/images/coursewareManage/export1.png");
        }
      }

      .btn1 {
        .search {
          background-image: url("../../assets/images/courseManage/search0.png");
        }

        .btnText {
          color: #ffffff;
        }
      }

    }

  }


}


.pa {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;

  .pagination {
    margin-bottom: 20px;
  }

  .ant-pagination-item-link,
  .ant-pagination-item,
  .ant-select-selector,
  .ant-pagination-options-quick-jumper input {
    border-radius: 8px;
  }
}

.ant-select-selector {
  height: 100%;
  border-radius: 8px;
}

.ant-upload.ant-upload-select-picture-card {
  border: none;
}

:deep(.yearSelect .ant-select-selection-item) {
  line-height: 20px !important;
}

.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%);

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

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

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

      .add_icon {
        width: 16px;
        height: 16px;
        margin-right: 10px;
        background-image: url(@/assets/images/coursewareManage/add1.png);
        background-size: 100% 100%;
      }

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

    .ofm_body {
      width: 80%;
      margin: 3px auto;

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

        .signbox {
          width: 110px;
          display: flex;
          justify-content: end;

          .sign {
            width: 10px;
            height: 10px;
            margin-top: -3px;
            margin-right: 6px;
            background-size: 100% 100%;
          }
        }

        .b_input {
          flex: 1;
          position: relative;

          .inp_num {
            position: absolute;
            right: 10px;
            top: 10px;
          }
        }

        .bc_box {
          display: flex;
          width: 440px;
          flex: 1;

          .bc_boxl,
          .bc_boxr {
            display: flex;
            align-items: center;
          }
        }
      }

      .ol_checkbox {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 6px;
      }

      .b_sub {
        width: 440px;
        margin-left: 110px;
        font-size: 12px;

        .bs_header {
          display: flex;
          justify-content: space-between;

          .b_right {
            display: flex;
          }
        }
      }

      .bl_detail {
        top: 24px;
      }

      .b_footer {
        width: 100%;
        margin-left: 212px;
        margin-top: 25px;
        margin-bottom: 20px;
        display: flex;

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

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

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

        .btn6 {
          background-color: #4ea6ff;
          color: #ffffff;
        }
      }
    }
  }
}
</style>