<template>
  <div id="couser-list-content" class="couser-list-content">
    <portal-header current="course" @emitInput="emitInput"></portal-header>
    <!-- <div class="course-input">
      <el-input  class="course-value" v-model.trim="course.keyword"  maxlength="20" @input="inputOn($event)" clearable placeholder="请输入关键词搜索"><el-button slot="append" icon="el-icon-search" @click="searchData()" class="course-btn"></el-button></el-input>
    </div> -->
    <div class="xcontent portal-content">
      <div class="xrow" style="display: flex;justify-content: space-between;">
        <div style="flex: 1;" class="xcol content-div">  
          <el-row class="search-div">
            <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>
            <el-row class="search-item">
              <el-col :span="24">
                <div style="margin-top:10px; display: flex;">
                  <div style="line-height: 25px;">
                    <span class="item-title" style="padding-right: 5px;">授课方式</span>
                    <span class="item-line"></span>
                  </div>
                  <!-- // 10微课，21在线课(直播)；20:在线课( 录播)；30:面授课；40:学习项目,90:混合式， -->
                  <div>
                  <el-radio-group v-model="category" size="mini" @change="searchData">
                    <el-radio-button :label="0">全部</el-radio-button>
                    <el-radio-button :label="20">录播课</el-radio-button>
                    <el-radio-button :label="30">线下课</el-radio-button>
                    <el-radio-button :label="40">学习项目</el-radio-button>
                  </el-radio-group>
                  </div>
                </div>
              </el-col>
            </el-row>
            <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;">
                      <span class="item-title" style="padding-right: 5px;">内容分类</span>
                      <span class="item-line"></span>
                    </div>
                    <el-radio-group  v-model="types.sysTypes" size="mini" @change="changeType">
                      <el-radio-button label="0">全部</el-radio-button>
                      <el-radio-button v-for="item in optionsList" :key="item.id" :label="item.id">{{item.name}}</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>
                  </div>
                  <div class="search-item-sub" v-if="types.oneSubList.length != 0">
                    <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 class="search-item-sub" v-if="types.towSubList.length != 0">
                    <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>
                </el-col>
              </el-row>
            </div>
          </el-row>
          <el-row class="order-div" v-if="listType == 1">
            <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('id')" :class="{ actice: course.orderField == 'id' }">最新</el-button>
            </span>
          </el-row>
          <div class="xrow data-content" v-if="listType == 1">
            <div class="xrow-course course-index" v-for="(cinfo,cidx) in courseList" :key="cinfo.id" v-if="(courseList.length<=course.pageSize) || (cidx<parseInt(courseList.length/columns)*columns)">
              <el-card class="course-card" :body-style="{padding:'0px'}">
                <a :href="toCourseDetail(cinfo)">
                  <div class="course-image-box">
                    <course-image height="146px" :course="cinfo"></course-image>
                    <span v-if="cinfo.type==20" class="course-type-title course-type">录播课</span>
                    <span v-if="cinfo.type==10" class="course-type-title course-type">录播课</span>
                    <span v-if="cinfo.type=='online-course'" class="course-type-title course-type">录播课</span>
                    <span v-if="cinfo.type=='face-course'" class="course-type-title course-type">线下课</span>
                    <span v-if="cinfo.type=='project'" class="course-type-title course-type">学习项目</span>
                </div>
                  <el-tooltip class="item"  :content="cinfo.couretitle" placement="bottom-start" effect="light"  :visible-arrow="false" popper-class="text-tooltip" >
                      <div class="course-title title-line-ellipsis"  v-html="$keywordActiveShow(cinfo.name,keyword)">
                      </div>
                  </el-tooltip>
                <div class="course-author">
                  <div class="course-author-left" v-if="cinfo.authorInfo">
                      {{cinfo.authorInfo.name}}
                  </div>
                  <div style="flex:1;text-align: center;">
                     <span class="study-num">{{cinfo.studys}}人学习</span>
                  </div>
                  <div style="padding-left:15px">
                    <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>
                </a>
                 <div class="cor-praises" v-if="cinfo.type == 10 || cinfo.type == 20"><interactBar :type="1" :data="cinfo" :comments="false" :praises="false" :shares="false" :views="false"></interactBar> </div>
              </el-card>
            </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">没有更多数据了</span>
          </div>
        </div>
        <div style="width: 245px;margin-left: 5px;">
          <div>
            <div id="fixd-box">
            <div v-if="identity == 2 || identity == 3 || identity == 5">
              <el-button style="width: 100%;margin-bottom:15px;height: 37px;border-radius: 0;" type="primary" @click="toNeedCourse">做课程</el-button>
            </div>
               <el-card class="ranking-card" >
              <div slot="header">
                <span style="font-size: 14px;font-weight: 600;color: #333333;">好评榜</span>
              </div>
              <div style="padding-bottom:10px">
                <el-row class="ranking-title">
                </el-row>
                <el-row class="ranking-title  bacolor" v-for="(item, index) in scorelist" :key="index" >
                  <el-col :span="6" style="height:34px">
                    <img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
                    <img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
                    <img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
                    <span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
                  </el-col>
                  <el-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.name" placement="bottom" :visible-arrow="false" popper-class="text-tooltip">
                        <el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.name }}</el-col>
                  </el-tooltip>
                </el-row>
              </div>
            </el-card>
                <div style="height: 10px;"></div>
            <el-card class="ranking-card">
              <div slot="header">
                <span style="font-size: 14px;font-weight: 600;color: #333333;">人气榜</span>
              </div>
              <div style="padding-bottom:10px">
                <el-row class="ranking-title">
                </el-row>
                <el-row class="ranking-title bacolor" v-for="(item, index) in ankingList" :key="index">
                  <el-col :span="6" style="height:34px">
                    <img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
                    <img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
                    <img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
                    <span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
                  </el-col>
                  <el-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.name" placement="bottom" :visible-arrow="false" popper-class="text-tooltip">
                        <el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.name }}</el-col>
                  </el-tooltip>
                </el-row>
              </div>
            </el-card>
            <div style="height: 10px;"></div>
            <el-card class="ranking-card">
              <div slot="header">
                <span style="font-size: 14px;font-weight: 600;color: #333333;">热度榜</span>
              </div>
              <div style="padding-bottom:10px">
                <el-row class="ranking-title">
                </el-row>
                <el-row class="ranking-title bacolor" v-for="(item, index) in hotList" :key="index">
                  <el-col :span="6" style="height:34px">
                    <img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
                    <img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
                    <img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
                    <span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
                  </el-col>
                  <el-tooltip :enterable="false" @click.native="jumpRouter2(item)" effect="light" :content="item.courseName" placement="bottom" :visible-arrow="false" popper-class="text-tooltip">
                        <el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.courseName }}</el-col>
                  </el-tooltip>
                </el-row>
              </div>
            </el-card>
            </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 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 interactBar from "@/components/Portal/interactBar.vue";
import courseImage from "@/components/Course/courseImage.vue"
import { courseType, getType,toScore } from "@/utils/tools.js";
import { deepClone, param } from "../../../utils";
import apiSearchterm from "@/api/modules/searchterm.js";
import { Promise } from 'q';
export default {
  name: "index",
  components: {
    portalHeader,
    portalFooter,
    portalFloatTools,
    courseItem,
    courseForm,
    authorInfo,
    courseImage,
    interactBar
  },
  computed: {
    ...mapGetters(['resOwnerMap','sysTypeMap','userInfo','identity']),
  },
  data() {
    return {
      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 //每页多少条
      },
      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,
      listType: 1,
      courseList: [],
      searchRecords: [],
      hotList:[],
      totalPages:1,
    };
  },
  mounted() {

    let screenWidth=window.screen.width;
    if(screenWidth<1280){
      this.course.pageSize=9;
      this.columns=3;
    }else if(screenWidth<1600){
      this.course.pageSize=12;
      this.columns=4;
    }else if(screenWidth>=1600){
      this.course.pageSize=15;
      this.columns=5;
    }
    //var hasNum=12;
    //console.log(parseInt(hasNum/this.columns)*this.columns,'this.columns');

    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.search();
    this.searchterm();
    this.loadSysTypes();
    this.getScoreList();
    this.getHotList();
    //查询排行榜，页面打开只查询一次
  },
  beforeDestroy(){
    window.removeEventListener("scroll",this.handleScroll);
  },
  methods: {

   

    jumUX(){
     window.open('https://m.qingxuetang.com/x/?appId=qxtcorp306130','_blank');
    },
    emitInput(val) {
      this.course.keyword=val;
      this.searchData()
    },
    handleScroll() {
        let innerHeight = document.querySelector('#couser-list-content').clientHeight
        let outerHeight = document.documentElement.clientHeight
        let scrollTop = document.documentElement.scrollTop
        if ((outerHeight + scrollTop + 350) >= innerHeight) {
          if(this.moreState == 1 && this.course.pageIndex < 4) {
              this.loadMore();
          }
        }
        if(scrollTop > 630) {
          document.querySelector('#fixd-box').style.cssText = "position: fixed;top: -550px;width:242.5px";
        } 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){
      if(isNaN(item.type)){
        return `${this.webBaseUrl}/course/boeframe?id=${item.id}&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/micro?id='+item.id;
        }else if(item.type==20){
        return this.webBaseUrl+'/course/detail?id='+item.id;
       }
      }

      return '';
    },
    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 = "";
          }
          if (i === "sysType2") {
            this.types.subOne = "";
          }
          if (i === "sysType3") {
            this.types.subTow = "";
          }
          if(i === 'type') {
            this.category = "";
            this.categorySub = "";
          }
          this.searchTags.splice(index, 1);
          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();
    },
   async search() {
     let that = this;
     if(this.course.keyword){
      apiSearchterm.save({keyword:this.course.keyword,type:1});
     }
      this.isFind = true;
      if (this.category === 0) {
        this.course.type = null;
      } else if (this.category === 2) {
        // if (this.categorySub === "") {
        //   this.course.type = "20";
        // } else {
        //   this.course.type = this.categorySub;
        // }
      } else {
        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();
      //从新课程库中取10条，从老库中取10条
       let oldPageIndex = 0;
       let oldCateName = '';
       let oldParamsType = '';
        if(this.course.sysType1){
        //cateName
        let courseSysType=this.course.sysType1;
        let curName = this.optionsList.find(item => {
          return item.id === courseSysType;
        });
        if(curName){
          oldCateName=curName.name;
        }
      }
      if(this.category==20){
        oldParamsType='online-course';
      }else if(this.category==30){
        oldParamsType='face-course';
      }else if(this.category==40){
        oldParamsType='project';
      }
       if(oldParamsType == '' && oldCateName == '' && this.course.keyword == '') {
					oldPageIndex = this.course.pageIndex-3;
				} else {
					oldPageIndex = this.course.pageIndex;
				}

       let oldParams={type:oldParamsType,page:oldPageIndex,size:this.course.pageSize,keyword:this.course.keyword,sort:'new',cateName:oldCateName}
      if(this.course.orderField == 'id') {//最新
        oldParams.sort = 'new';
      }
      if(this.course.orderField == 'studys') {//最热
       oldParams.sort = 'hot';
      }
      let data = [];
      let isTopList = [];
      if(this.course.pageIndex > this.totalPages) {
          this.noDataList = true;
          oldParams.page=this.course.pageIndex-this.totalPages;
      }else {
        if(this.totalPages<3){
          this.noDataList = false;
        }
        // if(this.totalPages == 1 && this.course.pageIndex ==1){
        //   this.noDataList = true;
        // }
      }
      if(this.course.type == 30 || this.course.type == 40) {
        this.noPageList = false;
      }
     // 隐藏loadMore
     this.moreState = 2;
     this.noDataList && await apiOldCourse.courseList(oldParams).then(oldRs=>{
        if(oldRs.status==200 && oldRs.result.dataList.length > 0) {
              let list = that.filterConversion(oldRs.result.dataList);
              list.name = list.name.replace(/<[^>]+>|&[^>]+;/g,"").trim();
              data.push(...list);
              that.moreState = 1;
        }else{
          that.noDataList = false;
        }
      }).catch(err=>{
        that.noDataList = false;
      })

     this.noPageList && await apiCoursePortal
        .pageList(this.course)
        .then(res => {

            if(res.status == 200 && res.result.list.length>0){
              
              this.totalPages = res.result.totalPages;
              let courseIds=[];
              res.result.list.forEach(item=>{
                item.name = this.$keywordActiveShow(item.name,this.course.keyword);
               item.couretitle  =  this.$keywordActiveShow(item.name,this.course.keyword).replace(/<[^>]+>|&[^>]+;/g,"").trim();//去掉所有的html标签和&nbsp;之类的特殊符合
                item.authorInfo={aid:'',name:'',orgInfo:'',avatar:'',code:''};
                courseIds.push(item.id);
                if(item.isTop) {
                  isTopList.push(item);
                } else {
                  data.push(item);
                }
              })
              that.loadCouserTeacher(res.result.list,courseIds);
              // data.push(...res.result.list);
              that.moreState = 1;
            }else{
              that.noPageList = false;
            }
        }).catch(err=>{
          that.noPageList = false;
        })
         if(this.course.orderField == 'id') {//最新
         data.sort(this.pcompare("publishTime",false))
        }
        if(this.course.orderField == 'studys') {//最热
        data.sort(this.pcompare("studys",false))
        }
        this.courseList.push(...isTopList,...data);
        if(this.noDataList == false && this.noPageList == false){
          this.moreState = 3;
        }
    },
    pcompare(prop,rev) {
     if(rev === undefined) {
       rev = 1;
     }else {
       rev = rev?1:-1;
     }
     return function(obj1,obj2) {
       let val1 = obj1[prop],val2 = obj2[prop];
       return val1 < val2 ? rev*(-1):rev*1;
     }
    },
    filterConversion(data) {
      let list = [];
      data.forEach((item,index)=>{
        list.push({
          coverImg: item.cover[0].url,
          name: item.title,
          type: item.type,
          id: item.id,
          studys: Number(item.enrollSuccess),// Number(), //学习人数
          score: item.score,
          publishTime: item.releaseDate,
          authorInfo:{
            avatar: '',
            name: ''
          }
        })
      })
      return list;
    },
    loadCouserTeacher(list,ids){
      let that = this;
      // 先查课程关联教师iD
      apiCourse.getTeacherByCourseIDs(ids).then(cres => {
        if(cres.status==200){
          let userIds = [];
          list.forEach((item,index)=>{
            cres.result.some(courseTeahcer=>{
              if(courseTeahcer.courseId==item.id){
                if(courseTeahcer.teacherIds){
                  userIds.push(courseTeahcer.teacherIds[0]);
                  item.authorInfo.aid=courseTeahcer.teacherIds[0];
                  item.authorInfo.name=courseTeahcer.names[0];
                }
                return true;
              }else{
                return false;
              }
            })
          });
          //that.loadCourseAuthorInfo(list,userIds);
        }
      })
    },
    loadCourseAuthorInfo(list,ids){ //加载作者信息，头像，机构信息
      if(ids.length==0){
        return;
      }
      const noReapetIds=[...new Set(ids)]
      apiUser.getByIds(ids).then(res=>{
        if(res.status==200){
          list.forEach((item,index)=>{
            res.result.some(author=>{
              if(author.aid==item.authorInfo.aid){
                item.authorInfo=author;
                return true;
              }else{
                return false;
              }
            })
          });
        }else{
          console.log('加载课程信息失败:'+res.error);
          //this.$message.error(res.message);
        }
      });
    },
    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" &&
          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(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){
          this.ankingList=res.result
        }
      })
    },
    getScoreList() {
      apiCourse.scorelist(5).then(res=>{
         if(res.status==200){
          this.scorelist=res.result
        }
      })
    },
    getHotList(){
      apiCourse.studyCounts(5).then(res=>{
        if(res.status==200){
          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">
::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;
}
// .el-row{
//   display: flex;
//   flex-wrap: wrap;
// }
.item-title{
  // margin-top: 10px;
  // margin-bottom: 5px;
  // margin-right: 10px;
  // margin: 10px;
  margin: 10px 10px 10px 0;
  //font-size: 14px;
  font-weight: 600;
  color: #333333;
  // line-height: 20px;
}
.item-line{
  padding-left: 2px;
  height: 20px;
  background: #ddd;
}
.course-card {
    // width: 290px;
    margin-bottom: 15px;
    position: relative;
    ::v-deep .cor-praises {
      position: absolute;
      left: 0;
      top: 0;
      .interact-bar-btn{
        .interact-bar-value{
          display: none;
        }
      }
    }
    .cor-icon{
      position: absolute;
      left: 100px;
      top:54px;
      border-radius: 50%;
      background: rgba(88, 138, 252,.37);

      .el-icon-caret-right{
        font-size: 36px;
        color: #588AFC;
      }
    }
    .course-image-box {
      position: relative;
      height:148px;
      width: 100%;
      .course-image {
        width: 100%;
        height: 148px;
      }
      .course-type{
        position: absolute;
        top: 5px;
        right: 0px;
        width: 90px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: #292828;
        opacity: 0.4;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        color: #FFFFFF;
      }
      .course-type-title{
        position: absolute;
        top: 5px;
        right: 0px;
        width: 90px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #FFFFFF;
      }
      .course-flag {
        height: 26px;
        position: absolute;
        top: 15px;
        right: 0;
      }
      .course-tip {
        width: 100%;
        height: 26px;
        position: absolute;
        bottom: 0;
        padding: 0 10px;
        color: #fff;
        font-size: 14px;
        .course-study-count {
          float: left;
        }
        .course-time {
          float: right;
        }
      }
    }
    .course-title{
      // height: 70px;
      margin: 10px 0;
      padding: 0px 15px;
      font-size: 18px;
      font-weight: 600;
      color: #343434;
    }
    .course-author{
      margin: 5px 15px;
      padding-bottom: 10px;
      display: flex;
      justify-content: space-between;
      .course-author-left{
          font-size: 12px;
          line-height: 30px;
          color: #666;
      }
      // .course-author-right{
      //   padding-top: 5px;
      // }
    }
    .course-score{
      padding: 5px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;

      .course-score-star{
        flex: 1;
      }
      .course-score-value{
        color: #FFB30F;
        font-family: "Arial";
          // font-size: 30px;
      }
      .course-score-no{
        font-size: 12px;
        color: #FFB30F;
      }
    }

}
 .course-score-no{
   text-align: right;
        font-size: 12px;
        color: #FFB30F;
       line-height: 30px;
      }
 .course-score-value{
    font-size: 14px;
        color: #FFB30F;
        margin-left: 32px;
  line-height: 30px;
        font-family: "Arial";
          // font-size: 30px;
      }
.study-num{
         line-height: 30px;
        font-size: 12px;

        color: #8590A6;
      }
.btn-label {
}
.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 {
      color: #666666;
      text-align: left;
      border: 1px solid #dfdfdf;
      padding: 10px 20px;
    }
    .actice {
      background: #3e7fff;
      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;
    ::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;
    }
  }
  .search-div-collapse {
    display: block;
  }
  .search-div-expand {
    // display: none;
  }
  .search-div-more {
    text-align: center;
  }

  .order-div {
    padding: 10px 15px 0 0px;
  }
  .data-content {
    padding: 5px 0px;
    .course-card {
      // width: 290px;
      margin-bottom: 15px;
      position: relative;
      .course-image-box {
        position: relative;
        .course-image {
          width: 288px;
          height: 148px;
        }
        .course-flag {
          height: 26px;
          position: absolute;
          top: 15px;
          right: 0;
        }
        .course-tip {
          width: 100%;
          height: 26px;
          position: absolute;
          bottom: 0;
          padding: 0 10px;
          color: #fff;
          font-size: 14px;
          .course-study-count {
            float: left;
          }
          .course-time {
            float: right;
          }
        }
      }
      .course-info-box {
        padding: 15px;
        .course-info-title {
          font-size: 18px;
          font-weight: 600;
          color: #343434;
          height: 48px;
        }
        .course-other-info {
          height: 40px;
          margin-top: 10px;
          .course-author {
            float: left;
            height: 40px;
            font-size: 12px;
            color: #666666;
            line-height: 40px;
            img {
              margin-right: 10px;
              width: 30px;
              border: 1px solid #eee;
              border-radius: 50%;
              vertical-align: middle;
            }
          }
          .course-score-info {
            float: right;
            height: 40px;
            line-height: 40px;
            .course-score {
              color: #f8a114;
              font-family: "Arial";
              font-size: 36px;
            }
            .course-score-title {
              font-size: 14px;
              color: #787878;
            }
          }
        }
      }
      .cardmark {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(101, 101, 101, 0.8);
        pointer-events: none;
        border-radius: 5px;
        padding: 10px;
        opacity: 0;
        -webkit-transition: all 1.5s;
        -moz-transition: all 1.5s;
        -ms-transition: all 1.5s;
        -o-transition: all 1.5s;
        transition: all 1.5s;
        .cardmark-name {
          font-size: 18px;
          line-height: 30px;
          font-weight: 600;
          color: #fff;
        }
        .cardmark-info {
          color: #fff;
          font-size: 14px;
          line-height: 20px;
        }
      }
    }
    .course-card:hover .cardmark {
      opacity: 1;
    }
  }
}
.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;
  }
}
.ranking-title {
    line-height: 34px;
    font-size: 15px;
    color: #333333;
    .center-titlt{
      font-size: 15px;
      color: #333333;
    }
    .center{
      text-align: right;
    }
    img{
      margin-top: 5px;
    }
  }
</style>
