<template>
    <div class="home-page-left">
        <!-- <div class="book-input">
            <span>分享书籍</span>
            <el-input style="width:130px" v-model="input" placeholder="请输入内容"></el-input>
            <i style="color: #333333" class="el-icon-search"></i>
        </div> -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane name="">
                <span slot="label"><svg-icon icon-class="home-dynamic" style="font-size: 30px;"></svg-icon> <span class="tabs-info">动态</span></span>
                <template v-for="item in allPageList">
                    <course-list v-if="item.contentType == 1" :list="[item]" :isDynamic="true" :personal="personal"></course-list>
                    <case-list v-if="item.contentType == 3" :list="[item]" :isDynamic="true" :personal="personal"></case-list>
                    <note-list v-if="item.contentType == 6" :list="[item]" :isDynamic="true" :personal="personal"></note-list>
                    <put-list v-if="item.contentType == 4" :list="[item]" :isDynamic="true" :personal="personal"></put-list>
                    <answer-list v-if="item.contentType == 5" :list="[item]" :isDynamic="true" :personal="personal"></answer-list>
                    <article-list v-if="item.contentType == 2" :list="[item]" :isDynamic="true" :personal="personal"></article-list>
                </template>

            </el-tab-pane>
            <el-tab-pane name="1">
                <span slot="label"><svg-icon icon-class="home-course" style="font-size: 30px;"></svg-icon><span class="tabs-info">课程</span></span>
                <course-list :list="cousrePageList" :isDynamic="false" :personal="personal"></course-list>
            </el-tab-pane>
            <el-tab-pane name="3">
                <span slot="label"><svg-icon icon-class="home-case" style="font-size: 30px;"></svg-icon><span class="tabs-info">案例</span></span>
                <case-list :list="casePageList" :isDynamic="false" :personal="personal"></case-list>
            </el-tab-pane>
            <el-tab-pane name="6">
                <span slot="label"><svg-icon icon-class="home-note" style="font-size: 30px;"></svg-icon><span class="tabs-info">笔记</span></span>
                <note-list :list="notePageList" :isDynamic="false" :personal="personal"></note-list>
            </el-tab-pane>
            <el-tab-pane name="4">
                <span slot="label"><svg-icon icon-class="home-qa" style="font-size: 30px;"></svg-icon><span class="tabs-info">提问</span></span>
                <put-list :list="qaPageList" :isDynamic="false" :personal="personal" @hideIndex="dynamicHide"></put-list>
            </el-tab-pane>
            <el-tab-pane name="5">
                <span slot="label"><svg-icon icon-class="home-answer" style="font-size: 30px;"></svg-icon><span class="tabs-info">回答</span></span>
                <answer-list :list="answerPageList" :isDynamic="false" :personal="personal"></answer-list>
            </el-tab-pane>
            <el-tab-pane name="2">
                <span slot="label"><svg-icon icon-class="home-article" style="font-size: 30px;"></svg-icon><span class="tabs-info">文章</span></span>
                <article-list :list="articlePageList" :isDynamic="false" :personal="personal"></article-list>
            </el-tab-pane>
            <el-tab-pane name="7">
                <span slot="label"><svg-icon icon-class="home-follow" style="font-size: 30px;"></svg-icon><span class="tabs-info">关注</span></span>
                <follow-list ref="followList"></follow-list>
            </el-tab-pane>
            <!-- <el-tab-pane name="8">
                <span slot="label"><svg-icon icon-class="home-book" style="font-size: 30px;"></svg-icon><span class="tabs-info">书籍</span></span>
                <book-list></book-list>
            </el-tab-pane> -->
        </el-tabs>
        <div style="text-align: center; margin-top:57px;" v-show="page.count > 0">
            <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageIndex"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.count">
            </el-pagination>
        </div>
        <div style="height:200px"></div>
    </div>
  </template>

  <script>
    import top from '../../layout/components/TopNav/Index.vue'
    import UcHeader from '@/components/HomePage/homePage.vue'
    import CaseList from '@/components/HomePage/caseList.vue'
    import CourseList from '@/components/HomePage/courseList.vue'
    import NoteList from "@/components/HomePage/noteList.vue"
    import PutList from "@/components/HomePage/putTo.vue"
    import AnswerList from "@/components/HomePage/answerList.vue"
    import ArticleList from "@/components/HomePage/articleList.vue"
    import FollowList from "@/components/HomePage/followList.vue"
    import BookList from "@/components/HomePage/bookList.vue"
    import apiStat from '@/api/phase2/stat.js';
    import apiCourse from '@/api/modules/course.js'
    import apiArticle from '@/api/modules/article.js'
    import apiCases from '@/api/modules/cases.js'
    import apiQa from '@/api/modules/qa.js'
    import apiNote from '@/api/phase2/note.js'
    import { mapGetters,mapActions } from 'vuex';
    import apiUser from "@/api/system/user.js";
    import {cutFullName} from "@/utils/tools.js";
    import apiDict from "@/api/modules/dict.js";
    import ItemVue from '../../layout/components/Sidebar/Item.vue'

    export default{
        components:{top,UcHeader,CaseList,CourseList,NoteList,PutList,AnswerList,ArticleList,FollowList,BookList},
        computed: {
          ...mapGetters(['userInfo','majorTypeMap','orgDomainMap']),
        },
        data(){
            return{
                page:{
                    pageIndex:1,
                    pageSize:10,
                    count:0
                },
                input:'',
                activeName:'',
                pageId:'',
                // pageList:[],
                casePageList:[],
                notePageList:[],
                articlePageList:[],
                qaPageList:[],
                answerPageList:[],
                cousrePageList:[],
                allPageList:[],
                personal:false,
                orgData:[],
                Profess:[]
            }
        },
        // watch:{
        //   '$route' (to, from) { //监听路由是否变化
        //   		  if(to.query.id != from.query.id && from.path == "/home/index"){
        //   			  this.id = to.query.id;
        //   			  this.init();//重新加载数据
        //   		  }
        //    }
        // },
        created(){
          if(this.$route.query.id && this.$route.query.id!=''){
            this.init();
          }else{
            //this.$message.error("参数错误");
            //跳转到错误页面
            this.$router.push({path:'/404'})
          }
        },
        mounted() {

        },
        methods:{
            init(){
              this.pageId = this.$route.query.id;
              this.getList();
              if(this.pageId == this.userInfo.aid) {
                this.personal = true;
              }
              this.loadMajorType();
              this.loadOrgDomain();
            },
            dynamicHide(id){
                apiStat.dynamicHide(id).then(res=>{
                    if(res.status == 200){
                      this.$message.success('动态隐藏成功')
                    } else {
                      this.$message.error(res.message);
                    }
                })
            },
            ...mapActions({
                loadMajorType:'majorType/loadMajorTypes',
                loadOrgDomain:'orgDomain/loadOrgDomains'
            }),
            handleSizeChange(val) {
                this.page.pageSize = val;
                this.page.pageIndex = 1;
                this.getList();
            },
            handleCurrentChange(val) {
                this.page.pageIndex = val;
                this.getList();
            },
            getList() {
                let data = {
                    pageIndex:this.page.pageIndex,
                    pageSize:this.page.pageSize,
                    contentType:this.activeName == 0? '':this.activeName,//内容类型
                    aid:this.pageId, //指定用户的动态，
                    hidden:this.pageId == this.userInfo.aid?'':true,//是否隐藏，不指定，查询全部
                }
                apiStat.userDynamicList(data).then(res=>{
                   if(res.status == 200) {
                    this.page.count = res.result.count;
                    let ids = res.result.list.map(item=>item.contentId);
                    const noReapetIds = [...new Set(ids)];
                    res.result.list.forEach(item=>{
                            item.info = {};
                            item.authorInfo = {
                                aid: "",
                                name: "",
                                orgInfo: "",
                                avatar: "",
                                sex: null
                            }
                            item.isAll = false;
                        })
                    if(this.activeName == 0) {// 动态处理
                        this.getAllList(res.result.list)
                    }
                    if(this.activeName == 1){
                      this.cousrePageList = res.result.list
                      this.getCourse(noReapetIds,res.result.list);
                    }
                    if(this.activeName == 2) {
                        this.articlePageList = res.result.list;
                        this.getArticle(noReapetIds,res.result.list);
                    }
                    if(this.activeName == 3) {
                        this.casePageList = res.result.list;
                        this.getCase(noReapetIds,res.result.list);
                    }
                    if(this.activeName == 6) { // 笔记
                        this.getNote(noReapetIds,res.result.list);
                        this.notePageList = res.result.list;
                    }
                    if(this.activeName == 4) { // 提问
                        this.qaPageList = res.result.list;
                        this.getQa(noReapetIds,res.result.list);
                    }
                    if(this.activeName == 5) { // 回答
                        this.answerPageList = res.result.list;
                        this.getAnswer(ids,res.result.list);
                    }
                   }
                })
            },
            getAllList(list) {
                this.allPageList = [];
                let casePageList=[];
                let notePageList=[];
                let articlePageList=[];
                let qaPageList=[];
                let answerPageList=[];
                let cousrePageList=[];
                list.forEach(item=>{
                    if(item.contentType == 1) {
                        cousrePageList.push(item);
                    }
                    if(item.contentType == 2) {
                        articlePageList.push(item);
                    }
                    if(item.contentType == 3) {
                        casePageList.push(item);
                    }
                    if(item.contentType == 4) {
                        qaPageList.push(item);
                    }
                    if(item.contentType == 5) {
                        answerPageList.push(item);
                    }
                    if(item.contentType == 6) {
                        notePageList.push(item);
                    }
                })
                let caseIds = casePageList.map(item=>item.contentId);
                const noReapetCaseIds = [...new Set(caseIds)];
                let articleIds = articlePageList.map(item=>item.contentId);
                const noReapetArticleIds = [...new Set(articleIds)];
                let cousreIds = cousrePageList.map(item=>item.contentId);
                const noReapetCousreIds = [...new Set(cousreIds)];
                let qaIds = qaPageList.map(item=>item.contentId);
                const noReapetQaIds = [...new Set(qaIds)];
                let anwerIds = answerPageList.map(item=>item.contentId);
                const noReapetAnwerIds = [...new Set(anwerIds)];
                let noteIds = notePageList.map(item=>item.contentId);
                const noReapetNoteIds = [...new Set(noteIds)];
                if(noReapetCaseIds.length > 0) {
                    this.getCase(noReapetCaseIds,casePageList);
                }
                if(noReapetArticleIds.length > 0) {
                    this.getArticle(noReapetArticleIds,articlePageList);
                }
                if(noReapetCousreIds.length > 0) {
                    this.getCourse(noReapetCousreIds,cousrePageList);
                }
                if(noReapetQaIds.length > 0) {
                    this.getQa(noReapetQaIds,qaPageList);
                }
                if(noReapetAnwerIds.length > 0) {
                    this.getAnswer(noReapetAnwerIds,answerPageList);
                }
                if(noReapetNoteIds.length > 0) {
                    this.getNote(noReapetNoteIds,notePageList);
                }
                this.allPageList.push(...casePageList,...articlePageList,...cousrePageList,...qaPageList,...answerPageList,...notePageList);
                this.allPageList.sort(this.pcompare("eventTime", false))
            },
            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;
                };
            },
            getAnswer(ids,list){
                if(ids.length == 0){
                   return
                }
                apiQa.answerIds(ids).then(res=>{
                    if(res.status == 200) {
                        list.forEach((item, index) => {
                                res.result.some(con => {
                                if (con.id == item.contentId) {
                                    item.info = con;
                                    return true;
                                } else {
                                    return false;
                                }
                                });
                            });
                    }
                })
            },
            getQa(ids,list){
                apiQa.ids(ids).then(res=>{
                    if(res.status == 200) {
                        list.forEach((item, index) => {
                                res.result.some(con => {
                                if (con.id == item.contentId) {
                                    item.info = con;
                                    return true;
                                } else {
                                    return false;
                                }
                                });
                            });
                    }
                    })
            },
            getNote(ids,list) {
                apiNote.ids(ids).then(res=>{
                  if(res.status == 200) {
                    list.forEach((item, index) => {

                        let score = item.contentInfo.substr(item.contentInfo.length -1,1);
                            console.log(Number(score),'Number(score)');
                            if(Number(score) > 0) {
                               item.score = score;
                            }

                            res.result.some(con => {
                            if (con.id == item.contentId) {
                                item.info = con;
                                return true;
                            } else {
                                return false;
                            }
                            });
                            item.contentInfo = item.contentInfo.slice(0,item.contentInfo.length -1);

                        });
                   }
                })
            },
            getCase(ids,list){
                apiCases.ids(ids).then(res=>{
                   if(res.status == 200) {
                    list.forEach((item, index) => {
                            res.result.some(con => {
                            if (con.id == item.contentId) {
                                item.info = con;
                                return true;
                            } else {
                                return false;
                            }
                            });
                        });
                        this.getCaseUserData(list);
                   }
                })
            },
            getCaseUserData(list) {
                // let ids = caseList.map((item, index) => {
                //     return item.info.authorId;
                // });
                // const noReapetIds = [...new Set(ids)];
                let data = list.filter((item, index) => {
                    return item.info && item.info.authorId != null;
                });
                let ids = data.map((item, index) => {
                    return item.info.authorId;
                });
                const noReapetIds = [...new Set(ids)];
                apiUser.getByIds(noReapetIds).then(res => {
                    if (res.status == 200) {
                        list.forEach((item, index) => {
                            res.result.some(author => {
                            if (author.aid == item.info.authorId) {
                                item.authorInfo = author;
                                author.orgInfo=cutFullName(author.orgInfo,1);
                                return true;
                            } else {
                                return false;
                            }
                        });
                    });
                    } else {
                    this.$message.error(res.message);
                    }
                });
            },
            getArticle(ids,list){
                apiArticle.ids(ids).then(res=>{
                    if(res.status == 200) {
                        list.forEach((item, index) => {
                                res.result.some(con => {
                                if (con.id == item.contentId) {
                                    item.info = con;
                                    return true;
                                } else {
                                    return false;
                                }
                                });
                            });
                        this.getArticleUserData(list);
                   }
                })
            },
            getArticleUserData(list) {
                let data = list.filter((item, index) => {
                    return item.info && item.info.sysCreateAid != null;
                });
                let ids = data.map((item, index) => {
                    return item.info.sysCreateAid;
                });
                const noReapetIds = [...new Set(ids)];
                apiUser.getByIds(noReapetIds).then(res => {
                    if (res.status == 200) {
                        list.forEach((item, index) => {
                            res.result.some(author => {
                            if (author.aid == item.info.sysCreateAid) {
                                item.authorInfo = author;
                                author.orgInfo=cutFullName(author.orgInfo,1);
                                return true;
                            } else {
                                return false;
                            }
                        });
                    });
                    } else {
                    this.$message.error(res.message);
                    }
                });
            },
            getCourse(ids,list) {
                apiCourse.ids(ids).then(res=>{
                    if(res.status == 200) {
                        list.forEach((item, index) => {
                                res.result.some(con => {
                                if (con.id == item.contentId) {
                                    item.info = con;
                                    return true;
                                } else {
                                    return false;
                                }
                                });
                            });
                        // this.getArticleUserData(list);
                   }
                })
            },
            handleClick() {
                if(this.activeName == '7') {
                    this.$refs.followList.getPage();
                    this.page.count = 0;
                   return
                }
                if(this.activeName == '8') {
                    this.page.count = 0;
                    // console.log(this.$refs.followList,'this.$refs.followList');
                    // this.$refs.followList.getPage();
                   return
                }
                this.getList();
            }
        }
      }
  </script>

  <style lang="scss" scoped>
     .home-page{
       ::v-deep .el-tabs__active-bar{
          height: 4px;
          border-radius: 3px;
          background: #387DF7;
          margin-top: 15px;
        }
        ::v-deep .el-tabs__item{
            padding: 0 17px;
            height: 55px;
        }
        ::v-deep .el-tabs__nav-wrap::after{
            height: 1px;
            background-color: 979797;
        }
        .home-page-box{
            padding: 24px 84px;
            display: flex;
            .home-page-left{
                flex: 1;
                // width: 100%;
                background: #FFFFFF;
                border-radius: 4px;
                padding: 25px 47px;
                position: relative;
                .book-input{
                    position: absolute;
                    right: 50px;
                    width: 250px;
                    height: 40px;
                    border: 1px solid rgba(153,153,153,0.5);
                    border-radius: 19px;
                    span{
                        display: inline-block;
                        font-size: 14px;
                        color: #999999;
                        padding: 0 10px 0 16px;
                        border-right:  1px solid rgba($color: #999999, $alpha: 0.48);
                    }
                    ::v-deep .el-input__inner{
                        border: none !important;
                    }
                    ::v-deep .el-icon-search{
                        color: #333333 !important;
                    }
                }
                // display: flex;
                .svg-icon{
                    vertical-align: middle;
                }
                .tabs-info{
                    font-size: 16px;
                    color: #333333;
                    margin-left: 4px;
                }
            }
            .home-page-right{
                padding: 40px 52px 18px 52px;
                box-sizing: border-box;
                background: #fff;
                border-radius: 4px;
                margin-left: 25px;
                .total-per{
                    display: flex;
                    // justify-content: space-between;
                    padding-bottom: 28px;
                    border-bottom:  1px solid rgba($color: #999999, $alpha: 0.21);
                    .per-li{
                        width: 90px;
                        text-align: center;
                        margin: 0 25px;
                        .per-info{
                        display: block;
                        font-size: 28px;
                        font-weight: 600;
                        color: #333333;
                       }
                       .per-text{
                        font-size: 14px;
                        color: #666666;
                       }
                    }

                }
                .ach-title{
                    font-size: 18px;
                    font-weight: 600;
                    color: #333333;
                }
                .ach-ul{
                    display: flex;
                    flex-wrap: wrap;
                    border-bottom:  1px solid rgba($color: #999999, $alpha: 0.21);
                    padding-bottom: 4px;
                    .ach-box{
                        flex: 33%;
                        width: 57px;
                        text-align: center;
                        margin-bottom: 18px;
                        img{
                            width: 52px;
                            height: 58px;
                            margin-bottom: 4px;
                        }
                        p{
                            font-size: 14px;
                            color: #333333;
                            line-height: 20px;
                        }

                    }
                }
                .ava-info{
                    display: flex;
                    padding: 10px 0 30px 0;
                    img{
                        width: 48px;
                        height: 48px;
                    }
                    .ava-text{
                        padding: 2px 0;
                        margin-left: 18px;
                        font-size: 14px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                    }
                }
            }
        }
     }
  </style>
