<template>
  <div id="couser-list-content" class="couser-list-content">
    <div class="course-banner">
      <portal-header current="course" textColor="#fff" :keywords="keyword" @emitInput="emitInput"
                     @showClass="showClass"></portal-header>
    </div>
    <div style="padding-top:30px">
      <div class="xcontent2">
        <div class="navTitle">
          <a @click="handleClearTags">课程分类&nbsp;</a>
          <span v-if="navTitle.length">></span>
          <template v-if="navTitle.length">
            <div class="oneTitle" v-for="(item, index) in navTitle" :key="item.id"
                 @click="handleOptionClick(item, index)">
              <span class="titleName">&nbsp;{{ item.name }}&nbsp;</span>
              <span v-if="index !== navTitle.length - 1">></span>
            </div>
          </template>
        </div>
      </div>
      <div class="xcontent2">
        <!-- 左侧三级 -->
        <div class="xcontent2-minor" style="margin-right:36px;">
          <!-- <router-link to="/courseRecommended" style="margin-bottom: 20px;" class="course-recommended-style">
            <div class="imgTilte">
            </div>
          </router-link> -->
          <div class="course-title-style">
            <div class="imgTilte">
              <div>课程分类</div>
              <div>COURSE</div>
            </div>
          </div>
          <div class="course-list">
            <div class="course-one" v-for="one in oneList" :key="one.id" @click.stop="handleOptionClick(one, 1, oneList)">
              <div class="course-one-content">{{ one.name }}</div>
              <div class="course-two" v-for="(twoList, twoIndex) in one.children" :key="twoList.id"
                   @click.stop="handleOptionClick(twoList, 2, one.children)"
                   :class="{ courseTwoActive: twoList.id == twoId || twoList.checked }" @mouseleave.stop="leaveIndex"
                   @mouseenter.stop="changeIndex(twoList.id)">
                <!-- 三级分类 -->
                <el-popover class="popover" popper-class='coursePopperClass' placement="right-start" width="536"
                            :disabled="!twoList.children.length" :open-delay="0" :close-delay="0" trigger="hover"
                            :visible-arrow="false" @hide="leaveIndex" @show="changeIndex(twoList.id)" transition="none">
                  <div class="course-two-content" slot="reference">{{
                      twoList.name }}</div>-
                  <!-- 内容 -->
                  <div class="course-three-box">
                    <div class="course-three-box-title">
                      {{ twoList.name }}
                    </div>
                    <div style="padding: 0 40px;display: flex;flex-wrap: wrap;">
                      <div :class="threeList.checked ? 'threeActive' : ''" v-for="threeList in twoList.children"
                           :key="threeList.id" @click.stop="handleOptionClick(threeList, 3, twoList.children)"
                           class="course-three">
                        <span>{{ threeList.name }}</span>
                      </div>
                    </div>
                  </div>
                </el-popover>
              </div>
            </div>
          </div>
          <div id="fixd-box">

          </div>
        </div>
        <!-- 右侧 -->
        <div class="xcontent2-main content-div">

          <!-- 内容导航 -->
          <div class="topNav" v-if="!newData">
            <div class="search-div nav" style="flex: 1;height: auto;background: #fff;">
              <div class="nav-primary" style="gap: 15px;display: flex;margin-top: 20px;">
                <div @click="handleTypeAllClick(1)" class="option-item" style="position: relative;" :class="{ 'option-active': ctypeTagAll }">
                  <a>全部</a>
                </div>
                <div @click="handleTypeClick(ctypeList[0], ctypeList)" class="option-item"
                     :class="{ 'option-active': ctypeList[0].checked }">
                  <a>录播课</a>
                </div>
                <div @click="handleTypeClick(ctypeList[1], ctypeList)" class="option-item"
                     :class="{ 'option-active': ctypeList[1].checked }">
                  <a>线下课</a>
                </div>
                <div @click="handleTypeClick(ctypeList[2], ctypeList)" class="option-item"
                     :class="{ 'option-active': ctypeList[2].checked }">
                  <a>学习项目</a>
                </div>
                <a class="option-item">
                    <span @click="uClassClick" class="Uxtext" > U选小课堂
                      <span class="uxicon">
                        <svg-icon icon-class="hot" style="font-size:22px"></svg-icon>
                      </span>
                    </span>
                </a>
              </div>
              <!-- 修改热点标签区域 -->
              <div style="margin:20px 0;flex: 1;">
                <!-- 修改热点标签容器，支持换行 -->
                <div>
                  <div style="display: flex">
                    <div
                      class="option-item"        style=" padding-top: 2px;"
                      :class="{ 'option-active': isAllHotTagsSelected }"
                      @click="handleClearHotTags"
                    >
                      <span>全部</span>
                    </div>

                    <div class="fieldbox" style="padding-left: 15px;">
                      <div
                        class="option-item"        style=" padding-top: 2px;"
                        v-for="tag in hotTagsList"
                        :key="tag.id"
                        @click="handleTagClick(tag, hotTagsList,1)"
                        :class="{ 'option-active': tag.checked }"
                      >
                        <span>{{tag.tagName}} </span>
                        <!--                            <span :class="tag.checked ? 'nav-bottbor' : ''"></span>-->
                      </div>
                    </div>

                  </div>
                </div>
              </div>
            </div>
            <!--            <div id="fixd-box" class="upload" style="margin-left: 26px;">
                          <div v-if="identity == 2 || identity == 3 || identity == 5">
                            <div class="portal-model-btn pointer" style="margin-bottom: 0px;height: 100px;line-height: 100px;"
                              @click="toNeedCourse">
                              <svg-icon style="margin-right: 10px;font-size: 24px;" icon-class="upCourse"></svg-icon>
                              上传课程
                            </div>
                          </div>
                        </div>-->
          </div>
          <!-- 清除 -->
          <div v-if="stagList.length > 0 && !newData" class="search-div" style="padding: 0">
            <div class="searchbar" style="display: flex;justify-content: space-between;">
              <div style="line-height: 30px;">
                <span class="item-title"> 搜索条件:</span>
                <el-tag closable v-for="(tag, tagIdx) in stagList" :key="'t' + tagIdx" @close="stagClose(tag, tagIdx)" >
                  {{ tag.tagName }}
                </el-tag>
              </div>
              <div>
                <el-button type="primary" size="mini" @click="handleClearTags">清除</el-button>
              </div>
            </div>
          </div>

          <!-- 标题最新最热好评率 -->
          <div class="xcourse-list" style="background-color: #fff;border-radius: 8px;padding:0 25px;">
            <div class="order-div" v-if="!newData">
              <span class="quyer-tag">
                <el-button type="text" class="order-class" @click="orderChange('studys')"
                           :class="{ actice: course.orderField == 'studys' }">最热</el-button>
                <el-button type="text" class="order-class" @click="orderChange('publishTime')"
                           :class="{ actice: course.orderField == 'publishTime' }">最新</el-button>
                <el-button type="text" class="order-class" @click="orderChange('score')"
                           :class="{ actice: course.orderField == 'score' }">好评率</el-button>
              </span>
              <span class="order-count">
                共找到<span>{{ count }}</span>个结果
              </span>
            </div>
            <template v-if="!newData">
              <div class="xcourse-card" v-for="(cinfo, cidx) in courseList" :key="cinfo.id">
                <div class="course-card" style="padding: 10px;">
                  <a @click="toCourseDetail(cinfo)">
                    <div class="course-img-box">
                      <course-image :text="true" :course="cinfo"></course-image>
                      <span v-if="cinfo.type == 20 || 10" class="course-type-left">录播课</span>
                      <span v-if="cinfo.type == 30" class="course-type-left">线下课</span>
                      <span v-if="cinfo.type == 40" class="course-type-left">学习项目</span>
                    </div>
                    <div class="course-title two-line-ellipsis" :title="cinfo.title" v-html="cinfo.name"></div>
                    <!-- 添加标签显示区域 -->
                    <div class="course-tags" v-if="cinfo.tagsList && cinfo.tagsList.length > 0">
                      <el-tag
                        v-for="(tag, tagIndex) in cinfo.tagsList"
                        :key="tagIndex"
                        size="mini"
                        type="info"
                        style="margin: 2px 2px; border-radius: 2px;"
                      >
                        <span v-html="highlightTagKeyword(tag)"></span>
                      </el-tag>
                    </div>
                    <!-- 关键字 -->
                    <div class="keywordInfo-every">
                      <div class="keywordInfo" v-for="(keyword, index) in cinfo.keywordsActive" :key="index">
                        <el-tooltip popper-class="keywordInfo-class" :visible-arrow="false"
                                    :disabled="!keyword.showTitle">
                          <template #content>
                            <span v-html="keyword.title"></span>
                          </template>
                          <div class="keyword-content" v-html="keyword.name"></div>
                        </el-tooltip>
                      </div>
                    </div>
                    <div class="couresstartTime">
                      <span v-if="cinfo.type == 30 && cinfo.startTime">开课时间：{{ cinfo.startTime }}</span>
                    </div>
                    <!--   ai播放器相关   -->
                    <div class="course-info" style="align-items: center;">
                      <el-popover
                        placement="top-start"
                        :width="cinfo.summaryContent && cinfo.summaryContent.length > 200 ? '402' : '253'"
                        trigger="hover"
                        popper-class="course-popover"
                        >
                        <div class="course-popover-content">
                          <h4>课程摘要</h4>
                          <div v-if="cinfo.summaryContent" class="course-popover-content-text" >{{ cinfo.summaryContent }}</div>
                          <div v-else class="course-popover-noContent" >
                            <img src="../../../assets/images/course/noData.png" alt="">
                            <span>暂无数据</span>
                          </div>
                        </div>
                        <!-- <img slot="reference" src="../../../assets/images/course/courseAbstract.png" alt="摘要" style="width: 94px;height: 44px;margin-left: -10px;"> -->
                        <img v-show="cinfo.aiAbstract == 1" slot="reference" src="../../../assets/images/course/courseAbstract.png" alt="摘要" style="width: 94px;height: 44px;margin-left: -10px;">
                      </el-popover>
                      <div class="course-info-user" style="max-width: 100px;" v-if="cinfo.teacher">
                        <el-tooltip :content="cinfo.teacher" placement="bottom" effect="light">
                          <span class="course-info-author">{{ cinfo.teacher }}</span>
                        </el-tooltip>
                      </div>
                      <div class="course-info-user">
                        <span class="course-info-studys">{{ formatNum(cinfo.studies) }}人学习</span>
                      </div>
                      <div class="course-info-score">
                        <div style="display: flex; align-items: center;">
                          <interactBar :type="1" nodeWidth="20px" :data="cinfo" :courseExclusive="true" :comments="false"
                                       :praises="false" :shares="false" :views="false"></interactBar>
                          <div v-if="cinfo.score">
                            <span class="course-score-value" style="white-space: nowrap;">{{ toScore(cinfo.score) }}分</span>
                          </div>
                          <div v-else class="course-score-no" style="white-space: nowrap;">未评分</div>
                        </div>
                      </div>
                    </div>
                  </a>
                </div>
              </div>
            </template>
            <!-- 线上品牌系列课程 -->
            <template v-if="newData">
              <div class="xcourse-card"  v-for="cinfo in courseList" :key="cinfo.id" style="margin-bottom: 0;margin-top: 36px;">
                <div class="course-card" style="padding: 10px;">
                  <a @click="() => $message.success('如需了解详情，请联系BOEU')">
                    <div class="course-img-box">
                      <course-image :text="true" :course="cinfo"></course-image>
                    </div>
                    <div class="course-title two-line-ellipsis" :title="cinfo.title" v-html="cinfo.name"></div>
                    <div class="course-title two-line-ellipsis">
                      {{ cinfo.remark }}
                    </div>
                    <div class="course-info">
                      <div class="course-info-user">
                        <span class="course-info-author" v-if="cinfo.teacher" v-html="cinfo.teacher"></span>
                      </div>
                    </div>
                  </a>
                </div>
              </div>
            </template>
            <!--  暂无数据 -->
            <div class="pagination-div">
              <span class="notcoures" v-if="moreState == 3 && courseList.length == 0">
                <img :src="`${webBaseUrl}/images/nocouresimg.png`" alt="">
                <h5>暂无课程，请优先学习其它课程吧～</h5>
              </span>
              <div v-if="courseList.length > 0">
                <pagination :size="course.pageSize" :total="count" :page="course.pageIndex"
                            layout="total, prev, pager, next, jumper" @change-page="currentChange"></pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <portal-footer></portal-footer>
    <portalFloatTools ref="floatTools"></portalFloatTools>
    <!-- U课堂弹窗 -->
    <div class="u-class">
      <el-dialog :visible.sync="showUClass" width="833px">
        <div class="ClassBoxContent">
          <img src="../../../assets/images/u_class.png" alt="" class="img" />
          <div class="ContentBox">
            <div class="left">
              <div class="title">U选小课堂</div>
              <div class="jy">项目简介</div>
              <div class="msg">
                于22年首推，是一个面向全集团员工开放的职业通识类数字化培养项目，旨在帮助员工开阔眼界、加厚职业素养。在原有外部精选通用力课程基础上，2023年引入创新专区，以新鲜的话题、新颖的形式，带给全员丰富、有趣的学习体验。
              </div>
              <div class="bottom"></div>
            </div>
            <div class="right">
              <div class="tyl" @click="tylClick">
                <div class="tyl_title">
                  <img src="../../../assets/images/dc.png" alt="" class="tyl_title_img" />
                  <span class="tyl_title_msg">通用力专区</span>
                </div>
                <div class="tyl_jy">加厚职业素养，轻学习、快成长！</div>
                <div class="tyl_msg">
                  内容涵盖：领导力、市场营销、职场技能、财务知识、法律常识、人力资源、经典国学、人文社科
                </div>
              </div>
              <div class="text_msg">
                创新力专区课程版权已到期！
              </div>
              <!-- <div class="cyl" @click="cylClick">
                <div class="tyl_title">
                  <img src="../../../assets/images/cyl.png" alt="" class="tyl_title_img" />
                  <span class="tyl_title_msg">创新力专区</span>
                </div>
                <div class="tyl_jy">激发创新潜力，拓视野、促思考！</div>
                <div class="tyl_msg">
                  内容涵盖：组合创新、单点破局、错位竞争、分形创新、第二曲线、数字化、元宇宙<br/>
                  创新力专区课程版权将于2024年4月16日到期，逾期将无法继续访问，请尽快完成学习
                </div>
              </div> -->
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import couresinteract from '@/components/Portal/course/couresinteract.vue';
import portalHeader from "@/components/PortalHeader.vue";
import portalFooter from "@/components/PortalFooter.vue";
import portalFloatTools from "@/components/PortalFloatTools.vue";
import authorInfo from "@/components/Portal/authorInfo.vue";
import courseItem from "@/components/Portal/course/courseItem.vue";
import apiCoursePortal from "@/api/modules/coursePortal.js";
import apiCourseStudy from "@/api/modules/courseStudy.js";
import courseForm from "@/components/Course/courseForm.vue";
import apiType from "@/api/modules/type.js";
import apiCourse from "@/api/modules/coursePortal.js";
import apiOldCourse from "@/api/boe/course.js";
import apiTeacher from "@/api/modules/teacher.js";
import apiUser from "@/api/system/user.js";
import scene from "@/api/modules/scene.js";
import apiUserbasic from "@/api/boe/userbasic.js";
import apiManage from '@/api/manage/manage.js';
import interactBar from "@/components/Portal/interactBar.vue";
import courseImage from "@/components/Course/courseImage.vue";
import { courseType, getType, toScore, formatDate, formatUserNumber, formatDateByFmt } from "@/utils/tools.js";
import { deepClone, param } from "../../../utils";
import apiSearchterm from "@/api/modules/searchterm.js";
import apiPlace from "@/api/phase2/place.js"
import apiCourseTag from '@/api/modules/courseTag.js'
export default {
  name: "index",
  components: {
    portalHeader,
    portalFooter,
    portalFloatTools,
    courseItem,
    courseForm,
    authorInfo,
    couresinteract,
    courseImage,
    interactBar
  },
  computed: {
    ...mapGetters(["resOwnerMap", "sysTypeMap", "userInfo", "identity"]),
    typeList() {
      let list = [];

    },
    stagList() { //计算出选择的内容
      let list = [];

      // 关键词
      if (this.keyword) {
        list.push({
          type: 0,
          id: 'keyword',
          name: this.keyword,
          tagName: this.keyword,
          checked: true
        });
      }

      // 课程类型
      this.ctypeList.forEach(item => {
        if (item.checked) {
          list.push({
            ...item,
            tagName: item.name
          });
        }
      });

      // 热点标签 - 这是关键修复
      this.hotTagsList.forEach(item => {
        if (item.checked) {
          list.push({
            ...item,
            name: item.tagName || item.name,
            tagName: item.tagName || item.name,
            type: 14
          });
        }
      });

      // 三级分类
      this.oneList.forEach(one => {
        var twoChildChecked = false;
        one.children.forEach(two => {
          if (two.checked) {
            twoChildChecked = true;
          }
          var threeChildChecked = false;
          two.children.forEach(three => {
            if (three.checked) {
              list.push({
                ...three,
                tagName: three.name
              });
              threeChildChecked = true;
            }
          });
          if (two.checked && !threeChildChecked) {
            list.push({
              ...two,
              tagName: two.name
            });
          }
        });
        if (one.checked && !twoChildChecked) {
          list.push({
            ...one,
            tagName: one.name
          });
        }
      });

      return list;
    },
    ctypeTagAll() {
      let flag = this.ctypeList.some(item => {
        return item.checked;
      });
      return !flag;
    },
    // oneTagAll() {
    //   let flag = this.oneList.some(item => {
    //     return item.checked;
    //   });
    //   return !flag;
    // },
    // twoTagAll() {
    //   let flag = this.twoList.some(item => {
    //     return item.checked;
    //   });
    //   return !flag;
    // },
    // threeTagAll() {
    //   let flag = this.threeList.some(item => {
    //     return item.checked;
    //   });
    //   return !flag;
    // }

    // 添加计算是否所有热点标签都未选中（即"全部"选中状态）
    isAllHotTagsSelected() {
      return !this.hotTagsList.some(tag => tag.checked);
    }
  },
  data() {
    return {
      hotTagsList: [],
      newData: false,//线上品牌系列隐藏
      navTitle: [],
      // 设置高亮
      twoId: '',
      count: 0,//分页总条条数
      showUClass: false,
      projectDialogVisible: false,
      ctypeList: [
        { type: 1, id: 20, name: '录播课', checked: false },
        { type: 1, id: 30, name: '线下课', checked: false },
        { type: 1, id: 40, name: '学习项目', checked: false },
      ],
      id: '',
      oneList: [], //一级分类{type:11}
      twoList: [], //二级分类{type:12}
      threeList: [],//三级分类{type:13}
      searching: false,//是否正在搜索中
      studentInfo: {},
      resonimg: {},
      formatDate,
      formatNum: formatUserNumber,
      audiences: [],//当前用户的受众
      couretitle: "",
      toScore,
      noPageList: true, //判断接口是否还有数据
      noDataList: true, //判断接口是否还有数据
      moreState: 1, // 1 加载更多 2 加载中 3无数据
      columns: 3, //列的数量
      fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
      // 查询信息
      course: {
        orderField: "studys",
        companyId: '',
        keyword: '',//关键词
        topOrder: true,
        orderAsc: false,
        pageIndex: 1, // 第几页
        pageSize: 9,//每页多少条
        openCourse: 0,//增加的公开课查询
        userId:''
      },
      sceneList: [], //场景
      keyword: "",//查询的关键字
      anking: "",
      isFind: false,
      searchbar: {
        top: false
      },
      ankingList: [],
      scorelist: [],
      queryExpand: true, // true更多，false收起
      //status: 1,
      pager: {
        total: 40
      },
      data: [{}, {}, {}, {}],
      order: 1,
      courseList: [],
      searchRecords: [],
      hotList: [],
      totalPages: 1,
      localSessionKey: this.$xpage.constants.localCourseFiltersKey,
      // isAllHotTagsSelected: true,
    };
  },
  // 受众需要每次刷新
  created() {
    let localKey = "user_" + this.userInfo.sysId + "_gids";
    apiUserbasic.getInAudienceIds().then(rs => {
      if (rs.status == 200) {
        this.audiences = rs.result;
        sessionStorage.setItem(localKey, this.audiences);
      } else {
        console.log(rs.message);
      }
    })
    //初始化:获取最新前10个热点标签
    apiCourseTag.getHotTagList(null).then(rs => {
      if (rs.status == 200) {
        this.hotTagsList = rs.result.map(tag => ({
          ...tag,
          checked: false
        }));
      } else {
        console.log(rs.message);
      }
    })
  },
  mounted() {
    let screenWidth = window.screen.availWidth;
    // if (screenWidth < 1280) {
    //   this.course.pageSize = 9;
    //   this.columns = 3;
    // } else if (screenWidth < 1600) {
    //   this.course.pageSize = 12;
    //   this.columns = 3;
    // } else if (screenWidth >= 1600) {
    //   this.course.pageSize = 15;
    //   this.columns = 3;
    // }

    let el_top = document.querySelector("#searchbar");
    let el_search = document.querySelector("#searchbar");
    let height = 200;
    let flag = true;
    let $this = this;
    this.getAnkingData();
    // window.addEventListener("scroll", this.handleScroll);
    // if (this.$route.query !== {}) {
    if (this.$route.query.keyword) {
      this.keyword = this.$route.query.keyword;
    }
    this.loadTypeData();//加载分类
    //this.getSceneData(); //已经没有场景了
    if (this.keyword) {
      this.totalPages = 4;
    }
    //新加
    this.refId = this.$route.query.recommendId;
    if (this.refId) {
      this.course.type = 'recommend'
    }
    this.loadSysTypes();
    this.getScoreList();
    this.getHotList();
    // this.toCourseDetail(item);
    // this.orderChange(id);
    //查询排行榜，页面打开只查询一次
    let localKey = "user_" + this.userInfo.sysId + "_gids";
    if (this.audiences.length == 0) {
      //let hasIds;
      let hasIds = sessionStorage.getItem(localKey);
      if (hasIds && hasIds.length > 0) {
        this.audiences = hasIds.split(",");
        this.search();
      } else {
        apiUserbasic.getInAudienceIds().then(rs => {
          if (rs.status == 200) {
            this.audiences = rs.result;
            sessionStorage.setItem(localKey, this.audiences);
          } else {
            console.log(rs.message);
          }
          this.search();
        })
        // Promise.all([apiOldCourse.audience(this.userInfo.sysId),apiUserGroup.userGroupIds()]).then(rs=>{
        //    //console.log(rs,'rs');
        //    let aids=[];
        //    if(rs[0].status==200){
        //      aids.push(rs[0].result);
        //    }
        //    if(rs[1].status==200){
        //      aids.push(rs[1].result);
        //    }
        //    this.audiences=aids;
        //    sessionStorage.setItem(localKey,this.audiences);
        //    this.search();
        // })
      }
    }

    //this.searchterm();//搜索词已经没有了
    this.couresreso();//广告位

  },
  beforeDestroy() {
    // window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    getSearchMode() {
      const hasKeyword = this.keyword && this.keyword.trim() !== '';

      // 检查是否有导航标签被选中
      const hasNavigationTags = this.stagList.some(tag => {
        // 课程类型(1)、热点标签(14)、分类标签(11,12,13)
        return [1, 11, 12, 13, 14].includes(tag.type) && tag.checked;
      });

      if (hasKeyword && hasNavigationTags) {
        return 'mixed'; // 混合模式：关键字 + 导航标签
      } else if (hasKeyword) {
        return 'keyword'; // 纯关键字搜索
      } else if (hasNavigationTags) {
        return 'navigation'; // 纯导航标签搜索
      } else {
        return 'none'; // 无搜索条件
      }
    },

    // 高亮标签关键字
    highlightTagKeyword(tag) {
      const searchMode = this.getSearchMode();

      switch (searchMode) {
        case 'keyword':
          return this.highlightPartialMatch(tag);
        case 'navigation':
          return this.highlightExactMatch(tag);
        case 'mixed':
          return this.highlightMixedMode(tag);
        default:
          return tag;
      }
    },

    // 部分匹配高亮（纯关键字搜索模式）
    highlightPartialMatch(tag) {
      const searchKeywords = this.stagList
        .filter(searchTag => searchTag.type === 0) // 只处理关键字类型
        .map(searchTag => searchTag.tagName || searchTag.name)
        .filter(keyword => keyword && keyword.trim());

      if (searchKeywords.length === 0) {
        return tag;
      }

      let highlightedTag = tag;

      searchKeywords.forEach(keyword => {
        if (tag.includes(keyword)) {
          const regex = new RegExp(`(${this.escapeRegExp(keyword)})`, 'gi');
          highlightedTag = highlightedTag.replace(regex, '<span class="keyword-highlight">$1</span>');
        }
      });

      return highlightedTag;
    },

    // 完全匹配高亮（纯导航标签模式）
    highlightExactMatch(tag) {
      const isMatched = this.stagList.some(searchTag => {
        // 只检查导航标签类型
        if (searchTag.type === 0) return false;

        const searchName = searchTag.tagName || searchTag.name;
        return searchName === tag;
      });

      if (isMatched) {
        return `<span class="exact-match-highlight">${tag}</span>`;
      }

      return tag;
    },

    // 混合模式高亮（关键字 + 导航标签）
    highlightMixedMode(tag) {
      // 1. 先检查是否完全匹配导航标签
      const exactMatched = this.stagList.some(searchTag => {
        if (searchTag.type === 0) return false;

        const searchName = searchTag.tagName || searchTag.name;
        return searchName === tag;
      });

      // 2. 如果完全匹配导航标签，整个标签高亮
      if (exactMatched) {
        return `<span class="exact-match-highlight">${tag}</span>`;
      }

      // 3. 否则检查是否包含关键字，进行部分高亮
      const searchKeywords = this.stagList
        .filter(searchTag => searchTag.type === 0)
        .map(searchTag => searchTag.tagName || searchTag.name)
        .filter(keyword => keyword && keyword.trim());

      if (searchKeywords.length === 0) {
        return tag;
      }

      let highlightedTag = tag;
      let hasKeywordMatch = false;

      searchKeywords.forEach(keyword => {
        if (tag.includes(keyword)) {
          const regex = new RegExp(`(${this.escapeRegExp(keyword)})`, 'gi');
          highlightedTag = highlightedTag.replace(regex, '<span class="keyword-highlight">$1</span>');
          hasKeywordMatch = true;
        }
      });

      // 4. 如果有关键字匹配，返回部分高亮结果
      if (hasKeywordMatch) {
        return highlightedTag;
      }

      // 5. 都不匹配，返回原标签
      return tag;
    },

    // 辅助方法：转义正则表达式特殊字符
    escapeRegExp(string) {
      return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    },

    isTagMatched(tag) {
      // 检查stagList中是否有匹配的标签
      return this.stagList.some(searchTag =>
        searchTag.tagName === tag || searchTag.name === tag
      );
    },

    // 添加清除热点标签选中的方法
    handleClearHotTags() {
      // 清除所有热点标签的选中状态
      this.hotTagsList.forEach(tag => {
        tag.checked = false;
      });
      // 清空course.tags
      this.course.tags = '';

      // 触发搜索
      this.searchData();
    },

    // 改变分页
    currentChange(val) {
      this.course.pageIndex = val
      this.search()
    },
    // 移入
    changeIndex(twoId) {
      this.twoId = twoId
    },
    // 移除
    leaveIndex() {
      this.twoId = ''
    },
    tylClick() {
      window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130");
    },
    cylClick() {
      window.open("https://u.boe.com/pc/course?keyword=创新力专区");
    },
    showClass(flag) {
      if (flag) {
        this.showUClass = flag;
      }
    },
    uClassClick() {
      // this.showUClass = true;
      window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130")
    },
    saveLocalFilters() {
      let typeCodeList = [];
      this.stagList.forEach(item => {
        typeCodeList.push({
          type: item.type,
          id: item.id,
          name: item.name
        })
      });
      let typeCodeString = JSON.stringify(typeCodeList);
      //console.log(typeCodeString);
      sessionStorage.setItem(this.localSessionKey, typeCodeString);
    },
    loadLocalFilters() {
      let hasData = sessionStorage.getItem(this.localSessionKey);
      let $this = this;
      if (hasData) {
        let typeCodeList = JSON.parse(hasData);
        typeCodeList.forEach(item => {
          if (item.type == 0) {
            this.keyword = item.name;
          } else if (item.type == 1) {
            if (item.id == 20) {
              $this.ctypeList[0].checked = true;
            } else if (item.id == 30) {
              $this.ctypeList[1].checked = true;
            } else if (item.id == 40) {
              $this.ctypeList[2].checked = true;
            }
          } else { //三级分类的处理，如果一个分类选中多个，显示哪个，显示第一个，是否可以
            this.oneList.forEach(one => {
              if (one.id == item.id && item.type == '11') {
                this.navTitle = [{ ...one }]
                one.checked = true
              }
              one.children.forEach(two => {
                if (two.id == item.id && item.type == '12') {
                  this.navTitle = [{ ...one }, { ...two }]
                  two.checked = true
                }
                two.children.forEach(three => {
                  if (three.id == item.id && item.type == '13') {
                    this.navTitle = [{ ...one }, { ...two }, { ...three }]
                    three.checked = true
                  }
                })
              })
            })
          }
        })
      }
    },
    //搜索条件
    stagClose(tag, tagIndex) {
      tag.checked = false;

      // 根据标签类型处理不同的清除逻辑
      if (tag.type == 0) {
        // 关键词类型
        this.keyword = '';
      } else if (tag.type == 1) {
        // 课程类型（录播课、线下课、学习项目）
        this.ctypeList.forEach(item => {
          if (item.id == tag.id) {
            item.checked = false;
          }
        });
      } else if (tag.type == 14) {
        // 热点标签类型
        this.hotTagsList.forEach(item => {
          if (item.id == tag.id) {
            item.checked = false;
          }
        });

        // 更新course.tags，移除被删除的热点标签
        const checkedHotTags = this.hotTagsList.filter(tag => tag.checked);
        let tagIds = checkedHotTags.map(tag => tag.id).join(',');
        this.course.tags = tagIds;

      } else if (tag.type == 11 || tag.type == 12 || tag.type == 13) {
        // 三级分类标签
        this.oneList.forEach(one => {
          if (one.id == tag.id) {
            one.checked = false;
          }
          one.children.forEach(two => {
            if (two.id == tag.id) {
              two.checked = false;
            }
            two.children.forEach(three => {
              if (three.id == tag.id) {
                three.checked = false;
              }
            });
          });
        });
      }

      // 重置导航标题
      this.navTitle = [];

      // 触发搜索更新
      this.searchData();
    },

    // 导航全选
    handleTypeAllClick(t) {
      if (t == 1) {
        this.ctypeList.forEach(ct => {
          ct.checked = false;
        })
      } else if (t == 11) {
        this.oneList.forEach(ct => {
          ct.checked = true;
        });
        this.twoList.forEach(ct => {
          ct.checked = true;
        });
        this.threeList.forEach(ct => {
          ct.checked = false;
        });
        this.twoList = [];
        this.threeList = [];
      } else if (t == 12) {
        this.twoList.forEach(ct => {
          ct.checked = false;
        });
        this.threeList.forEach(ct => {
          ct.checked = false;
        });
        this.threeList = [];
      } else if (t == 13) {
        this.threeList.forEach(ct => {
          ct.checked = false;
        })
      }
      this.searchData(1);
    },
    // 清除
    handleClearTags() {
      //清空所有的条件
      this.keyword = '';
      this.ctypeList.forEach(item => {
        item.checked = false;
      });
      this.hotTagsList.forEach(item => {
        item.checked = false;
      });
      this.course.tags = ''; // 清空标签ID

      // 添加清除三级分类的逻辑
      this.oneList.forEach(one => {
        one.checked = false;
        one.children.forEach(two => {
          two.checked = false;
          two.children.forEach(three => {
            three.checked = false;
          });
        });
      });

      // 清空导航标题
      this.navTitle = [];

      this.searchData();
    },
    // 导航切换(录播课，线下课，学习项目)
    handleTypeClick(item, list) {
      item.checked = !item.checked;
      //使用上面一行是可以多选，使用下面是单选
      // list.forEach(row=>{
      //   row.checked=false;
      // })
      // item.checked=true;

      this.searchData(1);
    },
    //点击标签
    handleTagClick(item, list,type) {

      item.checked = !item.checked;

      // 更新course.tags
      const checkedTags = this.hotTagsList.filter(tag => tag.checked);
      let tagIds = checkedTags.map(tag => tag.id).join(',');
      this.course.tags = tagIds;

      // 强制触发stagList重新计算
      this.$nextTick(() => {
        this.searchData(type);
      });
    },
    //三级分类
    handleOptionClick(item, level, list) {
      // 线上品牌展示效果
      this.newData = item.newData;
      // 单选，排除法
      this.oneList.forEach(one => {
        one.checked = false;
        if (one.id == item.id) {
          this.navTitle = [{ ...one }]
          one.checked = true;
        }
        one.children.forEach(two => {
          two.checked = false;
          if (two.id == item.id) {
            this.navTitle = [{ ...one }, { ...two }]
            two.checked = true
          }
          two.children.forEach(three => {
            three.checked = false;
            if (three.id == item.id) {
              this.navTitle = [{ ...one }, { ...two }, { ...three }]
              three.checked = true
            }
          })
        })
      })

      // item.checked = !item.checked;
      //使用上面一行是可以多选，使用下面是单选
      // list.forEach(row => {
      //   row.checked = false;
      // })
      // item.checked = true;
      // //以下是新的规则的修改，
      // if (!item.checked) {
      //   //清空它下面的所有的中的
      //   item.children.forEach(subItem => {
      //     subItem.checked = false;
      //     if (subItem.children) {
      //       subItem.children.forEach(sub => {
      //         sub.checked = false;
      //       })
      //     }
      //   });
      //   if (level == 1) {
      //     this.twoList = [];
      //     this.threeList = [];
      //   }
      //   if (level == 2) {
      //     this.threeList = [];
      //   }
      //   this.searchData();
      //   return;
      // }

      // let $this = this;
      // if (level == 1) { //一级的情况
      //   this.twoList = [];
      //   this.threeList = [];
      //   let lastCheked = null;
      //   item.children.forEach(two => {
      //     $this.twoList.push(two);
      //     if (two.checked) {
      //       lastCheked = two;
      //     }
      //   });
      //   if (lastCheked != null) {
      //     $this.threeList = lastCheked.children;
      //     item.children.forEach(three => {
      //     });
      //   }
      // } else if (level == 2) { //二级的情况
      //   this.threeList = item.children;
      // } else if (level == 3) { //三级的情况

      // }
      //this.handleChangeTypes(item);
      this.searchData();
    },
    // 无用
    handleChangeTypes(item) {
      console.log(item);
      //重新计算
      this.twoList = [];
      this.threeList = [];
      let $this = this;
      // this.oneList.forEach(one=>{
      //   if(one.checked){
      //      one.children.forEach(two=>{
      //        $this.twoList.push(two);
      //        if(two.checked){
      //           two.children.forEach(three=>{
      //             $this.threeList.push(three);
      //           })
      //        }
      //      });
      //   }
      // })
      this.oneList.forEach(one => {
        if (one.checked) {
          one.children.forEach(two => {
            $this.twoList.push(two);
            if (two.checked) {
              two.children.forEach(three => {
                $this.threeList.push(three);
              })
            }
          });
        }
      })
    },
    // 加载分类
    async loadTypeData() {
      let $this = this;
      try {
        const { result, status } = await apiType.tree(1);
        if (status === 200) {
          let tree = [];
          result.forEach((item, index) => {
            let newItem = {
              type: 11,
              id: item.id,
              name: item.name,
              children: [],

              checked: false
            }
            if (item.children) {
              //增加死数据
              // item.children.push({
              //   type: 12,
              //   id: item.id * (index + 200),
              //   name: '线上品牌系列课程',
              //   children: [],
              //   checked: false,
              //   newData: true
              // })
              item.children.forEach(subItem => {
                let newSubItem = {
                  type: 12,
                  id: subItem.id,
                  name: subItem.name,
                  children: [],
                  checked: false,
                  newData: subItem?.newData || false
                }

                if (subItem.children) {
                  subItem.children.forEach(sub => {
                    let newSub = {
                      type: 13,
                      id: sub.id,
                      name: sub.name,
                      children: [],
                      checked: false
                    }
                    newSubItem.children.push(newSub);
                  })
                }
                newItem.children.push(newSubItem);
              })
            }
            $this.oneList.push(newItem);


          });
          this.loadLocalFilters();
          // this.search()
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 无用
    banJump() {
      if (this.resonimg.JumpUrl) {
        window.open(this.resonimg.JumpUrl);
      }
    },
    couresreso() {
      let key = 'course';
      apiPlace.detail(key).then(res => {
        let resImgList = JSON.parse(res.result.content);
        if (resImgList && resImgList.length > 0) {
          this.resonimg = resImgList[0]
        }
      })
    },
    // 无用
    jumUX() {
      window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130", "_blank");
    },
    // 无用
    jumOpen() {
      //公开课 openCourse=1
      this.course.openCourse = 1;//
      this.searchData();
    },
    // 头部
    emitInput(val) {
      this.keyword = val;
      //this.stagList;
      this.searchData();
    },

    // 滚动
    // handleScroll() {
    //   if (this.courseList.length > 6) {

    //     let innerHeight = document.querySelector("#couser-list-content").clientHeight;
    //     let outerHeight = document.documentElement.clientHeight;
    //     let scrollTop = document.documentElement.scrollTop;
    //     let outerWidth = document.querySelector(".xcontent2-minor").clientWidth;
    //     if (outerHeight + scrollTop + 350 >= innerHeight) {
    //       if (this.moreState == 1 && this.course.pageIndex < 4) {
    //         this.loadMore();
    //       }
    //     }
    //     //console.log(this.course.pageIndex,'this.course.pageIndex');
    //     //加此判断，是为了没有数据时的闪动问题
    //     //if(this.course.pageIndex >1){
    //     if (scrollTop > 1176) {
    //       document.querySelector("#fixd-box").style.cssText =
    //         "position: fixed;top: -882px;width:" + outerWidth + "px";
    //     } else {
    //       document.querySelector("#fixd-box").style.cssText = "position: static";
    //     }
    //     //}
    //   }
    // },

    toNeedCourse() {// 上传
      // 需要先切换标签
      //this.$store.dispatch('SetCurIdentity',2);
      //this.$router.push('/need/course?open=new');
      this.$refs.floatTools.toNeedCourse();

    },
    searchData(type) {
      this.course.pageIndex = 1;
      this.noPageList = true; //判断接口是否还有数据
      this.noDataList = true; //判断接口是否还有数据
      this.courseList = [];
      this.totalPages = 4;
      this.search(type);
    },
    inputOn() {
      this.$forceUpdate();
    },
    ...mapActions({
      getResOwnerTree: "resOwner/getResOwnerTree",
      loadResOwners: "resOwner/loadResOwners",
      getSysTypeTree: "sysType/getSysTypeTree",
      loadSysTypes: "sysType/loadSysTypes"
    }),
    sysTypeName(code) {
      if (code == "") {
        return "";
      }
      return this.sysTypeMap.get(code);
    },
    searchterm() {
      apiSearchterm.list(5, 1).then(res => {
        if (res.status == 200) {
          this.searchRecords = res.result;
        }
      });
    },
    //课程列表详情
    toCourseDetail(item) {
      let $this = this;
      let courseId = item.id;
      if (!courseId) {
        courseId = item.courseId;
      }
      if (item.source == 1) {
        //return `${this.webBaseUrl}/course/boeframe?id=${item.id}&type=${item.type}`;
        //location.href=`${this.webBaseUrl}/course/boeframe?id=${item.id}&type=${item.type}`;
        this.$router.push('/course/boeframe?id=' + courseId + '&type=' + item.type);
        //此处使用window.open有问题
        //window.open(`${this.webBaseUrl}/course/boeframe?id=${item.id}&type=${item.type}`);
      } else if (item.source == 3) {
        //跳转到管理系统的页面
        let manageApi = process.env.VUE_APP_MANAGER_API_PATH;
        let studentPath = process.env.VUE_APP_STUDENT_PATH;
        if (item.type == 30) { //线下课，面授课
          let params = encodeURIComponent('courseId=' + courseId);
          this.$router.push('/forward?to=' + manageApi + '/stu/project/redirectDetail&params=' + params);
        } else if (item.type == 40) { //学习项目
          let params = encodeURIComponent('projectId=' + courseId);
          this.$router.push('/forward?to=' + studentPath + '/projectdetails&params=' + params);
          //this.$router.push('/forward?to='+manageApi+'/stu/project/redirectDetail&params='+params);
        }
      } else {
        if (item.type == 10) {
          //return this.webBaseUrl + "/course/studyindex?id=" + item.id;
          this.$router.push("/course/studyindex?id=" + courseId);
        } else if (item.type == 20) {
          apiCourseStudy.hasSignup(courseId).then(rs => {
            if (rs.status == 200) {
              //return $this.webBaseUrl + "/course/studyindex?id=" + item.id;
              this.$router.push("/course/studyindex?id=" + courseId);
            } else {
              //return $this.webBaseUrl + "/course/detail?id=" + item.id;
              this.$router.push("/course/detail?id=" + courseId);
            }
          })
          //return $this.webBaseUrl + "/course/detail?id=" + item.id;
        }
      }
    },
    orderChange(id) {
      this.course.orderField = id;
      this.course.pageIndex = 1;
      this.noPageList = true; //判断接口是否还有数据
      this.noDataList = true; //判断接口是否还有数据
      this.courseList = [];
      this.totalPages = 1;
      this.search();
    },
    //获取场景，保留
    async getSceneData() {
      try {
        const { result, status } = await scene.list(1);
        if (status === 200) {
          this.sceneList = result;
        }
      } catch (error) {
        console.log(error);
      }
    },
    loadMore() {
      this.course.pageIndex += 1;
      this.search();
    },
    // 高亮搜索词
    brightenKeyword(val, keyword) {
      const Reg = new RegExp(keyword, 'i');
      let res = '';
      if (val) {
        res = val.replace(Reg, `<span style="color: #3e7fff;">${keyword}</span>`);
        return res;
      }
    },
    brightenKeywords(val, keyword) {
      if (!val) return
      const keywordData = val.filter(item => item.indexOf(keyword) != -1)
      const Reg = new RegExp(keyword, 'i');
      return keywordData.map(item => {
        let color = '#e89e42'
        let equalityColor = '#387DF7'
        let listData = item.replace(Reg, `<span style="color: ${item == keyword ? equalityColor : color};">${keyword}</span>`)
        const regex = /(.*?)(<span.*?>)(.*?)(<\/span>)(.*)/i;
        const match = regex.exec(listData);
        console.log(match);
        const contentStart = match[1];
        const spanTag = match[2];
        const content = match[3];
        const spanEnd = match[4];
        const contentEnd = match[5];
        let modifiedStr = '';
        if (!contentStart) {
          modifiedStr = `${spanTag}${content.substring(0, 3)}${spanEnd}${content.length == 1 ? contentEnd.substring(0, 2) : content.length == 2 ? contentEnd.substring(0, 1) : ''}`
        } else if (contentStart.length == 1) {
          modifiedStr = `${contentStart}${spanTag}${content.substring(0, 2)}${spanEnd}${content.length == 1 ? contentEnd.substring(0, 1) : ''}`
        } else if (contentStart.length == 2) {
          modifiedStr = `${contentStart}${spanTag}${content.substring(0, 1)}${spanEnd}`
        } else {
          modifiedStr = contentStart.substring(0, 3)
        }
        console.log(modifiedStr);
        return {
          name: modifiedStr,
          title: listData,
          showTitle: item.length > 3
        }
      })
    },
    getAllChecked() { //获取全部选中的标签
      let list = [];
      //获取选中的课程类型
      this.ctypeList.forEach(item => {
        if (item.checked) {
          list.push(item);
        }
      });
      //获取选中的热点标签
      this.hotTagsList.forEach(item => {
        if (item.checked) {
          list.push(item);
        }
      });
      this.oneList.forEach(one => {
        one.children.forEach(two => {
          two.children.forEach(three => {
            if (three.checked) {
              list.push(three);
            }
          });
          if (two.checked) {
            list.push(two);
          }
        });
        if (one.checked) {
          list.push(one);
        }
      })
      return list;
    },
    // 查询
    async search(type) {
      //
      if (this.searching) {
        this.$message.warning("正在搜索中，请待搜索完成后再重新搜索");
        return;
      }
      this.searching = true;
      //测试时间格式化
      // let s=1650973801;
      // var d = new Date(1650973801*1000);
      // console.log(formatDateByFmt(d,'yyyy-MM-dd hh:mm'),'data');
      this.saveLocalFilters();
      let that = this;
      if (this.keyword) {
        apiSearchterm.save({ keyword: this.course.keyword, type: 1 });
      }

      if (this.audiences.length > 0) {
        this.course.audiences = this.audiences.join(",");
      }
      //console.log(this.userInfo)
      //this.course.companyId=this.userInfo.companyId;
      this.course.type = "";//不使用单查询了
      this.course.types = "";
      this.course.sysType1 = "";
      this.course.sysType2 = "";
      this.course.sysType3 = "";
      this.course.keyword = this.keyword;
      let allChecked = this.getAllChecked();
      allChecked.forEach(item => {
        if (item.type == 1) {
          if (that.course.types) { that.course.types += '-'; }
          that.course.types += item.id;
        } else if (item.type == 11) {
          if (that.course.sysType1) { that.course.sysType1 += '-'; }
          that.course.sysType1 += item.id;
        } else if (item.type == 12) {
          if (that.course.sysType2) { that.course.sysType2 += '-'; }
          that.course.sysType2 += item.id;
        } else if (item.type == 13) {
          if (that.course.sysType3) { that.course.sysType3 += '-'; }
          that.course.sysType3 += item.id;
        }
      });
      if (!type && type !== 1){
        apiCourseTag.getHotTagList(that.course).then(rs => {
          if (rs.status == 200) {
            // 保留已选中标签的状态
            const currentCheckedTags = this.hotTagsList.filter(tag => tag.checked);
            this.hotTagsList = rs.result.map(tag => ({
              ...tag,
              checked: currentCheckedTags.some(checkedTag => checkedTag.id === tag.id)
            }));
          } else {
            console.log(rs.message);
          }
        })
      }
      this.isFind = true;
      this.course.device = 1;
      if (this.course.pageIndex == 1) {
        this.courseList = [];
      }

      let isTopList = [];
      // 隐藏loadMore
      this.moreState = 2;
      this.course.userId = this.userInfo.aid
      await apiCoursePortal.courseSearch(this.course).then(res => {
        this.searching = false;
        if (res.status == 200) {
          this.totalPages = res.result.totalPages;
          res.result.list.forEach(item => {
            if (item.startTime != '') {
              item.startTime = formatDateByFmt(new Date(item.startTime * 1000), 'yyyy-MM-dd hh:mm')
              //let time = item.startTime.split('-');
              //item.startTime = `${time[0]}年${time[1]}月${time[2]}日`
            }
            //教师转化
            if (item.teacher) {
              item.teacher = item.teacher.split(',').filter(itemValue => itemValue !== 'BOE教师').join(',');
              // if (dotIdx > 0) {
              // item.teacher = item.teacher.substring(0, dotIdx);
              // }
            }
            if (item.teacher && item.teacher == 'BOE教师') {
              item.teacher = '';
            }

            //转化标红显示
            item.title = item.name;
            if (that.course.keyword) {
              item.name = that.brightenKeyword(item.name, that.course.keyword);
              item.keywordsActive = that.brightenKeywords(item.keywordsList, that.course.keyword)
              console.log(item.keywordsActive);
            } else {
              item.name = item.name;
            }
          });
          console.log(res.result.list,'data')
          this.courseList = res?.result?.list ?? []
          console.log(this.courseList);
          if (this.newData) {
            this.courseList = [
              {
                audiences: "",
                companyId: "",
                coverImg: "",
                createdAt: "",
                device: 3,
                domainIds: "",
                duration: 7,
                endTime: "",
                esId: "Z4LAbYkBfn0lSHQ9acXX",
                id: "1091051270927183872",
                isSetAudience: 0,
                isTop: 0,
                keywords: "回归,新建,在线,课程",
                keywordsList: ['回归', '新建', '在线', '课程'],
                maxDuration: "",
                name: "人力资源知识技能晋升（人力资源总监空降现场，为各位答疑解惑",
                openCourse: 0,
                openEnroll: 0,
                orderType: "",
                publishTime: 1689748779,
                resOwner: "",
                score: 5,
                source: 2,
                startTime: "",
                studies: 2,
                studiesFormat: "",
                summary: "",
                sysType1: "966458733088919552",
                sysType2: "966459050400600064",
                sysType3: "1060578278816509959",
                tags: "",
                teacher: "张学智",
                teacherCode: "",
                title: "BOE",
                topTime: "",
                type: 20,
                types: "",
                remark: '备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备'
              },
            ]
          }
          this.count = res?.result?.count
          if (this.newData) {
            this.count = 1
          }
          this.moreState = 3
        } else {
          this.moreState = 2;
        }
      })
        .catch(err => {
          this.moreState = 2;
        });
    },
    // showInApply() {
    //   this.inapply.show = true;
    // },
    // pushEnter(type) {
    //   this.type1.push(type);
    // },
    // deleteOut(type) {
    //   this.type1 = this.type.filter(item => item != type);
    // },
    // chooseShow(type) {
    //   return this.type1.some(item => item == type);
    // },
    getAnkingData() {
      apiCourse.ranking().then(res => {
        if (res.status == 200) {
          res.result.forEach(item => {
            if (item.publishTime != '') {
              item.coverImg = item.images;
              let time = item.publishTime.split('-');
              item.publishTime = `${time[0]}年${time[1]}月${time[2]}日`
            }
          })
          this.ankingList = res.result;
        }
      });
    },
    getScoreList() {
      apiCourse.scorelist(5, 2).then(res => {
        if (res.status == 200) {
          res.result.forEach(item => {
            if (item.publishTime != '') {
              item.coverImg = item.images;
              let time = item.publishTime.split('-');
              item.publishTime = `${time[0]}年${time[1]}月${time[2]}日`
            }
          })
          this.scorelist = res.result;
          // console.log(this.scorelist)
        }
      });
    },
    getHotList() {
      apiCourse.studyCounts(5).then(res => {
        if (res.status == 200) {
          res.result.forEach(item => {
            if (item.publishTime != '') {
              item.coverImg = item.images;
              let time = item.publishTime.split('-');
              item.publishTime = `${time[0]}年${time[1]}月${time[2]}日`
            }
          })
          this.hotList = res.result;
        }
      });
    },
    jumpRouter(item) {
      //console.log(item.type, "item.type");
      // return console.log(id,type,"fihkj1")
      // if (item.type == 20) {
      //录播课
      //  window.open(`${this.webBaseUrl}/course/detail?id=${id}`)
      this.$router.push(`/course/detail?id=${item.id}`);
      // }
      // if (item.type == 10) {
      //微课
      //  window.open(`${this.webBaseUrl}/course/micro?id=${id}`)
      //   this.$router.push(`/course/micro?id=${item.id}`);
      // }
    },
    jumpRouter2(item) {
      // console.log(item,"土豪包括九年")
      let type = item.courseType;
      let id = item.courseId;

      //console.log(item.type,type,'item.type');
      // return console.log(id,type,"fihkj1")
      // if (type == 20) {
      //录播课
      //  window.open(`${this.webBaseUrl}/course/detail?id=${id}`)
      this.$router.push(`/course/detail?id=${id}`);
      // }
      // if (type == 10) {
      //微课
      //  window.open(`${this.webBaseUrl}/course/micro?id=${id}`)
      //   this.$router.push(`/course/micro?id=${id}`);
      // }
    }
  }
};
</script>

<style scoped lang="scss">
.couser-list-content {
  min-height: 110%;
}

// 标题
.navTitle {
  margin-bottom: 20px;

  & a:hover {
    color: #387DF7;
  }

  .oneTitle {
    display: inline-block;
    cursor: pointer;

    & .titleName:hover {
      color: #387DF7;
    }
  }
}

// 三级背景高度
.course-recommended-style{
  position: relative;
  height: 142px;
  background-image: url('../../../assets/images/course/courserecommended.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
}
.course-title-style {
  position: relative;
  height: 100px;
  background-image: url('../../../../public/images/courseBg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;

  .imgTilte {

    & div:first-child {
      padding-left: 40px;
      font-size: 30px;
      color: #FFFFFF;
    }

    & div:last-child {
      padding-left: 40px;
      font-size: 20px;
      color: #FFFFFF;
      opacity: .5;
      font-family: ArialMT !important;
    }

  }
}

// 三级列表
.course-list {
  background-color: #fff;

  .course-one {
    position: relative;

    .course-one-content {
      cursor: pointer;
      line-height: 38px;
      height: 38px;
      padding-left: 40px;
      background: linear-gradient(270deg, #F0F7FF 0%, #DDEDFF 100%);
    }

    // 二级的高亮
    .courseTwoActive {
      color: #387DF7;
      border-image: linear-gradient(90deg, rgba(47, 101, 236, 1), rgba(228, 236, 255, 1)) 1 1 !important;
    }

    .course-two {
      position: relative;
      border-bottom: 1px solid;
      border-image: linear-gradient(333deg, rgba(243, 243, 243, 1), rgba(227, 227, 227, 1)) 1 1;

      .course-two-content {
        cursor: pointer;
        height: 38px;
        line-height: 38px;
        font-size: 16px;
        padding-left: 40px;
      }
    }

    .popover {
      background: linear-gradient(180deg, rgba(78, 166, 255, 0.2) 0%, rgba(78, 166, 255, 0) 100%);
    }

  }

}

// 导航
.topNav {
  display: flex;
  margin-bottom: 20px;
  height: auto;
  min-height: 80px;
  align-items: center;

  .nav {
    display: flex;
    align-items: center;

    .option-item {
      position: relative;
      margin: 0 15px;

      .nav-bottbor {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 4px;
        background: #387DF7;
        border-radius: 5px;
      }
    }
  }
}

.u-class {
  ::v-deep .el-dialog {
    border-radius: 15px;

    .el-dialog__headerbtn .el-dialog__close {
      color: white;
      position: absolute;
      z-index: 99;
      right: 15px;
    }
  }

  ::v-deep .el-dialog__body {
    padding: 0px;
  }

  .ClassBoxContent {
    width: 100%;
    height: 396px;
    // background: red;
    border-radius: 15px;

    .ContentBox {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 9;
      display: flex;

      .left,
      .right {
        height: calc(100% - 30px);
      }

      .left {
        padding-left: 30px;
        width: 48%;
        margin-top: -32px;

        .title {
          width: 200px;
          height: 59px;
          line-height: 59px;
          text-align: center;
          margin-left: -8px;
          font-size: 38px;
          color: white;
          margin-top: 42.97px;
          padding-top: 5px;
          text-shadow: 0 6px 3px rgba(96, 85, 243, 0.4);
        }

        .jy {
          color: white;
          font-size: 20px;
          margin-top: 87.53px;
          font-weight: 400;
        }

        .msg {
          margin-top: 5px;
          color: rgba(255, 255, 255, 0.85);
          width: 326px;
          text-align: justify;
          line-height: 20px;
        }

        .bottom {
          width: 100px;
          height: 1px;
          background: rgba(255, 255, 255, 0.85);
          margin-top: 40px;
        }
      }

      .right {
        // padding-left: 10px;
        width: 50%;

        .tyl {
          cursor: pointer;
          width: calc(100% - 20px);
          background: rgba(255, 255, 255, 0.95);
          box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
          border-radius: 4px;
          height: 160px;
          margin-top: 163px;

          .tyl_title {
            width: 100%;
            padding-left: 20px;
            padding-top: 20px;

            .tyl_title_img {
              width: 18px;
              height: 18px;
            }

            .tyl_title_msg {
              font-size: 20px;
              margin-left: 10px;
              color: #333333;
              font-weight: 600;
            }
          }

          .tyl_jy {
            margin-top: 6.5px;
            font-size: 14px;
            font-weight: 600;
            padding-left: 20px;
            color: #333333;
          }

          .tyl_msg {
            width: 350.36px;
            margin-top: 13px;
            margin-left: 20px;
            font-size: 14px;
            color: #666666;
            font-weight: 400;
            letter-spacing: 0;
            text-align: justify;
          }
        }

        .tyl:hover {
          border: 0.96px solid rgba(140, 105, 242, 1);
          box-shadow: 7px 5px 6px 0px rgba(76, 31, 221, 0.3);
        }
        .text_msg{
          margin: 43px 0 0 222px;
          font-size: 14px;
          color: #000;
        }

        .cyl {
          cursor: pointer;
          width: calc(100% - 20px);
          background: rgba(255, 255, 255, 0.95);
          box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
          border-radius: 4px;
          height: 180px;
          margin-top: 10px;

          .tyl_title {
            width: 100%;
            padding-left: 20px;
            padding-top: 20px;

            .tyl_title_img {
              width: 18px;
              height: 18px;
            }

            .tyl_title_msg {
              font-size: 20px;
              margin-left: 10px;
              color: #333333;
              font-weight: 600;
            }
          }

          .tyl_jy {
            margin-top: 6.5px;
            font-size: 14px;
            font-weight: 600;
            padding-left: 20px;
            color: #333333;
          }

          .tyl_msg {
            width: 350.36px;
            margin-top: 13px;
            margin-left: 20px;
            font-size: 14px;
            color: #666666;
            font-weight: 400;
            letter-spacing: 0;
            text-align: justify;
          }
        }

        .cyl:hover {
          border: 0.96px solid rgba(140, 105, 242, 1);
          box-shadow: 7px 5px 6px 0px rgba(76, 31, 221, 0.24);
        }
      }
    }

    .img {
      width: 835px;
      height: 428px;
      margin-left: -1px;
      margin-top: -1px;
      position: absolute;
      top: 0px;
    }
  }
}

.couresstartTime {
  line-height: 26px;
  height: 26px;
  padding-top: 5px;
  font-size: 14px;
  color: #666;
  // position: absolute;
  // right:2px;
  // height: 20px;
  // bottom: 50px;
}

.interact-bar-value {
  color: #999;
}

.coures-border {
  width: 2px;
  height: 15px;
  border-radius: 20%;
  background: #666;
}

.notcoures {
  text-align: center;

  img {
    width: 360px;
    height: 226px;
  }

  h5 {
    font-size: 14px;
    color: #333333;
    font-weight: 400;
  }
}

.course-type-left {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 60px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background-color: #f99000;
  border-radius: 2px 4px 2px 14px;
  font-size: 12px;
  color: #ffffff;
  -moz-user-select: none;
  /*火狐*/
  -webkit-user-select: none;
  /*webkit浏览器*/
  -ms-user-select: none;
  /*IE10*/
  -khtml-user-select: none;
  /*早期浏览器*/
  user-select: none;
}

.list-lidex {
  display: inline-block;
  display: flex;
}

.course-resources {
  margin-top: 24px;

  img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }
}

.course-img-box {
  position: relative;
}

.course-img-box:hover {
  transform: scale(1.15) translateY(-15px);
  transition: all 0.6s;
}

// 关键字卡片的样式
.keywordInfo-every {
  display: flex;
  padding-top: 5px;

  .keywordInfo {
    width: 54px;
    font-size: 12px;
    line-height: 26px;
    background: #F2F5F7;
    border-radius: 4px;
    position: relative;
    border: 1px solid #387DF7;

    .keyword-content {
      color: #387DF7;
      text-align: center;
    }
  }

  & .keywordInfo:last-child {
    margin-right: 0 !important;
  }

}


.list-active {
  display: none;
  // width: 458px;
  width: 135%;
  height: 165px;
  padding: 20px;
  background: #FFFFFF;
  box-sizing: border-box;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);
  border-radius: 2px;
  border: 1px solid #EDEFF0;
  position: absolute;
  top: 30px;
  left: -17.5%;
  z-index: 999;

  .list-content {
    display: flex;
    padding-bottom: 10px;
    border-bottom: 1px solid #EDEFF0;

    .list-img {
      width: 125px;
      height: 70px;
      position: relative;

      ::v-deep .el-image {
        border-radius: 4px !important;
      }

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

      .course-type {
        position: absolute;
        right: 23.5%;
        // bottom: 26%;
        top: 0;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        color: #FFFFFF;
        padding: 0px 8px;
        background: #f99000;
        border-radius: 0px 0px 0px 10px;
      }
    }

    .list-text {
      flex: 1;

      // margin-left: 12px;
      h6 {
        font-size: 14px;
        margin: 0px;
        font-weight: 500;
        line-height: normal;
        color: #04243C;
      }

      span {
        font-size: 14px;
        color: #6E7B84;
      }
    }
  }

  .list-bottom {
    padding-top: 10px;

    ::v-deep .interact-bar-btns {
      justify-content: space-between !important;

      .interact-bar-btn {
        margin: 0 !important;
      }
    }
  }
}

.list-info {
  position: relative;

  .span {
    display: flex;
  }
}

.list-info:hover .list-active {
  // transition: all 0.5s;
  display: block;
}

.course-banner {
  // height: 240px;
  // background: url('../../../../public/images/course-banner.png');
  background-color: #0078FC;
}

::v-deep .el-radio-button {
  margin-right: 0px;
}

::v-deep .title-line-ellipsis {
  // width: 100%;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  box-sizing: border-box;
  word-break: break-all;
}

::v-deep .el-card__body {
  padding: 0;
}

::v-deep .bacolor:nth-child(odd) {
  background-color: #fff;
  padding: 0 5px;
}

::v-deep .bacolor:nth-child(even) {
  background-color: #f6f6f6;
  padding: 0 5px;
}

.Uxtext {
  font-weight: 450;
  margin-top: 5px;
  margin-left: 15px;
  font-size: 14px;
  color: #3d3d3d;
  //cursor: pointer;
  //position: relative;
}

.uxicon {
  font-size: 10px;
  position: absolute;
  top: -14px;
  left: 98%;
}

::v-deep .el-radio-button__inner,
.el-radio-group {
  vertical-align: top;
}

::v-deep .el-radio-button__inner {
  background: none;
}

::v-deep .el-radio-button:first-child .el-radio-button__inner {
  border-left: none;
  // border-radius: 4px 0 0 4px;
  //box-shadow: none!important;
}

.item-title {
  margin: 10px 10px 10px 0;
  font-size: 14px;
  color: #6E7B84;
}

.item-line {
  padding-left: 2px;
  height: 20px;
  background: #ddd;
}

.btn-label {
  position: relative;
  display: inline-block;
  outline: 0;

  span {
    padding: 7px 15px;
    font-size: 12px;
    border-radius: 0;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #dcdfe6;
    font-weight: 500;
    border-left: 0;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    position: relative;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
}

.fixed {
  position: fixed;
  top: 0px;
  background-color: #f0f0f0;
  z-index: 999;
  height: 50px;
}

.content-div {
  .quyer-tag {

    // margin-left: 10px;
    .order-class {
      margin: 30px 0;
      color: #6E7B84;
      text-align: left;
      font-size: 14px;
      padding: 4px 8px;
      margin-right: 30px;
    }

    .actice {
      background: #387DF7;
      color: #fff;
    }
  }

  /* 分页div */
  .pagination-div {
    text-align: center;
    padding: 10px 0;
    margin: 10px;

    .pag-text {
      border: 1px solid #292828;
      padding: 10px 20px;
      border-radius: 20px;
      background: #fff;
      cursor: pointer;
    }

    .pag-text-msg {
      padding: 10px 20px;
      background: #fff;
    }
  }

  .search-div {
    //background: #fff;
    padding: 10px 25px;
    border-radius: 8px;
    height: auto;
    min-height: 60px;


    ::v-deep .el-input {
      width: 420px;
      height: 38px;
      margin-bottom: 13px;

      .el-input__inner {
        height: 38px;
        border-radius: 0;
      }

      .el-input-group__append {
        width: 44px;
        height: 38px;
        border: 0;
        padding: 0;
        background: #3e7fff;
        border-radius: 0;

        .el-button {
          margin: 0;
          border: 0;
          width: 100%;
          height: 38px;
          padding: 0;
          display: flex;
          justify-content: center;
          align-items: center;

          .el-icon-search {
            color: #fff;
            font-size: 22px;
          }
        }
      }
    }

    .search-item {
      // padding: 10px 0;
    }

    .search-item:not(:last-child) {
      // border-bottom: 1px solid #dfdfdf;
    }

    .search-item-sub {
      // margin-top: 10px;
      display: flex;
    }
  }

  .search-div-collapse {
    display: block;
  }

  .search-div-expand {
    // display: none;
  }

  .search-div-more {
    text-align: center;
  }

  .order-div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 15px 0 0px;

    .order-count {
      font-size: 14px;
      color: #6E7B84;

      span {
        color: #000;
      }
    }
  }
}
.search-item-type {
  line-height: 25px;
  padding-right: 10px;
  width: 85px;
  white-space: nowrap;
}

.option-item {
  font-family: "Menlo", "苹方-简" !important;
  color: #3d3d3d;
  display: inline-block;
  font-size: 14px;
  //margin: 0px 15px;
  font-weight: normal;
}

.option-border {
  width: 2px;
  display: inline-block;
  height: 15px;
  margin: 0px 20px -2px 20px;
  background: #666;
}

.option-active {
  color: #387DF7;
}
/* 项目简介 方法一：外部 CSS 类 */
::v-deep.el-dialog {
  border-radius: 3% 3% 1% 1%;
  padding: 0;
}
::v-deep.custom-class .el-dialog__header {
  height: 100px;
  margin: 0 !important;
  padding: 0 !important;
  background-image: url('../../../assets/images/project/title-bg.png');
  background-size: 100% 100%;  /* 完全填充 */
  display: block;             /* 避免行内元素空隙 */
}
::v-deep.custom-class .el-dialog__header .el-dialog__title {
  padding: 0 !important;
  font-size: 35px;
  font-weight: bold;
  color: white;
  margin: 60px;
  line-height: 100px;
}
::v-deep.custom-class .el-dialog__body {
  margin: 0 !important;
  padding: 0 !important;
}
/* ---end--- */
.search-div.nav {
  display: block;
  width: 100%;
  clear: both;
}


.option-item {
  margin: 0px 5px;
}
/* 热点标签：自定义按钮样式 */
a.custom {
  /* 基础样式 */
  display: inline-block; /* 使内边距生效 */
  padding: 1px; /* 按钮内边距 */
  margin: 1px 5px;
  background-color: #F2F2F2; /* 淡灰色背景 */
  color: #333; /* 文字颜色 */
  text-decoration: none; /* 去除下划线 */
  border-radius: 3px; /* 圆角设计 */
  font-family: Arial, sans-serif; /* 字体 */
  font-size: 14px; /* 文字大小 */
  height: 24px;
  line-height: 20px;
  /* 过渡效果，使颜色变化更平滑 */
  transition: background-color 0.2s ease;
}

/* 鼠标悬停效果 */
a.custom:hover {
  background-color: #DDEDFF; /* 浅蓝色背景 */
}

/* 可选：点击时效果 */
a.custom:active {
  background-color: #757575; /* 点击时更深的灰色 */
}

/* 鼠标悬停效果 */
a.custom2 {
  background-color: #DDEDFF; /* 浅蓝色背景 */
}

.hot-tags-container {
  display: inline-block;
  //white-space: nowrap;
  overflow-x: auto;
  vertical-align: top;
}

.hot-tags-container::-webkit-scrollbar {
  display: none;
}


.course-tag-item {
  color: #333333; // 默认深灰色
}
.course-tag-item[style*="color: #387DF7"] {
  color: #387DF7 !important; // 匹配时的蓝色
}

/* 调整option-item样式以适应换行布局 */
.option-item {
  position: relative;
  cursor: pointer;
  white-space: nowrap;
}

/* 保持原有的导航底部横线样式 */
.nav-bottbor {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 4px;
  background: #387DF7;
  border-radius: 5px;
}

/* 响应式调整，当屏幕较小时减小标签间距 */
@media (max-width: 1600px) {
  .hot-tags-wrapper {
    gap: 10px;
  }
}

@media (max-width: 1400px) {
  .hot-tags-wrapper {
    gap: 5px;
  }
}

.hot-tags-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
  padding-top: 2px;
}

.course-tags {
  margin: 10px 0 0;
  min-height: 20px;
}

.course-tag-item {
  color: #333333;
}
.course-tag-item[style*="color: #387DF7"] {
  color: #387DF7 !important;
}


/* 关键字部分匹配高亮样式 */
.keyword-highlight {
  color: #387DF7 !important;
  font-weight: bold;
  background-color: transparent !important;
}
/* 导航标签完全匹配高亮样式 */
.exact-match-highlight {
  color: #387DF7 !important;
  font-weight: bold;
  background-color: transparent !important;
}
/* 混合模式下的特殊样式（可选） */
.mixed-exact-highlight {
  color: #387DF7 !important;
  font-weight: bold;
  background-color: #f0f7ff !important;
  padding: 1px 3px;
  border-radius: 2px;
}
/* 确保标签基础样式 */
.course-tags ::v-deep .el-tag {
  color: #333333;
  background-color: #f4f4f5;
  border-color: #e9e9eb;
}
.course-tags ::v-deep .el-tag .keyword-highlight,
.course-tags ::v-deep .el-tag .exact-match-highlight {
  color: #387DF7 !important;
  font-weight: bold;
  background-color: transparent !important;
}

.fieldbox {

  display: flex;
  white-space: nowrap;
  flex-wrap: wrap;

  div {
    margin: 0 15px;
    display: inline-block;
    font-size: 14px;
    line-height: 25px;
    //color: #3d3d3d;
    font-weight: 500;
  }

  .fieldactive {
    color: #387DF7;
  }
}
</style>
<!-- ai播放器相关 -->
<style lang="scss">
.course-popover{
  border-radius: 12px;
  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.12);
  .course-popover-content{
    h4{
      margin: 0 0 7px 0;
      font-size: 14px;
      font-weight: 500;
      line-height: 17px;
      letter-spacing: 0.3px;
      color: rgba(0, 0, 0, 1);
    }
    .course-popover-content-text{
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
      letter-spacing: 0.26px;
      color: rgba(102, 102, 102, 1);
    }
    .course-popover-noContent{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: rgba(0, 0, 0, 0.34);
      font-size: 12px;
      font-weight: 400;
      line-height: 14px;
      letter-spacing: 0.26px;
      padding-bottom: 20px;
      img{
        width: 96px;
        height: 50px;
      }
    }
  }
}
</style>
