<template>
  <div>
    <div class="course-banner">
      <portal-header current="index" textColor="#000000" style="z-index:999; position: relative;"></portal-header>
      <div id="container" style="z-index:99;">
        <swiper :options="swiperOption" ref="mySwiper" v-if="resonimg.length">
          <swiper-slide style="margin: 0 auto;" v-for="(item , idx ) in resonimg" :key="idx" class="swiper-slide games">
            <div class="bannbox" :style="{ 'background': `url(${fileBaseUrl + item.image}) no-repeat 100% / 100%`}">
            </div>
            <img class="banner-img" style=" margin: 0 auto;" :src=" fileBaseUrl + item.image" alt="">
          </swiper-slide>
        </swiper>
      </div>
      <div class="personal-panel">
        <div class="personal-img">
          <author-img :avatar="userInfo.avatar" :aid="userInfo.aid" :sex="userInfo.sex"></author-img>
          
        </div>
        <!-- <img style="width:68px;height:68px" src="/images/Avatarman.png" alt=""> -->
        <p class="personal-name">{{userInfo.name}} {{userInfo.userNo}}</p>
        <p class="personal-info">{{userInfo.departName}}</p>
        <div class="personal-box"><span>代办</span><span>3个待处理 <img src="/images/homeWu/Pending.png" alt=""> </span> <img class="personal-box-img"
            src="/images/homeWu/agency.png" alt="" srcset=""></div>
        <ul class="personal-ul">
          <li>
            <span class="label">累计学习</span>
            <p><span>{{userData.studyHourValue}}</span>h</p>
          </li>
          <!-- <li>
            <span class="label">经验值等级</span>
            <p><span>{{userData.level}}</span></p>
          </li> -->
          <li>
            <span class="label">我的U币</span>
            <p><span>{{userData.coinValue}}</span>个</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="xindex-content">
      <!-- 推荐课程 -->
      <div class="modules xcontent2">
        <div class="xcontent2-main">
          <!--内容块-->
          <div class="modules-title">
            <span class="modules-text">推荐课程</span>
            <span class="quyer-tag">
              <a :class="courseList.orderType == 2 ? 'current' : ''" @click="orderTypeFilter(2)">最热</a>
              <a :class="courseList.orderType == 1 ? 'current' : ''" @click="orderTypeFilter(1)">最新</a>
              <span @click="jumUX()" class="Uxtext" style=""> U选小课堂
                <span class="uxicon">
                  <svg-icon icon-class="hot" style="font-size:22px"></svg-icon>
                </span>
              </span>
            </span>
            <span class="more">
              <router-link to="/course">查看更多</router-link>
            </span>
          </div>
          <div class="modules-list" style="margin-right:0px">
            <!-- 一个固定内容 -->
            <div class="xindex-course">
              <a href="course/boeframe?id=517CA622-238E-06BA-0AED-B1200D705800&type=online-course">
                <div class="xindex-course-image">
                  <el-image class="course-image" :src="this.webBaseUrl+'/ad/index_course.png'" fit="fit"></el-image>
                  <span class="course-type">录播课</span>
                </div>
                <div title="高效谈判系列课" class="course-title portal-title-tow two-line-ellipsis">高效谈判系列课</div>
                <div class="course-author">
                  <!-- <div class="course-author-left" > </div> -->
                  <div>
                    <span class="study-num">2581人学习</span>
                  </div>
                  <div style="padding-left:15px">
                    <div>
                      <span class="course-score-value">5.0</span>
                    </div>
                  </div>
                </div>
              </a>
            </div>

            <!--内容列表内容-->
            <div v-for="course in courseList.list" :key="course.id" class="xindex-course">
              <a :href="toCourseDetail(course)">
                <div class="xindex-course-image">
                  <course-image :course="course"></course-image>
                  <span v-if="course.type == 20 || 10" class="course-type">录播课</span>
                </div>
                <div :title="course.name" class="course-title portal-title-tow two-line-ellipsis">{{ course.name }}
                </div>
                <div class="course-author">
                  <div class="course-author-left">
                    {{ course.authorInfo.name }} <span class="study-num">{{ course.studys }}人学习</span>
                  </div>
                  <div style="padding-left:15px">
                    <div v-if="course.score">
                      <span class="course-score-value">{{ toScore(course.score) }}</span>
                    </div>
                    <div v-else class="course-score-no">未评分</div>
                  </div>
                </div>
              </a>
              <div class="cor-praises">
                <interactBar :type="1" :data="course" :comments="false" :praises="false" :shares="false" :views="false">
                </interactBar>
              </div>
            </div>
          </div>
        </div>

        <div class="xcontent2-minor" style="margin-top:60px">
          <div class="portal-ranking ranking-bg">
            <p class="ranking-title">课程排行榜</p>
            <ul class="xindex-ranking-course">
              <li  class="xindex-ranking-li" v-for="(item, index) in scorelist" :key="index">
                <a style="display: inherit" :href="toCourseDetail(item)">
                <span class="portal-right-text blue-one">
                  <img :src="getPic(index)" alt="">
                </span>
                <span class="portal-title-desc two-line-ellipsis title-line-ellipsis" style="font-size: 14px;">{{ item.name }}</span>
                  </a>
                <div class="list-active">
                  <div class="list-content">
                    <div class="list-img">
                      <course-image :course="item"></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="two-line-ellipsis">{{item.name}}</h6>
                      <span>{{item.publishTime}}</span>
                    </div>
                  </div>
                  <div class="list-bottom">
                    <interactBar :type="1" :data="item" :couseViews="true" :shares="false" :views="false"></interactBar>
                  </div>
                </div>
              
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 推荐案例2版 -->
      <div class="modules xcontent2">
        <div class="xcontent2-main">
          <div class="modules-title"><span class="modules-text">推荐案例</span>
            <span class="quyer-tag">
              <a :class="caseList.orderType==2?'current':''" @click="changeCaseOrder(2)">最热</a>
              <a :class="caseList.orderType==1?'current':''" @click="changeCaseOrder(1)">最新</a>
            </span>
            <span class="more">
              <router-link to="/case">查看更多</router-link>
            </span>
          </div>
          <div class="modules-list">
            <div class="xindex-case" @click="jumcasedet(ca)"  v-for="(ca,ind) in caseList.list" :key="ca.id">
              <div class="case-index boe-case-index">
                <div class="case-top"></div>
                <div class="case-conent">
                  <p class="cast-time">
                    <span class="time-one" v-if="caseList.orderType==2">
                      <svg-icon style="margin-right: 0;font-size:16px;" icon-class="crown"></svg-icon>人气榜NO.{{ind+1}}
                    </span>
                    <span style="float: right;">{{ca.sysCreateTime.substring(0, 10)}}</span>
                  </p>
                  <p :title="ca.title" class="two-line-ellipsis case-title">
                    {{ca.title}}
                  </p>
                  <p class="case-text three-line-ellipsis">{{ca.summary}}</p>
                  <p class="case-info">
                    <interactBar :type="3" :readonly="true" :data="ca" :shares="false" :views="false"></interactBar>
                  </p>
                </div>
                <div class="case-inter">
                  <div>
                    <authorInfo :avatar="ca.authorInfo.avatar" :info="ca.authorInfo.orgInfo" :name="ca.authorInfo.name"
                      :sex="ca.authorInfo.sex"></authorInfo>
                  </div>
                  <div class="interact-bar-index"
                    style="font-size: 12px;color: #6E7B84;display: flex;line-height: 30px;">
                    <interactBar :type="3" :readonly="true" :comments="false" :praises="false" :favorites="false"
                      :data="ca" :shares="false" :views="true"></interactBar>人观看
                  </div>
                  <!-- -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="xcontent2-minor">
          <div class="portal-ranking ranking-bg" style="margin-top:60px">
            <p class="ranking-title">案例排行榜</p>
            <ul class="xindex-ranking-case">
              <li @click="jumcasedet(item)"  class="xindex-ranking-li title-line-ellipsis" v-for="(item, index) in Popularity" :key="index" style="line-height: 22px;">
                <span class="portal-right-text orange-one">
                  <img :src="getPic(index)" alt="">
                </span>
                <span class="portal-title-desc two-line-ellipsis" style="font-size: 14px;">{{ item.title }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 推荐文章 -->
      <div class="modules xcontent2">
        <div class="xcontent2-main">
          <div class="modules-title">
            <span class="modules-text">推荐文章</span>
            <span class="quyer-tag">
              <a :class="articleList.orderType == 2 ? 'current' : ''" @click="changeArticleOrder(2)">最热</a>
              <a :class="articleList.orderType == 1 ? 'current' : ''" @click="changeArticleOrder(1)">最新</a>
            </span>
            <span class="more">
              <router-link to="/article">查看更多</router-link>
            </span>
          </div>
          <div class="modules-list">
            <div class="article-card boe-article-index" style="display: flex;">
              <!-- 首张 -->
              <div class="article-card-left" v-if="articleList && articleList.first && articleList.first.id">
                <div class="article-card-box">
                  <a :href="`${webBaseUrl}/article/detail?id=${articleList.first.id}`"
                    style="font-weight: 700;font-size: 20px;">
                    <div class="article-info-image-box">
                      <article-image height="100%" width="100%" :article="articleList.first"></article-image>
                    </div>
                    <div class="article-info">
                      <div class="article-info-title " style="margin-top:10px">
                        <div class="one-line-ellipsis">
                          <span
                            style="font-weight: 600;font-size: 16px;word-break:break-all;color: #00253E;">{{ articleList.first.title }}</span>
                        </div>
                      </div>
                      <div class="article-info-index-summary index-tive-line-ellipsis"
                        style="font-weight: 400;margin-top:14px;word-break:break-all;">{{ articleList.first.summary }}
                      </div>
                    </div>
                  </a>
                  <div>

                  </div>
                  <div class="article-info-time"
                    style="font-size: 14px;color: #6E7B84;display:flex;justify-content: space-between;margin-top:16px">
                    <span>{{ articleList.first && articleList.first.sysCreateTime && articleList.first.sysCreateTime.substring(0, 10) }}</span>
                    <span>查看详情</span>
                  </div>
                  <div class="article-other-info" style="margin-top:17px">
                    <div>
                      <author-img :avatar="articleList.first.authorInfo.avatar" :aid="articleList.first.authorInfo.aid"
                        :sex="articleList.first.authorInfo.sex"></author-img>
                    </div>
                    <div style="margin-top:5px">
                      <interactBar :type="2" :readonly="true" :data="articleList.first" :views="false" :shares="false">
                      </interactBar>
                    </div>
                  </div>
                </div>
              </div>
              <!--内容列表内容-->
              <div class="article-card-right" style="flex: 1;">
                <div class="article-card-box" v-for="article in articleList.list" :key="article.id">
                  <div class="article-li">
                    <div class="article-img" v-if="article.coverurl != ''">
                      <a :href="`${webBaseUrl}/article/detail?id=${article.id}`"
                        style="font-weight: 700;font-size: 20px;">
                        <el-image style="width:100%;height:100%" :src="fileBaseUrl + article.coverurl"></el-image>
                      </a>
                    </div>
                    <div class="article-right">
                      <a :href="`${webBaseUrl}/article/detail?id=${article.id}`"
                        style="font-weight: 700;font-size: 20px;">
                        <p class="article-info-title index-one-line-ellipsis">{{ article.title }}</p>
                        <p class="article-info-summary two-line-ellipsis">{{ article.summary }}</p>
                      </a>
                      <div class="article-bottom">
                        <div style="display:flex">
                          <author-img :avatar="article.authorInfo.avatar" :aid="article.authorInfo.aid"
                            :sex="article.authorInfo.sex"></author-img>
                          <span
                            style="color: #6E7B84;font-size: 14px;margin:6px 13px 0 10px;">{{article.authorInfo.name}}</span>
                          <interactBar :type="2" :readonly="true" :data="article" :views="false"></interactBar>
                        </div>
                        <div><span class="article-info-time">{{ article.sysCreateTime.substring(0, 10) }}</span></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--内容块-->
        <div class="xcontent2-minor">
          <div style="margin-top:60px" class="portal-ranking ranking-bg">
          <!-- 排行榜位置 -->
            <p class="ranking-title">文章排行榜</p>
            <ul class="xindex-ranking-article">
              <li class="xindex-ranking-li" v-for="(item, index) in ankingList" :key="index" style="line-height: 22px;">
               <a style="display: inherit" :href="`${webBaseUrl}/article/detail?id=${item.id}`">
                <span class="portal-right-text orange-one">
                  <img :src="getPic(index)" alt="">
                </span>
                <span class="portal-index-summary two-line-ellipsis">{{ item.title }}</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 推荐问答 -->
      <div class="modules xcontent2">
        <div class="xcontent2-main">
          <!--内容块-->
          <div class="modules-title">
            <span class="modules-text">推荐问答</span>
            <span class="quyer-tag">
              <a :class="qaList.orderType == 'praises' ? 'current' : ''" @click="changeQaOrder('praises')">最热</a>
              <a :class="qaList.orderType == '' ? 'current' : ''" @click="changeQaOrder('')">最新</a>
            </span>
            <span class="more">
              <router-link to="/qa">查看更多</router-link>
            </span>
          </div>
          <div class="modules-list">
            <!--内容列表内容-->
            <div  @click="jumpRouter(qa)" class="xindex-qa" v-for="qa in qaList.list" :key="qa.id">
              <div class="qa-card boe-qa-index" >
                <p class="qa-top"><span>{{qa.views}}正在关注</span><span>{{ qa.sysCreateTime.substring(0, 10) }}</span></p>
                <div class="qa-center">
                  <p class="one-line-ellipsis portal-index-title" style="color:#181818;">{{ qa.title }}</p>
                  <p class="boe-qa-sum two-line-ellipsis" style="color:#6E7B84;">{{ qa.content }}</p>
                  <p class="qa-views" @click="jumpRouter(qa)">查看详情</p>
                </div>
                <div class="qa-char">
                  <author-img :avatar="qa.authorInfo.avatar" :aid="qa.authorInfo.aid" :sex="qa.authorInfo.sex">
                  </author-img>
                  <div>
                    <p class="info-name">{{qa.authorInfo.name}}</p>
                    <p class="info-bar">
                      <interactBar :type="4" :readonly="true" :data="qa" :comments="false" :answers="true"
                        :shares="false" :praises="false" :views="false"></interactBar>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div  class="xcontent2-minor">
          <!-- 排行榜 -->
          <div class="portal-ranking ranking-bg" style="margin-top:60px">
            <p class="ranking-title">问答排行榜</p>
            <ul class="xindex-ranking-qa">
              <li @click="jumpRouter(item)" class="xindex-ranking-li" v-for="(item, index) in answersList" :key="index" style="line-height: 22px;">
                <span class="portal-right-text orange-one">
                  <img :src="getPic(index)" alt="">
                </span>
                <span class="portal-index-summary two-line-ellipsis">{{ item.title }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div><a href="course/boeframe?id=517CA622-238E-06BA-0AED-B1200D705800&type=online-course">&nbsp;&nbsp;&nbsp;</a>
    </div>
    <portal-footer></portal-footer>
    <portalFloatTools></portalFloatTools>
  </div>
</template>

<script>
  import {
    mapGetters
  } 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 apiCourse from '@/api/modules/coursePortal.js';
  import apiCase from '@/api/modules/cases.js';
  import apiArticle from '@/api/modules/article.js';
  import apiQa from '@/api/modules/qa.js';
  import apiUser from '@/api/system/user.js';
  import apiCoursePortal from '@/api/modules/coursePortal.js';
  import interactBar from '@/components/Portal/interactBar.vue';
  import ad from '@/components/Portal/adFloat.vue';
  import interactRowBar from '@/components/Portal/interactRowBar.vue';
  import courseImage from '@/components/Course/courseImage.vue';
  import articleImage from '@/components/Article/articleImage.vue';
  import {
    toScore,
    cutFullName
  } from '@/utils/tools.js';
  import {
    swiper,
    swiperSlide
  } from 'vue-awesome-swiper';
  import apiPlace from "@/api/phase2/place.js"
  import authorImg from '@/components/Portal/authorImg.vue';
  import apiStart from '@/api/phase2/stat.js'
  import apiIndex from '@/api/phase2/index.js'

  export default {
    name: 'index',
    components: {
      authorImg,
      portalHeader,
      ad,
      portalFooter,
      articleImage,
      portalFloatTools,
      authorInfo,
      interactRowBar,
      interactBar,
      courseImage
    },
    computed: {
      ...mapGetters(['userInfo'])
    },
    data() {
      return {
        userData: {},
        userInfo: {},
        ankingList: [],
        answersList: [],
        Popularity: [],
        scorelist: [],
        resonimg: [],
        swiperOption: {
          autoplay: {
            disableOnInteraction: false,
            delay: 2000,
          },
          speed: 1000, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
          loop: true, //循环切换
          peed: 300, //循环速度
          scrollbar: '.swiper-scrollbar',

          pagination: {
      	     el: '.swiper-pagination',
            // type : 'progressbar', //分页器形状
            clickable: true, //点击分页器的指示点分页器会控制Swiper切换
          },
          navigation: {
   	        nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        },

        couname: '',
        isNext: true,
        pageIndex: 1,
        fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
        toScore,
        courseList: {
          num: 12,
          orderType: 2,
          list: []
        },
        caseList: {
          num: 3,
          orderType: 2,
          list: []
        },
        articleList: {
          num: 4,
          orderType: 2,
          first: {
            id: '',
            authorInfo: {}
          },
          list: []
        },
        qaList: {
          num: 4,
          orderType: 'praises',
          list: []
        }
      };
    },
    mounted() {
      this.userInfo = this.$store.getters.userInfo;
      console.log(this.userInfo)
      this.getCourseData(1);
      this.getCaseData();
      this.getArticleData();
      this.getQaData();
      this.couresreso();
      this.getScoreList();
      this.getPopularity();
      this.getAnkingData();
      this.getLevel();
      this.getQaAnswers();
    },
    computed: {

      swiper() {
        return this.$refs.mySwiper.swiper
      }

    },
    created() {
      // undefined
      //   this.$nextTick(() => {
      // 	console.log(this.$refs.bannimg)  //获取到正确元素
      // })
    },
    methods: {
      jumcasedet(item) {
      this.$router.push({path:'/case/detail',query:{id:item.id}});
    },
      getPic(index) {
        return `/images/listblue0${index+1}.png`
      },
      getLevel() { //获取经验值和等级
        apiStart.getUserStatTotalInfo(this.userInfo.aid).then(res => {
          if (res.status == 200) {
            this.userData = res.result;
          }
        });
      },
      getQaAnswers() {
        apiIndex.qaAnswers(10).then(res => {
          if (res.status == 200) {
            this.answersList = res.result;
          }
        })

      },
      getAnkingData() { //  文章排行榜
        apiIndex.articleViews(7).then(res => {
          if (res.status == 200) {
            this.ankingList = res.result;
          }
        });
      },
      getPopularity() { //案例排行榜
        apiCase.queryPraises(10).then(res => {
          if (res.status == 200) {
            this.Popularity = res.result;
            // console.log(this.Popularity)
          }
        });
      },
      getScoreList() { //课程排行榜
        apiCourse.scorelist(10).then(res => {
          if (res.status == 200) {
            res.result.forEach(item => {
              if (item.publishTime != '') {
                let time = item.publishTime.split('-');
                item.publishTime = `${time[0]}年${time[1]}月${time[2]}日`
              }
            })
            this.scorelist = res.result;
          }
        });
      },
      // bgfun(){
      //  console.log(this.$refs.bannimg[0]);
      //  this.$nextTick(() => {
      // 		console.log(this.$refs.bannimg[0])
      // 	})
      // },
      couresreso() {
        let key = 'index';
        apiPlace.detail(key).then(res => {
          let lmj = JSON.parse(res.result.content)
          this.resonimg = lmj
          // console.log(this.resonimg)
        })
      },
      jumUX() {
        window.open('https://m.qingxuetang.com/x/?appId=qxtcorp306130', '_blank');
      },
      toCourseDetail(item) {
        
        if (item.type == 10) {
          return this.webBaseUrl + '/course/micro?id=' + item.id;
        } else if (item.type == 20) {
          console.log(item)
          return this.webBaseUrl + '/course/detail?id=' + item.id;
        }
        return '';
      },
      orderTypeFilter(val) {
        this.courseList.orderType = val;
        this.pageIndex = 1;
        this.getCourseData();
      },
      nextPage() {
        this.pageIndex += 1;
        if (this.isNext) {
          this.getCourseData(this.pageIndex);
        }
      },
      getCourseData(pageIndex) {
        this.isNext = false;
        let {
          orderType,
          num
        } = this.courseList;
        let course = {
          pageSize: 5,
          device: 1,
          orderField: orderType == 1 ? '' : 'studys',
          orderAsc: false,
          topOrder: true,
          pageIndex: pageIndex
        };

        apiCoursePortal.pageList(course).then(res => {
          if (res.status == 200 && res.result.list.length > 0) {
            let courseIds = [];
            res.result.list.forEach(item => {
              item.authorInfo = {
                aid: '',
                name: '',
                orgInfo: '',
                avatar: '',
                code: '',
                sex: null
              };
              courseIds.push(item.id);
            });
            this.loadCouserTeacher(res.result.list, courseIds);
            this.courseList.list = res.result.list;
            this.couname = res.result.list.name;
            if (res.result.count - pageIndex * num < 8) {
              this.pageIndex = 0;
            }
            this.isNext = true;
            // }
          } else {
            console.log('加载课程信息失败:' + res.error);
          }

        });


        // apiCourse.list({orderType,num,device:1}).then(res => {
        //     if(res.status==200){
        //       if(res.result.length>0){
        //         let courseIds=[];
        //         res.result.forEach(item=>{
        //           item.authorInfo={aid:'',name:'',orgInfo:'',avatar:'',code:''};
        //           courseIds.push(item.id);
        //         })
        //         this.loadCouserTeacher(res.result,courseIds);
        //         this.courseList.list=res.result;
        //       }
        //     }else{
        //       console.log('加载课程信息失败:'+res.error);
        //     }
        //   })
      },
      changeCaseOrder(val) {
        this.caseList.orderType = val;
        this.getCaseData();
      },
      getCaseData() {
        apiIndex.cases(this.caseList.orderType).then(res => {
          if (res.status == 200) {
            if (res.result.length > 0) {
              let userIds = [];
              res.result.forEach(item => {
                item.authorInfo = {
                  aid: '',
                  name: '',
                  orgInfo: '',
                  avatar: '',
                  code: '',
                  sex: null
                };

                if (item.authorId && item.authorId != '') {
                  userIds.push(item.authorId);
                }
              });
              this.caseList.list = res.result;
              this.loadCaseAuthorInfo(res.result, userIds);
            }
            // this.caseList.list = res.result;
          } else {
            console.log('加载案例错误：' + res.error);
          }
        });
      },
      loadCaseAuthorInfo(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.authorId) {
                  author.orgInfo = cutFullName(author.orgInfo, 1);
                  item.authorInfo = author;

                  return true;
                } else {
                  return false;
                }
              });
            });
          } else {
            console.log('加载用户信息失败:' + res.error);
            //this.$message.error(res.message);
          }
        });
      },
      getArticleData() {
        let $this = this;
        this.articleList.list = [];
        apiIndex.articlelist(this.articleList.orderType).then(res => {
          if (res.status == 200) {
            if (res.result.length > 0) {
              let userIds = [];
              res.result.forEach((item, idx) => {
                item.authorInfo = {
                  aid: '',
                  name: '',
                  orgInfo: '',
                  avatar: '',
                  code: '',
                  sex: null,
                };
                userIds.push(item.sysCreateAid);
                if (idx == 0) {
                  $this.articleList.first = item;
                } else {
                  $this.articleList.list.push(item);
                }
              });
              console.log(res.result, 'res.result');
              this.loadAuthorInfo(res.result, userIds);
            }
          } else {
            console.log('加载文章错误：' + res.error);
          }
        });
      },
      changeArticleOrder(val) {
        this.articleList.orderType = val;
        this.getArticleData();
      },
      getQaData() {
        let params = {
          pageSize: this.qaList.num,
          orderAsc: false,
          orderField: this.qaList.orderType
        };
        // if (this.qaList.orderType == 2) {
        //   params.orderField = 'praises';
        // }
        apiQa.indexList(params).then(res => {
          if (res.status == 200) {
            if (res.result.length > 0) {
              let userIds = [];
              res.result.forEach(item => {
                item.authorInfo = {
                  aid: '',
                  name: '',
                  orgInfo: '',
                  avatar: '',
                  code: '',
                  sex: null,
                };
                userIds.push(item.sysCreateAid);
              });
              this.qaList.list = res.result;
              this.loadAuthorInfo(res.result, userIds);
            }
          } else {
            console.log('加载问答错误：' + res.error);
          }
          //console.log(res)
        });
      },
      changeQaOrder(val) {
        this.qaList.orderType = val;
        this.getQaData();
      },
      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];
                    if (item.authorInfo.name == 'BOE教师') {
                      item.authorInfo.name = '';
                    }
                  }
                  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);
          }
        });
      },
      loadAuthorInfo(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.sysCreateAid) {
                  item.authorInfo = author;
                  return true;
                } else {
                  return false;
                }
              });
            });
          } else {
            console.log('加载用户信息失败:' + res.error);
          }
        });
      },
      jumpRouter(item) {
        this.$router.push({
          path: '/qa/answer',
          query: {
            id: item.id
          }
        });
      }
    }
  }
</script>

<style scoped lang="scss">
  .article-li {
    display: flex;
    width: 100%;

    .article-img {
      // width: 252px;
      // height: 142px;
      border-radius: 4px;

      // margin-right: 20px;
      img {
        // width: 252px;
        // height: 142px;
        border-radius: 4px;
      }
    }

    .article-right {
      width: 100%;

      .article-info-title {
        font-size: 16px;
        font-weight: 600;
        color: #00253E;
        margin-bottom: 9px;
        // width: 50%;
      }

      .article-info-summary {
        // font-size: 14px;
        font-weight: 400;
        color: #6E7B84;
        margin-bottom: 15px;
      }

      .article-bottom {
        display: flex;
        justify-content: space-between;

        ::v-deep .uavatar {
          // width: 32px;
          // height: 32px;
        }
      }

      .article-info-time {
        font-size: 12px;
        font-weight: 400;
        color: #6E7B84;
      }
    }

  }

  //   ::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;

  // }
  .course-ran-bg {
    background: linear-gradient(180deg, #d7eaff 1%, #FAFAFA 24%);
  }

  .personal-panel {
    position: absolute;
    right: 8%;
    top: 105px;
    // background: url('/images/homeWu/personal-bgimg.png');
    background: rgba($color: #fff, $alpha: 0.2);
    border-radius: 8px;
    z-index: 999;
    backdrop-filter: blur(10px);
    text-align: center;
    color: #fff;

    .personal-img {
      width: 68px;
      height: 68px;
      margin: 0 auto;
      ::v-deep .el-avatar {
        width: 68px;
        height: 68px;
      }
    }

    .personal-name {
      font-weight: 600;
      font-size: 18px;
      margin-top: 12px;
      color: #333333;
    }

    .personal-info {
      font-size: 14px;
      color: #000000;
      margin-top: 10px;
    }

    .personal-box {
      width: 100%;
      height: 47px;
      background: #387DF7;
      border-radius: 4px;
      line-height: 47px;
      padding-left: 20px ;
      padding-right: 40px;
      box-sizing: border-box;
      display: flex;
      margin-top: 20px;
      justify-content: space-between;
      position: relative;
      .personal-box-img {
        position: absolute;
        width: 24px;
        height: 24px;
        left: 10px;
        top: -8px;

      }
    }

    .personal-ul {
      display: flex;
      li{
        flex: 1;
        text-align: center;
      }
      .label {
        color: #333;
        font-size: 12px;
        text-align: center;
      }

      p {
        margin-top: 5px;
        text-align: center;
        color: #000;
        span {
          font-size: 22px;
          text-align: center;
          color: #333;
        }
      }
    }
  }

  .list-active {
    display: none;
    width: 458px;
    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: -16%;
    z-index: 999;

    .list-content {
      display: flex;
      padding-bottom: 20px;
      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;
          left: 0;
          bottom: 0;
          height: 20;
          line-height: 20px;
          font-size: 12px;
          color: #FFFFFF;
          padding: 0px 8px;
          background: #f99000;
          border-radius: 0px 12px 0px 0px;
        }
      }

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

  // .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
  //   width: 108px;
  //   height: 38px;
  // }

  .bannbox {
    width: 100%;
    height: 520px;
    text-align: center;
    filter: blur(5px);
    z-index: -1;
    background-size: 100% 100%;

  }

  ::v-deep.swiper-slide .games .swiper-slide-active {
    text-align: center !important;
  }

  #container {
    position: absolute;
    height: 520px;
    top: 0;
    width: 100%;
  }

  .banner-img {
    height: 520px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: (-50%, -50%);
  }

  .course-banner {
    height: 520px;
    // background: url('/images/course-banner.png');
  }

  .case-orginfo {
    // line-height: 25px;
    height: 45px;
  }

  .three-line-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    -webkit-line-clamp: 3;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  // .case-box {
  //   display: flex;

  .case-index {
      position: relative;
      // width: 408px;
      // height: 396px;
      background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
      border-radius: 8px;
      box-sizing: border-box;

      // margin-right: 36px;
      &:nth-child(2) {
        .case-top {
          background: linear-gradient(333deg, #D2DEF3 0%, #B4C4E0 100%);
        }
      }

      &:last-child {
        .case-top {
          background: linear-gradient(153deg, #A4D3DF 0%, #B4DCE6 100%);
        }

        margin-right: 0;

      }

      .case-inter {
        position: absolute;
        // left: 30px;
        // bottom: 30px;
        display: flex;
        // ::v-deep .el-avatar--small{
        //    width: 32px;
        //    height: 32px;
        // }
      }

      .case-top {
        // height: 120px;
        background: linear-gradient(153deg, #82A8D1 0%, #A4C5E8 100%);
        border-radius: 8px 8px 0px 0px;
      }

      .case-conent {
        position: absolute;
        // top:40px;
        // left:30px;
        // width: 350px;
        // height: 274px;
        background: #FFFFFF;
        box-shadow: 0px 1px 10px 0px rgba(4, 36, 60, 0.05);
        border-radius: 4px;

        // padding: 30px;
        .cast-time {
          font-size: 14px;
          color: #6E7B84;

          // display: flex;
          // justify-content: space-between;
          // margin-bottom: 20px;
          .time-one {
            height: 24px;
            background: rgba($color: #387DF7, $alpha: 0.1);
            border-radius: 4px;
            // padding: 3px 10px;
            color: #387DF7;
            font-size: 12px;
          }
        }

        .case-title {
          // height: 48px;
          // font-size: 16px;
          font-weight: 600;
          color: #00253E;
          // line-height: 24px;
        }

        .case-text {
          // height: 60px;
          // font-size: 14px;
          color: #6E7B84;
          // line-height: 20px;
          // margin-bottom: 30px;
        }

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

            .interact-bar-btn {
              margin: 0;
            }
          }
        }
      }
    }
  //}

  .casetwo {
    border: 1px solid #F0F0F0;
    width: 100%;
    height: 245px;
    margin-bottom: 15px;
    position: relative;
    background-color: #fff;

    .case-top {
      height: 70px;
      background-image: linear-gradient(to right, #b8c7e2, #d0dcf3);
    }
  }

  // .qa-dai{
  //   color: #5da1ff;
  // }
  .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%;
  }

  .text-status1 {
    // padding:3px;
    color: #1ea0fa;
  }

  .text-status2 {
    // padding: 3px;
    color: #00aa00;
  }

  .text-status3 {
    // padding: 3px;
    color: #588afc;
    margin-left: -10px;
  }

  .qa-yi {
    color: blue;
  }

  .el-card {
    border: 1px solid #f0f0f0;
  }

  .portal-content {
    font-family: 'Noto Sans SC';
  }

  // .one-line-ellipsis {
  //     width: 100%;
  //     white-space: nowrap;
  //     word-break: break-all;
  //     text-overflow: ellipsis;
  //     display: -webkit-box;
  //     -webkit-box-orient: vertical;
  //     -webkit-line-clamp: 1; /* 这里是超出几行省略 */

  // }
  .two-line-ellipsis {
    display: -webkit-box;
    // white-space:pre-wrap;
    overflow: hidden;
    // text-overflow:ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    box-sizing: border-box;
  }

  .course-card {
    // padding: 30px;
    padding-bottom: 22px;
    // width: 410px;
    // margin-bottom: 30px;
    // margin-right: 36px;
    box-sizing: border-box;
    position: relative;
    background-color: #ffffff;

    // ::v-deep .cor-praises {
    //   position: absolute;
    //   right: 52px;
    //   bottom: 24px;
    //   // -moz-user-select: none; /*火狐*/
    //   // -webkit-user-select: none; /*webkit浏览器*/
    //   // -ms-user-select: none; /*IE10*/
    //   // -khtml-user-select: none; /*早期浏览器*/
    //   // user-select: none;
    //   .interact-bar-btn{
    //     .interact-bar-value{
    //       display: none;
    //     }
    //   }
    // }
    // .cor-icon {
    //   position: absolute;
    //   left: 100px;
    //   top: 54px;
    //   border-radius: 50%;
    //   background: rgba(88, 138, 252, 0.37);

    //   .el-icon-caret-right {
    //     font-size: 36px;
    //     color: #588afc;
    //   }
    // }
    .course-image-box {
      position: relative;

      // width: 350px;
      // height: 200px;
      // width: 100%;
      .course-type {
        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;
      }

      .course-type-title {
        position: absolute;
        top: 5px;
        right: 0px;
        width: 90px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #ffffff;
        -moz-user-select: none;
        /*火狐*/
        -webkit-user-select: none;
        /*webkit浏览器*/
        -ms-user-select: none;
        /*IE10*/
        -khtml-user-select: none;
        /*早期浏览器*/
        user-select: none;
      }

      .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 {
      margin: 16px 0 16px 0;
      height: 44px;
      -moz-user-select: none;
      /*火狐*/
      -webkit-user-select: none;
      /*webkit浏览器*/
      -ms-user-select: none;
      /*IE10*/
      -khtml-user-select: none;
      /*早期浏览器*/
      user-select: none;
    }

    .course-author {
      // margin: 5px 15px;
      // padding-bottom: 10px;
      display: flex;
      justify-content: space-between;

      .course-author-left {
        font-size: 14px;
        color: #6E7B84;
        -moz-user-select: none;
        /*火狐*/
        -webkit-user-select: none;
        /*webkit浏览器*/
        -ms-user-select: none;
        /*IE10*/
        -khtml-user-select: none;
        /*早期浏览器*/
        user-select: none;
      }
    }

    .study-num {
      font-size: 14px;
      color: #6E7B84;
      margin-left: 12px;
      -moz-user-select: none;
      /*火狐*/
      -webkit-user-select: none;
      /*webkit浏览器*/
      -ms-user-select: none;
      /*IE10*/
      -khtml-user-select: none;
      /*早期浏览器*/
      user-select: none;
    }

    .course-score {
      padding: 10px 15px;
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      // border-top: 1px solid #ccc;
      .course-score-star {
        flex: 1;
      }
    }
  }

  .course-score-no {
    text-align: right;
    font-size: 14px;
    color: #6B7C85;
    line-height: 30px;
    -moz-user-select: none;
    /*火狐*/
    -webkit-user-select: none;
    /*webkit浏览器*/
    -ms-user-select: none;
    /*IE10*/
    -khtml-user-select: none;
    /*早期浏览器*/
    user-select: none;
  }

  .course-score-value {
    font-size: 14px;
    //  margin-top: 5px;
    margin-left: 32px;
    line-height: 30px;
    color: #FA6400;
    font-family: 'Arial';
    -moz-user-select: none;
    /*火狐*/
    -webkit-user-select: none;
    /*webkit浏览器*/
    -ms-user-select: none;
    /*IE10*/
    -khtml-user-select: none;
    /*早期浏览器*/
    user-select: none;
    // font-size: 30px;
  }

  .modules {
    margin-top: 20px;
    // width: 100%;
    display: flex;

    .modules-title {
      .modules-text {
        height: 28px;
        font-size: 20px;
        font-family: PingFangSC-Semibold-, PingFangSC-Semibold;
        font-weight: 700;
        color: #333333;
      }

      .recommend {
        vertical-align: text-bottom;
        height: 26px;
      }

      .quyer-tag {
        margin-left: 15px;

        a {
          color: #333333;
          font-size: 14px;
          margin: 0 15px;
          display: inline-block;
          text-decoration: none;
          outline: none;
        }

        .current {
          width: 44px;
          height: 26px;
          background: #387DF7;
          border-radius: 4px;
          color: #fff;
          line-height: 26px;
          text-align: center;
        }

        // .current::after {
        //   content: '';
        //   width: 18px;
        //   height: 2px;
        //   background-color: #5da1ff;
        //   margin: 0 auto;
        //   display: block;
        // }
      }

      .more {
        float: right;
        margin-top: 7px;
        margin-right: 40px;
        color: #333333;
        font-size: 14px;
      }
    }

    .modules-list {
      margin-top: 30px;

      // margin-bottom: 15px;
      // margin-right: 36px;
      .case-card {
        // width: 593px;
        margin-bottom: 15px;

        .case-info-image-box {
          position: relative;

          .case-info {
            width: 385px;

            .case-info-title {
              font-size: 18px;
              color: #343434;
              margin-bottom: 5px;

              .case-info-time {
                font-size: 12px;
                color: #999999;
                float: right;
                margin-top: 8px;
              }
            }

            .case-info-summary {
              font-size: 12px;
              color: #666666;
              height: 82px;
              line-height: 18px;
            }
          }

          img {
            width: 160px;
            height: 105px;
            position: absolute;
            top: 5px;
            right: 0;
          }
        }

        .case-info-box {
          .case-info {
            .case-info-title {
              font-size: 18px;
              color: #343434;
              margin-bottom: 5px;

              .case-info-time {
                font-size: 12px;
                color: #999999;
                float: right;
                margin-top: 8px;
              }
            }

            .case-info-summary {
              font-size: 12px;
              color: #666666;
              height: 82px;
              line-height: 18px;
            }
          }
        }

        .case-other-info {
          height: 40px;
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
        }
      }

      .article-card {
        width: 100%;
        background: #fff;
        // padding: 30px;
        border-radius: 8px;

        .article-card-left {

          // float: left;
          .article-card-box {

            .article-info-image-box {
              .article-info {
                height: 400px;

                .article-info-title {
                  font-size: 16px;
                  color: #00253E;
                  font-weight: 500;
                  margin-bottom: 5px;
                  margin-top: 5px;
                }

                .article-info-summary {
                  font-size: 14px;
                  color: #6E7B84;
                  height: 160px;
                  line-height: 22px;
                }
              }

              img {
                width: 470px;
                height: 330px;
                //  width: 100%;
                // height: 100%;
              }
            }
          }
        }

        .article-card-right {
          // float: right;
          // width: 68%;
          flex: 1;
          margin-left: 28px;

          .article-card-box {
            // height: 160px;
            margin-bottom: 16px;
            padding-bottom: 16px;

            &:last-child {
              margin-bottom: 0px;
              padding-bottom: 0px;
            }

            .article-info-box {
              .article-info {
                display: flex;

                .article-image {
                  // width: 150px;
                  // height: 150px;
                  // margin-right: 10px;
                  width: 140px;
                  height: 105px;
                  margin-top: 10px;
                  margin-left: 20px;
                }

                .article-body {
                  flex: 1;

                  .article-info-title {
                    font-size: 18px;
                    color: #343434;
                    margin-bottom: 5px;

                    .article-info-time {
                      font-size: 12px;
                      color: #999999;
                      float: right;
                      margin-top: 8px;
                      font-weight: 500;
                    }
                  }

                  .article-info-summary {
                    padding-top: 9px;
                    font-size: 14px;
                    color: #666666;
                    height: 43px;
                    line-height: 18px;
                    font-weight: 500;
                    margin-bottom: 20px;
                  }
                }
              }
            }
          }

          .article-card-box:not(:last-child) {
            border-bottom: 1px solid #ededed;
          }
        }

        .article-other-info {
          // height: 40px;
          // margin-top: 10px;
          display: flex;
          // justify-content: space-between;
        }
      }



        .qa-card {
          // width: 298px;
          // height: 320px;
          // padding: 30px;
          box-sizing: border-box;
          box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);
          border-radius: 8px;
          // margin-right: 36px;
          background: #fff;

          &:last-child {
            margin-right: 0;
          }

          .qa-top {
            & span:first-child {
              height: 24px;
              background: rgba($color: #387DF7, $alpha: 0.05);
              // padding: 3px 10px;
              border-radius: 4px;
              font-size: 12px;
              color: #387DF7;
              // margin-right: 46px;
            }

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

          .qa-center {
            position: relative;
            // margin-top: 20px;
            // width: 238px;
            // height: 152px;
            background: rgba($color: #04243C, $alpha: 0.04);
            border-radius: 4px;

            // padding: 20px;
            .qa-views {
              position: absolute;
              color: #6E7B84;
              font-size: 14px;
              // left: 20px;
              // bottom: 20px;

            }
          }

          .qa-char {
            display: flex;
          }
        }

    }
  }
</style>
