<template>
  <div style="padding: 12px 22px 32px;">
    <div>
      <el-row :gutter="20">
        <!-- <el-col :span="4" v-if="this.tabName == 'course'">
          <el-select clearable v-model="courseList.type" placeholder="课程类型" style="width:100%">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-col> -->
        <!-- <el-col :span="4" v-if="this.tabName == 'qa'">
          <el-select clearable v-model="articleList.type" placeholder="状态">
            <el-option label="全部" :value="1"></el-option>
            <el-option label="已解决" :value="2"></el-option>
            <el-option label="已解决" :value="3"></el-option>
          </el-select>
        </el-col> -->
        <el-col :span="3"><span class="uc-center-page">我的收藏</span></el-col>
        <el-col :span="6"><el-input placeholder="标题查询" clearable v-model="keyword" style="margin-right: 20px"></el-input></el-col>
        <el-col :span="6">
          <el-button type="primary" icon="el-icon-search" @click="queryData" style="padding: 10px 15px;">搜索</el-button>
            <el-button type="primary" @click="resData" icon="el-icon-refresh-right" style="padding: 10px 15px;">重置</el-button>
        </el-col>
        <!-- <el-col :span="2">
        </el-col> -->
      </el-row>
      <el-tabs v-model="tabName" @tab-click="changeTab" style="margin-top:14px">
        <!-- <el-tab-pane label="项目" disabled>
          <div style="min-height: 500px;">
              <div style="padding-bottom: 10px;">
                <el-tag class="tag-space">全部</el-tag>
                <el-tag class="tag-space" type="info">未查看</el-tag>
                <el-tag class="tag-space" type="info">已查看</el-tag>
              </div>
              <qa-items :items="articleList"></qa-items>
           </div>
        </el-tab-pane> -->
        <el-tab-pane label="全部" name="all">
          <div v-for="(item, index) in dataList.list">
            <course-items v-if="item.type==1" :items="[item]" @confirm="confirm"></course-items>
            <case-items v-if="item.type==3" @confirm="confirm" :items="[item]"></case-items>
            <note-list v-if="item.type==6" @confirm="confirm" :list="[item]"></note-list>
            <article-items v-if="item.type==2" @confirm="confirm" :items="[item]"></article-items>
            <qa-items v-if="item.type==4" :items="[item]" @confirm="confirm" :collect="true" :share="false" :remove="false" :edit="false"></qa-items>
          </div>
          <!-- v-if="courseList.count>courseList.pageSize" -->
          <div v-if="dataList.list.length > 0" style="text-align: center;margin-top:57px">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="dataList.pageIndex"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="dataList.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="dataList.count"
            ></el-pagination>
          </div>
          <div v-else>
            <div v-if="qaList.list.length == 0">
              <div v-if="isSearh" class="zan-wu">没有查询到相关内容</div>
              <div v-else class="zan-wu">暂无数据</div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="课程" name="course">
          <div>
            <!-- <div style="padding-bottom: 10px;">
              <div style="display: flex;justify-content:flex-start;">
                <div style="padding: 0px 5px;"><el-select clearable v-model="courseList.type">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                  </el-select></div>
                <div style="padding: 0px 5px;"><el-input placeholder="关键词搜索" v-model="courseList.title"></el-input></div>
                <div style="padding: 0px 5px;"><el-button icon="el-icon-search" @click="findCourse" type="primary" size="small">搜索</el-button></div>
                <div style="padding: 0px 5px;"><el-button type="primary" @click="resData" icon="el-icon-refresh-right" style="padding: 10px 15px;">重置</el-button></div>
              </div>
            </div> -->
            <course-items :items="courseList.list" @confirm="confirm"></course-items>
          </div>
          <!-- v-if="courseList.count>courseList.pageSize" -->
          <div v-if="courseList.list.length > 0" style="text-align: center;margin-top:57px">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="courseList.pageIndex"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="courseList.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="courseList.count"
            ></el-pagination>
          </div>
          <div v-else>
            <div v-if="courseList.list.length == 0">
              <div v-if="isSearh" class="zan-wu">没有查询到相关内容</div>
              <div v-else class="zan-wu">暂无数据</div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="笔记" name="note">
          <div>
            <note-list @confirm="confirm" :list="noteList.list"></note-list>
          </div>
          <div style="text-align: center;margin-top:50px;" v-if="caseList.list.length > 0">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="noteList.pageIndex"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="noteList.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="noteList.count"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="案例" name="case">
          <div>
            <case-items @confirm="confirm" :items="caseList.list"></case-items>
          </div>
          <div style="text-align: center;margin-top:50px;" v-if="caseList.list.length > 0">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="caseList.pageIndex"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="caseList.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="caseList.count"
            ></el-pagination>

          </div>
           <div v-else>
            <div v-if="caseList.list.length == 0">
              <div v-if="isSearh" class="zan-wu">没有查询到相关内容</div>
              <div v-else class="zan-wu">暂无数据</div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="文章" name="article">
          <div>
            <!-- <div style="padding-bottom: 10px;">
              <div style="display: flex;justify-content:flex-start;">
                <div style="padding: 0px 5px;"><el-input placeholder="关键词搜索" v-model="articleList.title"></el-input></div>
                <div style="padding: 0px 5px;"><el-button @click="findArticle" icon="el-icon-search" type="primary" size="small">搜索</el-button></div>
              </div>
            </div> -->
            <article-items @confirm="confirm" :items="articleList.list"></article-items>
          </div>
          <!-- v-if="articleList.count>articleList.pageSize" -->
          <div  v-if="articleList.list.length > 0" style="text-align: center;margin-top:57px">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="articleList.pageIndex"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="articleList.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="articleList.count"
            ></el-pagination>
          </div>
          <div v-else>
            <div v-if="articleList.list.length == 0">
              <div v-if="isSearh" class="zan-wu">没有查询到相关内容</div>
              <div v-else class="zan-wu">暂无数据</div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="问答" name="qa">
          <div>
            <!-- <div style="padding-bottom: 10px;">
              <div style="display: flex;justify-content:flex-start;">
                <div style="padding: 0px 5px;">
                  <el-select v-model="qaList.resolve" style="width: 110px;" clearable>
                    <el-option label="未解决" :value="false"></el-option>
                    <el-option label="已解决" :value="true"></el-option>
                  </el-select>
                </div>
                <div style="padding: 0px 5px;"><el-input placeholder="关键词搜索" v-model="qaList.title"></el-input></div>
                <div style="padding: 0px 5px;"><el-button @click="findQa" icon="el-icon-search" type="primary" >搜索</el-button></div>
              </div>
            </div> -->
            <qa-items :items="qaList.list" @confirm="confirm" :collect="true" :share="false" :remove="false" :edit="false"></qa-items>
          </div>
          <!-- v-if="qaList.count>qaList.pageSize" -->
          <div v-if="qaList.list.length > 0" style="text-align: center;margin-top:57px">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="qaList.pageIndex"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="qaList.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="qaList.count"
            ></el-pagination>
          </div>
          <div v-else>
            <div v-if="qaList.list.length == 0">
              <div v-if="isSearh" class="zan-wu">没有查询到相关内容</div>
              <div v-else class="zan-wu">暂无数据</div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div style="height: 100px;text-align: center;"></div>
    </div>
  </div>
</template>

<script>
import articleItems from '@/components/Article/collectList.vue';
import courseItems from '@/components/Course/collectItem.vue';
import caseItems from '@/components/Case/collectList.vue';
import noteList from '@/components/HomePage/favoritesNote.vue'
import qaItems from '@/components/Qa/favoritesQaList.vue';
import apiFavorite from '@/api/modules/favorites.js';
import apiUser from '@/api/system/user.js';
import apiNote from '@/api/phase2/note.js';
import apiCourse from "@/api/modules/coursePortal.js";
import courseImage from '@/components/Course/courseImage.vue';
import {cutFullName} from "@/utils/tools.js";
export default {
  name: 'myShareIndex',
  components: { articleItems, courseItems, qaItems, courseImage,caseItems,noteList},
  data() {
    return {
      isSearh:false,
      isRead: '',
      keyword: '',
      options: [
        {
          value: null,
          label: '全部'
        },
        {
          value: 10,
          label: '微课'
        },
        {
          value: 20,
          label: '录播课'
        }
      ],
      qaList: {
        pageIndex: 1,
        pageSize: 10,
        count: 0,
        list: []
      },
      caseList: {
        pageIndex: 1,
        pageSize: 10,
        count: 0,
        list: []
      },
      noteList:{
        pageIndex: 1,
        pageSize: 10,
        count: 0,
        list: []
      },
      articleList: {
        type: '',
        pageIndex: 1,
        pageSize: 10,
        count: 0,
        list: []
      },
      courseList: {
        pageIndex: 1,
        pageSize: 10,
        count: 0,
        type: null,
        list: []
      },
      dataList: {
        pageIndex: 1,
        pageSize: 10,
        keyword: '',
        count: 0,
        list: []
      },
      tabName: 'all'
    };
  },
  mounted() {
    if (this.tabName == 'qa') {
      this.findQa();
    }
    if (this.tabName == 'case') {
      this.findCase();
    }
    if (this.tabName == 'note') {
        this.findNote();
      }
    if (this.tabName == 'article') {
      this.findArticle();
    }
    if (this.tabName == 'course') {
      this.findCourse();
    }
    if (this.tabName == 'all') {
      this.findAll();
    }
  },
  methods: {
    queryData() {
      this.qaList.pageIndex = 1;
      this.articleList.pageIndex = 1;
      this.courseList.pageIndex = 1;
      this.dataList.pageIndex = 1;
      this.caseList.pageIndex = 1;
      this.isSearh = true;
      if (this.tabName == 'qa') {
        this.findQa();
      }
      if (this.tabName == 'case') {
        this.findCase();
      }
      if (this.tabName == 'note') {
        this.findNote();
      }
      if (this.tabName == 'article') {
        this.findArticle();
      }
      if (this.tabName == 'course') {
        this.findCourse();
      }
      if (this.tabName == 'all') {
        this.findAll();
      }
    },
    resData() {
      this.qaList.pageIndex = 1;
      this.articleList.pageIndex = 1;
      this.courseList.pageIndex = 1;
      this.dataList.pageIndex = 1;
      this.caseList.pageIndex = 1;
      this.keyword = '';
      this.isRead = '';
      this.courseList.type = '';
      this.articleList.type = '';
      this.queryData();
      this.isSearh = false;
    },
    //tab切换
    changeTab(tab) {
      if (tab.name == 'qa') {
        this.findQa();
      }
      if (tab.name == 'case') {
        this.findCase();
      }
      if (this.tabName == 'note') {
        this.findNote();
      }
      if (tab.name == 'article') {
        this.findArticle();
      }
      if (tab.name == 'course') {
        this.findCourse();
      }
      if (tab.name == 'all') {
        this.findAll();
      }
    },
    //分页点击事件
    handleSizeChange(value) {
      if (this.tabName == 'qa') {
        this.qaList.pageSize = value;
        this.findQa();
      }
      if (this.tabName == 'case') {
        this.caseList.pageSize = value;
        this.findCase();
      }
      if (this.tabName == 'note') {
        this.findNote();
      }
      if (this.tabName == 'article') {
        this.articleList.pageSize = value;
        this.findArticle();
      }
      if (this.tabName == 'course') {
        this.courseList.pageSize = value;
        this.findCourse();
      }
      if (this.tabName == 'all') {
        this.dataList.pageSize = value;
        this.findAll();
      }
    },
    //分页点击事件
    handleCurrentChange(value) {
      if (this.tabName == 'qa') {
        this.qaList.pageIndex = value;
        this.findQa();
      }
      if (this.tabName == 'case') {
        this.caseList.pageIndex = value;
        this.findCase();
      }
      if (this.tabName == 'note') {
        this.noteList.pageIndex = value;
        this.findNote();
      }
      if (this.tabName == 'article') {
        this.articleList.pageIndex = value;
        this.findArticle();
      }
      if (this.tabName == 'course') {
        this.courseList.pageIndex = value;
        this.findCourse();
      }
      if (this.tabName == 'all') {
        this.dataList.pageIndex = value;
        this.findAll();
      }
    },
    findNote() {
      let query = {
        paegIndex:this.noteList.pageIndex,
        pageSize:this.noteList.pageSize,
        dataType:1,
        // orderType 排序顺序 顺序倒叙
        // orderField 排序字段
        keyword: this.keyword.trim()
      }
      apiNote.pagelist(query).then(res=>{
        if(res.status==200){
          this.noteList.count = res.result.count;
          this.noteList.list = res.result.list;
        }
      })
    },
    findAll() {
      let query = {
        pageIndex: this.dataList.pageIndex,
        pageSize: this.dataList.pageSize,
        keyword: this.keyword.trim()
      };
      apiFavorite.queryAll(query).then(res=>{
        if(res.status==200){



          this.dataList.count=res.result.count;
          if(res.result.length!=0){
            let courseIds=[];
            res.result.list.map(item=>{
              item.avatar=''
              item.name=''
              item.orgInfo=''
              item.sex= null
              courseIds.push(item.id);
              if(item.type == 4) {
                item.question = {isResolve:false,title:'',content:'',bestAnswer:''};
                item.question.isResolve=item.isResolve;
                item.question.title=item.title;
                item.question.content=item.content;
                item.question.bestAnswer=item.bestAnswer;
                item.question.id=item.id;
                
              }
              if(item.type == 3){
              item.cases = {title:'',summary:''};
              item.cases.title=item.title;
              item.cases.summary=item.content;
              item.cases.id=item.id;
            }
            })
            this.loadCouserTeacher(res.result.list,courseIds);
            res.result.list.forEach(item=>{
              item.isAll = false;
            })
            this.dataList.list.push(...res.result.list);
            this.getAllUserData(res.result.list);
          }else{
            this.dataList.list=[]
          }
        }
      })
    },
    getAllUserData(list){
      let ids=[];
      list.forEach((item,index)=>{
        if(item.objType==2){
          ids.push(item.sysCreateAid)
        }
        if(item.objType==4){
          ids.push(item.question.sysCreateAid)
        }
        if(item.type){
          ids.push(item.authorId)
        }
      })
      let noRepeatIds = [...new Set(ids)];
      apiUser.getByIds(noRepeatIds).then(res => {
        if (res.status == 200) {
          list.forEach(item=>{
            let obj={}
            if(item.objType==2){
              obj=res.result.find(author=>{
                author.orgInfo=cutFullName(author.orgInfo,1);
                return author.aid == item.sysCreateAid;
              })
            }
            if(item.objType==4){
              obj=res.result.find(author=>{
                author.orgInfo=cutFullName(author.orgInfo,1);
                return author.aid == item.question.sysCreateAid;
              })
            }
            if(item.type != 1){
              obj=res.result.find(author=>{
                author.orgInfo=cutFullName(author.orgInfo,1);
                return author.aid == item.authorId;
              })
            }
            item=Object.assign(item, obj);
          })
          // this.dataList.list = list.map(item => {
          //   let obj = res.result.find(author => {
          //     return author.aid == item.question.sysCreateAid;
          //   });
          //   item = Object.assign(item, obj);
          //   return item;
          // });
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //问答数据查询
    findQa() {
      let { pageIndex, pageSize } = this.qaList;
      let query = { pageIndex, pageSize };
      // if(this.pageData.resolve!=false&&!this.pageData.resolve){
      //   query.resolve=null
      // }
      // if (this.qaList.resolve != '') {
      query.resolve = this.isRead;
      // }
      // if (this.qaList.title) {
      query.keyword = this.keyword.trim();
      // }
      apiFavorite.qaPageList(query)
      .then(res => {
        if (res.status == 200) {
          this.qaList.count = res.result.count;
          res.result.list.forEach(item =>{
            item.isAll = false;
          })
          this.qaList.list.push(...res.result.list);
          if (this.qaList.list.length != 0) {
            this.getQaUserData(res.result.list);
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },
    getQaUserData(list) {
      let ids;
      ids = list.map((item, index) => {
        // item.authorInfo = { aid: '', name: '', orgInfo: '', avater: '' };
        return item.question.sysCreateAid;
      });
      let noRepeatIds = [...new Set(ids)];
      apiUser.getByIds(noRepeatIds).then(res => {
        if (res.status == 200) {
          this.qaList.list = list.map(item => {
            let obj = res.result.find(author => {
              return author.aid == item.question.sysCreateAid;
            });
            item = Object.assign(item, obj);
            if(item.orgInfo){
             item.orgInfo=cutFullName(obj.orgInfo,1);
            }
            return item;
          });
        } else {
          this.$message.error(res.message);
        }
      });
    },
    findCase() {
      let { pageIndex, pageSize } = this.caseList;
      let query = { pageIndex, pageSize };
      query.keyword = this.keyword.trim();
      query.resolve = this.isRead;
      apiFavorite.casePageList(query).then(res => {
        if (res.status == 200) {
          this.caseList.count = res.result.count;
          res.result.list.forEach(item =>{
            item.isAll = false;
          })
          this.caseList.list.push(...res.result.list);
          if (this.caseList.list.length != 0) {
            this.getCaseUserData(res.result.list);
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },
    loadCouserTeacher(list,ids){
      let that = this;
      // 先查课程关联教师iD
      apiCourse.getTeacherByCourseIDs(ids).then(cres => {
        if(cres.status==200  && cres.result){
          //let userIds = [];
          list.forEach((item,index)=>{
            cres.result.some(courseTeahcer=>{
              if(courseTeahcer.courseId==item.objId){
                if(courseTeahcer.teacherIds){
                  //userIds.push(courseTeahcer.teacherIds[0]);
                  item.authorName=courseTeahcer.names[0];
                  //item.authorInfo.aid=courseTeahcer.teacherIds[0];
                }
                //console.log(item,'item');
                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);
        }
      });
    },
    getCaseUserData(list) {
      let ids;
      ids = list.map((item, index) => {
        // item.authorInfo = { aid: '', name: '', orgInfo: '', avater: '' };
        return item.cases.authorId;
      });
      let noRepeatIds = [...new Set(ids)];
      apiUser.getByIds(noRepeatIds).then(res => {
        if (res.status == 200) {
          this.caseList.list = list.map(item => {
            let obj = res.result.find(author => {
              return author.aid == item.cases.authorId;
            });
            item = Object.assign(item, obj);
            if(item.orgInfo){
             item.orgInfo=cutFullName(obj.orgInfo,1);
            }
            return item;
          });
        } else {
          this.$message.error(res.message);
        }
      });
    },
    findArticle() {
      let { pageIndex, pageSize } = this.articleList;
      let query = { pageIndex, pageSize };
      // if (this.articleList.title) {
      query.keyword = this.keyword.trim();
      // }
      query.resolve = this.isRead;
      apiFavorite.articlePageList(query).then(res => {
        if (res.status == 200) {
          this.articleList.count = res.result.count;
          this.articleList.list = res.result.list;
          if (this.articleList.list.length != 0) {
            this.getArticleUserData(res.result.list);
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },
    getArticleUserData(list) {
      let ids;
      ids = list.map((item, index) => {
        return item.sysCreateAid;
      });
      const noRepeatIds = [...new Set(ids)];
      apiUser.getByIds(noRepeatIds).then(res => {
        if (res.status == 200) {
          this.articleList.list = list.map(item => {
            let obj = res.result.find(author => {
              return author.aid == item.sysCreateAid;
            });
            item = Object.assign(item, obj);
            if(item.orgInfo){
             item.orgInfo=cutFullName(obj.orgInfo,1);
            }
            return item;
          });
        } else {
          this.$message.error(res.message);
        }
      });
    },
    findCourse() {
      let { pageIndex, pageSize } = this.courseList;
      let query = { pageIndex, pageSize };
      // if (this.courseList.title) {
      query.keyword = this.keyword.trim();
      // }
      if (this.courseList.type) {
        query.type = this.courseList.type;
      }
      apiFavorite.coursePageList(query).then(res => {
        if (res.status == 200) {
          let courseIds=[];
          res.result.list.forEach(item=>{
            //item.authorInfo={aid:'',name:'',orgInfo:'',avatar:'',code:''};
            courseIds.push(item.objId);
          })
          this.courseList.count = res.result.count;
          this.courseList.list = res.result.list;
          this.loadCouserTeacher(res.result.list,courseIds);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    confirm(item) {
      let id = '';
      if(item.type){
        id = item.favoriteId;
      } else {
        id = item.id;
      }
      apiFavorite.del(id).then(res => {
        if (res.status == 200) {
          this.$message.success('取消收藏成功');
          if (this.tabName == 'qa') {
            this.findQa();
          }
          if (this.tabName == 'case') {
            this.findCase();
          }
          if (this.tabName == 'note') {
            this.findNote();
          }
          if (this.tabName == 'article') {
            this.findArticle();
          }
          if (this.tabName == 'course') {
            this.findCourse();
          }
          if (this.tabName == 'all') {
            this.findAll();
          }
        } else {
          this.$message.error(res.message);
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.el-col {
  padding: 0 0 0 10px !important;
}
.grid-content {
  padding-right: 0px;
}
::v-deep .el-tabs__item.is-active {
  font-weight: 500;
  color: #333333;
}
::v-deep .el-tabs__active-bar {
  // background-color: #ffb30f;
}
.tag-space {
  margin-right: 10px;
}
.uc-badge {
  margin-top: 10px;
  margin-right: 40px;
}
.uc-course {
  display: flex;
  justify-content: space-around;
  border: 1px solid #f0f0f0;
  padding: 10px;
  .uc-course-img {
    width: 200px;
    img {
      width: 200px;
      border: 1px solid #f4f4f5;
    }
  }
  .uc-course-info {
    flex: 1;
    line-height: 28px;
    padding: 0px 10px;
    .uc-course-name {
      font-size: 18px;
      font-weight: 700;
    }
    .uc-course-text {
      color: #747474;
    }
  }
  .uc-course-btns {
    width: 150px;
  }
}
</style>
