<template>
  <div id="couser-list-content" class="couser-list-content">
    <div class="course-banner">
      <portal-header current="course" textColor="#fff" @emitInput="emitInput"></portal-header>
    </div>
    <div style="padding-top:30px" class="">
      <div class="xcontent2">
        <div class="xcontent2-main content-div">
          <div class="search-div" style="margin-right:36px">
            <div class="searchbar" v-if="searchTags.length > 0">
              <div style="line-height: 30px;">
                <span class="item-title"> 搜索条件</span>
                <el-tag closable v-for="(tag, tagIdx) in searchTags" :key="tagIdx" @close="tagsClose(tag,tagIdx)">{{ tag.name }}</el-tag>
              </div>
            </div>
            <div class="search-item">
                <div style="margin-top:10px; display: flex;">
                  <div style="line-height: 25px;padding-right: 10px;">
                    <span class="item-title" style="padding-right: 5px;">授课方式:</span>
                  </div>
                  <!-- // 10微课，21在线课(直播)；20:在线课( 录播)；30:面授课；40:学习项目,90:混合式， -->
                  <div>
                  <el-radio-group v-model="category" size="mini" @change="searchData">
                    <el-radio-button :label="null">全部</el-radio-button>
                    <el-radio-button :label="20">录播课</el-radio-button>
                    <el-radio-button :label="30">线下课 </el-radio-button>
                    <el-radio-button class="couderbox"> <div class="coures-border"></div> </el-radio-button>
                    <el-radio-button :label="40">学习项目</el-radio-button>
                  </el-radio-group>
                  </div>
                </div>
            </div>
            <div :class="queryExpand ? 'search-div-expand' : 'search-div-collapse'">
              <el-row class="search-item">
                <el-col :span="24">
                  <div style="margin-top:10px;display: flex;">
                    <div style="line-height: 25px;padding-right: 10px;">
                      <span class="item-title" style="padding-right: 5px;">一级分类:</span>
                    </div>
                    <el-radio-group  v-model="types.sysTypes" size="mini" @change="changeType">
                      <el-radio-button :label="null">全部</el-radio-button>
                      <el-radio-button v-for="item in optionsList" :key="item.id" :label="item.id">{{item.name}}</el-radio-button>
                    <el-radio-button class="couderbox"> <div class="coures-border"></div> </el-radio-button>
                    </el-radio-group>
                      <span @click="jumUX()" class="Uxtext" style=""> U选小课堂
                          <span class="uxicon">
                            <svg-icon icon-class="hot" style="font-size:22px"></svg-icon>
                          </span>
                      </span>
                      <!-- <span @click="jumOpen()" class="Uxtext" style="margin-left: 30px;" :style="{'color': course.openCourse==1? '#387DF7':''}"> 公开课
                      </span> -->
                  </div>
                  <div class="search-item-sub" v-if="types.oneSubList.length != 0">
                    <span class="item-title" style="min-width: 74px;">二级分类:</span>
                    <div style="margin-top:10px">
                      <el-radio-group v-model="types.subOne" size="mini"  @change="changeTypeSub">
                        <el-radio-button label="0">全部</el-radio-button>
                        <el-radio-button v-for="item in types.oneSubList" :key="item.id" :label="item.id">{{item.name}}</el-radio-button>
                      </el-radio-group>
                    </div>
                  </div>
                   <div class="search-item-sub" v-if="types.towSubList.length != 0">
                    <span class="item-title" style="padding-right:13px">三级分类:</span>
                    <div style="margin-top:10px">
                      <el-radio-group v-model="types.subTow" size="mini" @change="searchData" >
                        <el-radio-button label="0">全部</el-radio-button>
                        <el-radio-button v-for="item in types.towSubList" :key="item.id" :label="item.id">{{item.name}}</el-radio-button>
                      </el-radio-group>
                    </div>

                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="order-div">
            <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>
            </span>
          </div>
          <div class="xcourse-list">
            <div class="xcourse-card" v-for="(cinfo,cidx) in courseList" :key="cinfo.id">
              <div class="course-card">
                <div class="course-card-favorite">
                  <interactBar :type="1" nodeWidth="20px" :data="cinfo" :courseExclusive="true" :comments="false" :praises="false" :shares="false" :views="false"></interactBar>
                </div>
                <!-- <a :href="toCourseDetail(cinfo)"> -->
                <a @click="toCourseDetail(cinfo)">
                  <div class="course-image-box">
                    <course-image :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 style="width:80%" class="course-title two-line-ellipsis" :title="cinfo.title"   v-html="cinfo.name"></div>
                  <div class="course-info">
                    <div class="course-info-user">
                       <!-- <span class="course-info-author"  v-if="cinfo.teacher">{{cinfo.teacher=='BOE教师'? '':cinfo.teacher}}</span> -->
                       <span class="course-info-author"  v-if="cinfo.teacher" v-html="cinfo.teacher"></span>
                       <span class="course-info-studys" >{{formatNum(cinfo.studies)}}人学习</span>
                    </div>
                    <div class="course-info-score">
                      <div>
                          <div v-if="cinfo.score">
                            <span class="course-score-value">{{toScore(cinfo.score)}}分</span>
                          </div>
                          <div v-else class="course-score-no">未评分</div>
                      </div>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>
          <!--  分页 -->
          <div class="pagination-div">
            <span class="pag-text" @click="loadMore()" v-if="moreState == 1 && courseList.length>=course.pageSize">加载更多</span>
            <span class="pag-text-msg" v-else-if="moreState == 2">数据加载中</span>
            <span class="pag-text-msg" v-else-if="moreState == 3 && courseList.length > 0">没有更多数据了</span>
            <span class="notcoures" v-else-if="moreState == 3 && courseList.length==0">
              <img :src="`${webBaseUrl}/images/nocouresimg.png`" alt="">
              <h5>暂无课程，请优先学习其它课程吧～</h5>
            </span>
          </div>
        </div>
        <div class="xcontent2-minor">
            <div id="fixd-box">
              <div v-if="identity == 2 || identity == 3 || identity == 5">
                <div class="portal-model-btn pointer" @click="toNeedCourse">
                      <svg-icon style="margin-right: 10px;font-size: 24px;" icon-class="upCourse"></svg-icon>
                      上传课程
                </div>
              </div>
              <div class="portal-ranking-list ranking-bg">
                <div class="ranking-title">好评榜</div>
                <ul class="ranking-data">
                   <li   class="list-info" v-for="(item, index) in scorelist" :key="index" style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
                       <a style="display: inherit" @click="toCourseDetail(item)">
                        <span class="portal-right-text blue-one" v-if="index==0">
                          <img :src="`${webBaseUrl}/images/listblue01.png`" alt="">
                        </span>
                        <span class="portal-right-text blue-tow" v-if="index==1">
                            <img :src="`${webBaseUrl}/images/listblue02.png`" alt="">
                        </span>
                        <span class="portal-right-text blue-three" v-if="index==2">
                            <img :src="`${webBaseUrl}/images/listblue03.png`" alt="">
                        </span>
                        <span class="portal-right-text" v-if="index==3">
                             <img :src="`${webBaseUrl}/images/list04.png`" alt="">
                        </span>
                         <span class="portal-right-text" v-if="index==4">
                             <img :src="`${webBaseUrl}/images/list05.png`" alt="">
                        </span>
                        <span class="portal-title-desc title-line-ellipsis" v-if="item.images == ''" style="font-size: 14px;">{{ item.name }}</span>
                        <span class="portal-title-desc" v-else style="font-size: 14px;">
                          <!-- <img v-if="index == 0"  class="rankimg"  :src="fileBaseUrl + item.images" alt=""/> -->
                          <span class="portal-images-title two-line-ellipsis">{{ item.name }}</span>
                        </span>

                      <div class="list-active">
                         <div class="list-content">
                           <div class="list-img">
                           <course-image :course="item" width="108px" height="60px"></course-image>
                            <span v-if="item.type < 21" class="course-type">录播</span>
                            <span v-if="item.type==30" class="course-type">线下课</span>
                            <span v-if="item.type==40" class="course-type">学习项目</span>
                          </div>
                           <div class="list-text">
                             <h6 class="index-one-line-ellipsis">{{item.name}}</h6>
                             <span class="index-one-line-ellipsis">{{item.publishTime}}</span>
                           </div>
                         </div>
                         <div class="list-bottom">
                          <interactBar :type="1" :data="item" :couseViews="true" :shares="false" :views="false"></interactBar>
                         </div>
                      </div>
                      </a>
                   </li>
                </ul>
              </div>
              <div style="margin-top:26px" class="portal-ranking-list ranking-bg1">
                <div class="ranking-title">人气榜</div>
                <ul class="ranking-data">
                   <li  class="list-info" v-for="(item, index) in ankingList" :key="index" style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
                         <a style="display: inherit" @click="toCourseDetail(item)">
                        <span class="portal-right-text orange-one" v-if="index==0">
                          <img :src="`${webBaseUrl}/images/list-01.png`" alt="">
                        </span>
                        <span class="portal-right-text orange-tow" v-if="index==1">
                            <img :src="`${webBaseUrl}/images/list02.png`" alt="">
                        </span>
                        <span class="portal-right-text orange-three" v-if="index==2">
                            <img :src="`${webBaseUrl}/images/list03.png`" alt="">
                        </span>
                        <span class="portal-right-text" v-if="index==3">
                             <img :src="`${webBaseUrl}/images/list04.png`" alt="">
                        </span>
                         <span class="portal-right-text" v-if="index==4">
                             <img :src="`${webBaseUrl}/images/list05.png`" alt="">
                        </span>
                        <span class="portal-title-desc title-line-ellipsis" v-if="item.images == ''" style="font-size: 14px;">{{ item.name }}</span>
                        <span class="portal-title-desc" v-else style="font-size: 14px;">
                          <!-- <img v-if="index == 0" class="rankimg"  :src="fileBaseUrl + item.images" alt=""/> -->
                          <span class="portal-images-title two-line-ellipsis">{{ item.name }}</span>
                        </span>

                        <div class="list-active">
                         <div class="list-content">
                           <div class="list-img">
                           <course-image :course="item" width="108px" height="60px"></course-image>
                            <span v-if="item.type < 21" class="course-type">录播</span>
                            <span v-if="item.type==30" class="course-type">线下课</span>
                            <span v-if="item.type==40" class="course-type">学习项目</span>
                           </div>
                           <div class="list-text">
                             <h6 class="index-one-line-ellipsis">{{item.name}}</h6>
                             <span class="index-one-line-ellipsis">{{item.publishTime}}</span>
                           </div>
                         </div>
                         <div class="list-bottom">
                          <interactBar :type="1" :data="item" :couseViews="true" :shares="false" :views="false"></interactBar>
                         </div>
                      </div>
                      </a>
                   </li>
                </ul>
              </div>
              <div style="margin-top:26px" class="portal-ranking-list ranking-bg2">
                <div class="ranking-title">热度榜</div>
                <ul class="ranking-data">
                   <li class="list-info" v-for="(item, index) in hotList" :key="index" style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
                         <a style="display: inherit" @click="toCourseDetail(item)">
                        <span class="portal-right-text orange-one" v-if="index==0">
                          <img :src="`${webBaseUrl}/images/listred01 .png`" alt="">
                        </span>
                        <span class="portal-right-text orange-tow" v-if="index==1">
                            <img :src="`${webBaseUrl}/images/listred02.png`" alt="">
                        </span>
                        <span class="portal-right-text orange-three" v-if="index==2">
                            <img :src="`${webBaseUrl}/images/listred03.png`" alt="">
                        </span>
                        <span class="portal-right-text" v-if="index==3">
                             <img :src="`${webBaseUrl}/images/list04.png`" alt="">
                        </span>
                         <span class="portal-right-text" v-if="index==4">
                             <img :src="`${webBaseUrl}/images/list05.png`" alt="">
                        </span>
                        <span class="portal-title-desc title-line-ellipsis list-lidex" v-if="item.images == ''" style="font-size: 14px;">{{ item.courseName }}</span>
                        <span class="portal-title-desc " v-else style="font-size: 14px;">
                          <!-- <img v-if="index == 0" class="rankimg"  :src="fileBaseUrl + item.images" alt=""/> -->
                          <span class="portal-images-title two-line-ellipsis">{{ item.courseName }}</span>
                        </span>
                        <div class="list-active">
                         <div class="list-content">
                           <div class="list-img">
                            <course-image :course="item" width="108px" height="60px"></course-image>
                           <!-- <img style="width:96px;height:52px" :src="fileBaseUrl + item.images" alt=""/> -->
                            <span v-if="item.type < 21" class="course-type">录播</span>
                            <span v-if="item.type==30" class="course-type">线下课</span>
                            <span v-if="item.type==40" class="course-type">学习项目</span>
                           </div>
                           <div class="list-text">
                             <h6 class="index-one-line-ellipsis">{{item.courseName}}</h6>
                             <span class="index-one-line-ellipsis">{{item.publishTime}}</span>
                           </div>
                         </div>
                         <div class="list-bottom">
                          <interactBar :type="1" :data="item" :couseViews="true" :shares="false" :views="false"></interactBar>
                         </div>
                      </div>
                      </a>
                   </li>
                </ul>
              </div>
              <!-- <div class="course-resources pointer"> -->
                <!-- 资源位 -->
                <!-- <img  @click="banJump()" :src="fileBaseUrl + resonimg.image" alt=""> -->
              <!-- </div> -->
            </div>
        </div>
      </div>
    </div>
    <portal-footer></portal-footer>
    <portalFloatTools ref="floatTools"></portalFloatTools>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
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 apiUserGroup from "@/api/modules/usergroup.js";
import interactBar from "@/components/Portal/interactBar.vue";
import courseImage from "@/components/Course/courseImage.vue";
import { courseType, getType, toScore,formatDate,formatUserNumber } from "@/utils/tools.js";
import { deepClone, param } from "../../../utils";
import apiSearchterm from "@/api/modules/searchterm.js";
import apiPlace from "@/api/phase2/place.js"
export default {
  name: "index",
  components: {
    portalHeader,
    portalFooter,
    portalFloatTools,
    courseItem,
    courseForm,
    authorInfo,
    courseImage,
    interactBar
  },
  computed: {
    ...mapGetters(["resOwnerMap", "sysTypeMap", "userInfo", "identity"])
  },
  data() {
    return {
      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,
      // 查询信息
      types: {
        sysTypesSub: "",
        subOne: "",
        subTow: "",
        sysTypes: null,
        oneSubList: [],
        towSubList: []
      },
      course: {
        orderField: "studys",
        topOrder: true,
        orderAsc: false,
        pageIndex: 1, // 第几页
        pageSize: 9 ,//每页多少条
        openCourse:0,//增加的公开课查询
      },

      optionsList: [], //分类数据
      sceneList: [], //场景
      keyword: "",
      anking: "",
      isFind: false,
      searchbar: {
        top: false
      },
      ankingList: [],
      scorelist: [],
      searchTags: [],
      queryExpand: true, // true更多，false收起
      category: null,
      categorySub: 0,
      type1: 0,
      type2: [],
      type3: 0,
      type4: 0,
      status: 1,
      pager: {
        total: 40
      },
      data: [{}, {}, {}, {}],
      order: 1,
      courseList: [],
      searchRecords: [],
      hotList: [],
      totalPages: 1
    };
  },
  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 !== {}) {
      this.course.keyword = this.$route.query.keyword;
    }
    this.getSceneData();
    this.getTypeData();
    if (this.course.keyword != undefined) {
      this.totalPages = 4;
    }

    this.loadSysTypes();
    this.getScoreList();
    this.getHotList();
    //查询排行榜，页面打开只查询一次
    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{
         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: {
    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.course.keyword = val;
      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() {
      this.course.pageIndex = 1;
      this.noPageList = true; //判断接口是否还有数据
      this.noDataList = true; //判断接口是否还有数据
      this.courseList = [];
      this.totalPages = 4;
      this.search();
    },
    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);
    },
    useHotword(item) {
      this.$set(this.course, "keyword", item.keyword);
      this.searchData();
    },
    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.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();
    },
    tagsClose(tag, index) {
      for (let i in this.course) {
        if (tag.id === this.course[i]) {
          this.course[i] = "";
          if (i === "sysType1") {
            this.types.sysTypes = "";
            this.types.subOne = "";
            this.types.subTow = "";
            this.types.oneSubList = [];
            this.types.towSubList = [];
          }
          if (i === "sysType2") {
            this.types.subOne = "";
            this.types.oneSubList = [];
          }
          if (i === "sysType3") {
            this.types.subTow = "";
            this.types.towSubList = [];
          }
          if (i === "type") {
            this.category = "";
            this.categorySub = "";
          }

          this.searchTags.splice(index, 1);
           if(i === 'type') {
            this.category = null;
            this.categorySub = null;
          }
          if (i === "sysType1") {
            this.types.sysTypes = null;
          }
          if (i === "sysType2") {
            this.types.subOne = null;
          }
          if (i === "sysType3") {
            this.types.subTow = null;
          }
        }
      }
      this.searchData();
    },

    // 分类
    changeType(num) {
      this.types.oneSubList = [];
      this.types.subOne = "0";
      this.types.towSubList = [];
      let list = {};
      if (num !== 0) {
        list = this.optionsList.find(item => {
          return item.id === num;
        });
      }
      if (list && list.children) {
        this.types.oneSubList = list.children;
      }
      this.searchData();
    },
    // 子级分类
    changeTypeSub(num) {
      this.types.subTow = "0";
      let list = {};
      if (num !== 0) {
        apiType.list(1, num).then(res => {
          if (res.status === 200) {
            this.types.towSubList = res.result;
          }
        });
      }
      this.searchData();
    },
    //获取场景，保留
    async getSceneData() {
      try {
        const { result, status } = await scene.list(1);
        if (status === 200) {
          this.sceneList = result;
        }
      } catch (error) {
        console.log(error);
      }
    },
    //获取分类，此处获取提内容分类
    async getTypeData() {
      try {
        const { result, status } = await apiType.tree(1);
        if (status === 200) {
          this.optionsList = 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;
       }
    },
    async search() {
      let that = this;
      if (this.course.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.isFind = true;
       this.course.type = this.category;
      if (this.types.sysTypes == 0 || this.types.sysTypes == null) {
        this.course.sysType1 = "";
        this.course.sysType2 = "";
        this.course.sysType3 = "";
      } else {
        this.course.sysType1 = this.types.sysTypes;
      }
      this.course.sysType2 = this.types.subOne;
      this.course.sysType3 = this.types.subTow;
      if (this.course.sysType2 == 0) {
        this.course.sysType2 = "";
      }
      if (this.course.sysType3 == 0) {
        this.course.sysType3 = "";
      }
      this.course.device = 1;
      this.getTags();
    //   if(this.course.pageIndex == 1) {
    //     this.courseList = [];
    //   }

      let isTopList = [];
      // 隐藏loadMore
      this.moreState = 2;
        await apiCoursePortal
          .courseSearch(this.course)
          .then(res => {
            if (res.status == 200 && res.result.list.length > 0) {
              this.totalPages = res.result.totalPages;
              res.result.list.forEach(item => {
                //教师转化
                if(item.teacher){
                   let dotIdx=item.teacher.indexOf(',');
                   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);
                }else{
                  item.name=item.name;
                }

              });

              this.courseList.push(...res.result.list);
              this.moreState = 1;
            } else {
              this.moreState = 3;
            }
          })
          .catch(err => {
            this.moreState = 3;
          });

    },
    getTags() {
      this.searchTags = [];
      let courseData = deepClone(this.course);
      for (let i in courseData) {
        if (
          courseData[i] !== "" &&
          i !== "pageIndex" &&
          i !== "pageSize" &&
          i !== "orderField" &&
          i !== "orderAsc" &&
          i !== "topOrder" &&
          i !== "device" &&
          i !== "audiences" &&
          i !== "companyId" &&
          courseData[i] !== null &&
          courseData[i] !== undefined
        ) {
          let id = courseData[i];
          if (i == "type" && courseData[i] !== 0) {
            courseData[i] = courseType(courseData[i]);
          }
          if (i == "sysType1" || i == "sysType2" || i == "sysType3") {
            if (courseData[i] !== "0") {
              courseData[i] = this.sysTypeName(courseData[i]);
            }
          }
          if (i == "type" && courseData[i] === 0) {
            courseData[i] = "在线课";
          }
          if (i == "openCourse") {
            if(courseData[i] === 0){
                courseData[i] = "0";
            }else{
              courseData[i] = "公开课";
            }
          }
          if (courseData[i] !== "0") {
            this.searchTags.push({
              id: id,
              name: courseData[i]
            });
          }
        }
      }
    },
    // goTarget(href) {
    //   window.open(this.webBaseUrl+href, "_blank");
    // },
    showInApply() {
      this.inapply.show = true;
    },
    findOrg() {
      //
    },
    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;
        }
      });
    },
    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">
.couderbox{
  // width: 5px;
  // padding: 0;
  // display: inline-block;
  // text-align: center;
}
.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;
  }
}

::v-deep .course-image-box :hover .el-image{
        // transition: all 0.5s;

        //z-index: 999;
        //position: absolute;
        //top: -50px;
        //left: -35px;
        //width: 420px !important;
        //height: 236px !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: 20;
        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');
}

::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%;
}
// .el-radio-button{
//   margin-right: 10px;
//   margin-bottom: 10px;

//   .el-radio-button__inner{
//     background: #fff;
//     border: none;
//     height: 20px;
//   }
// }
::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);
  }
}
.searchbar {
  background-color: #ffffff;
  // border: 1px solid #f3f3f3;
  // width: 900px;
  // padding: 5px 20px;
}

.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;
    ::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;
          }
        }
      }
    }
    // .tip{
    //   color:#999999;
    //   font-size: 12px;
    //   >span{
    //     margin-right: 8px;
    //     cursor: pointer;
    //   }
    // }
    .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 {
    padding: 0px 15px 0 0px;
  }
}
// .course-form {
//   width: 100%;
//   margin: 10px 0;
//   ::v-deep.el-button {
//     width: 100%;
//     color: #fff;
//   }
// }

// .right-box {
//   .add-btn {
//     width: 100%;
//     padding: 15px 0;
//   }
//   .ranking-card {
//     margin-top: 0px;
//   }

//   .ranking-data {
//     margin: 10px 0;
//     color: #999999;
//   }
// }

</style>
