<template>
  <div>
    <ul class="follow-top-tabs">
        <li class="follow-home-title tabs-index" @click="tagTab(1)">{{userInfo.aid == pageId ?'我关注的人':'他关注的人'}}<span v-if="active == 1" class="line"></span></li>
        <li class="follow-home-title tabs-index" @click="tagTab(2)">{{userInfo.aid == pageId ?'关注我的人':'关注他的人'}}<span v-if="active == 2" class="line"></span></li>
    </ul>
    <div v-show="active ==1">
        <div class="follow-list" v-for="item in follow.list" :key="item.id">
            <div style="width:60px;height:60">
              <el-avatar shape="circle" style="width:60px;height:60px" size="small" :src="baseUrl+item.authorInfo.avatar" v-if="item.authorInfo.avatar"></el-avatar>
              <div v-else class="uavatar">
                  <div v-if="item.authorInfo.sex == null" style="border-radius: 50%;width: 60px;height: 60px;"></div>
                  <div v-else>
                    <div v-if="item.authorInfo.sex === 1 "><img style="width:60px;height:60" :src="`${webBaseUrl}/images/Avatarman.png`" alt=""></div>
                    <div v-else><img style="width:60px;height:60" :src="`${webBaseUrl}/images/Avatarwoman.png`" alt=""></div>
                  </div>
                </div>
              <!-- <img style="width:60px;height:60" :src="item.authorInfo.avatar"/> -->
            </div>
            <div class="follow-center">
                <p class="follow-home-title" style="font-size: 20px;margin-bottom: 12px;">{{item.authorInfo.name}}
                  <!-- <img style="width:22px;height:22;vertical-align:middle" src="/images/homeWu/man.png" /> -->
                </p>
                <p class="portal-summary-text">{{item.authorInfo.sign}}</p>
            </div>
            <div>
                <el-button plain class="btn" icon="el-icon-check" v-if="pageId == userInfo.aid && active == 1" @click="cancel(item)">取消关注</el-button>
                <el-button type="primary" class="btn" v-if="active == 2" icon="el-icon-plus">关注他</el-button>
                <el-button class="btn" icon="el-icon-plus" v-if="active == 2">已关注</el-button>
            </div>
        </div>
        <!--分页没有加-->
          <div style="text-align: center; margin-top:57px;" v-show="follow.count > 0">
            <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="follow.pageIndex"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="follow.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="follow.count">
            </el-pagination>
        </div>
    </div>
    <div v-if="showEmpty" class="home-no-list">
        <img class="img" style="width:186px;height:160px" :src="`${webBaseUrl}/images/homeWu/no-follow.png`" alt="" srcset="">
        <p class="text">还没有关注的人</p>
    </div>
    <div v-show="active == 2">
        <div class="follow-list" v-for="(maPage,index) in followMe.list" :key="index">
            <div style="width:60px;height:60">
              <el-avatar shape="circle" style="width:60px;height:60px" size="small" :src="baseUrl+maPage.userFollow.authorInfo.avatar" v-if="maPage.userFollow.authorInfo.avatar"></el-avatar>
              <div v-else class="uavatar">
                  <div v-if="maPage.userFollow.authorInfo.sex == null" style="border-radius: 50%;width: 60px;height: 60px;"></div>
                  <div v-else>
                    <div v-if="maPage.userFollow.authorInfo.sex === 1 "><img style="width:60px;height:60" :src="`${webBaseUrl}/images/Avatarman.png`" alt=""></div>
                    <div v-else><img style="width:60px;height:60" :src="`${webBaseUrl}/images/Avatarwoman.png`" alt=""></div>
                  </div>
                </div>
              <!-- <img style="width:60px;height:60" :src="item.authorInfo.avatar"/> -->
            </div>
            <div class="follow-center">
                <p class="follow-home-title" style="font-size: 20px;margin-bottom: 12px;">{{maPage.userFollow.authorInfo.name}}
                  <!-- <img style="width:22px;height:22;vertical-align:middle" src="/images/homeWu/man.png" /> -->
                </p>
                <p class="portal-summary-text">{{maPage.userFollow.authorInfo.sign}}</p>
            </div>
            <div v-if="Id == userInfo.aid">
                <el-button class="btn" icon="el-icon-plus" v-if="maPage.has">已关注</el-button>
                <el-button type="primary" class="btn" v-else icon="el-icon-plus" @click="toFollow(maPage)">关注他</el-button>
            </div>
        </div>
         <!--分页没有加-->
         <div style="text-align: center; margin-top:57px;" v-show="page.count > 0">
            <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="followMe.pageIndex"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="followMe.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="followMe.count">
            </el-pagination>
        </div>
    </div>

  </div>
</template>
<script>
import interactBar from "@/components/Portal/interactBar.vue";
import author from "@/components/Portal/authorInfo.vue";
import apiFollow from "@/api/phase2/userfollow.js"
import { mapGetters,mapActions } from 'vuex';
import apiUser from "@/api/system/user.js";
  export default{
    name:"followList",
    components: {
      interactBar,
      // timeShow,
      author
    },
    computed:{
          ...mapGetters(['userInfo']),
          avatarText(){
              return userAvatarText(this.userInfo.name);
          },
          showEmpty(){ //是否显示空信息内容
            if(this.active==1 && this.follow.list.length==0){
               return true;
            }else if(this.active==2 && this.followMe.list.length==0){
               return true;
            }
            return false;
          }
      },
      data(){
          return{
            baseUrl:process.env.VUE_APP_FILE_BASE_URL,
            active:1,
            pageId:'',
            follow:{
              list:[],
              count:0,
              pageIndex:1,
              pageSize:10
            },
            followMe:{
              list:[],
              count:0,
              pageIndex:1,
              pageSize:10
            },
            page:{
              pageIndex:1,
              pageSize:10,
              aid:'',
              count:0
            }
          }
      },
      mounted() {
            this.pageId = this.$xpage.getHomeId(this.$route);
            this.$bus.$on('followIndex',(num)=>{
               this.active = num;
            })
      },
    methods:{
      toFollow(item) {
          apiFollow.save(item.userFollow.aid).then(res=>{
            if(res.status == 200) {
              // this.$message.success("关注成功"); 
              this.getMyPage();
            } else {
              this.$message.error(res.message);
            }
          })
        },
      resetActive(){
        this.active=1;
        this.follow={list:[],count:0,pageIndex:1,pageSize:10},
        this.followMe={list:[],count:0,pageIndex:1,pageSize:10},
        this.tagTab(1);
      },
      cancel(item,idx) {
        let $this=this;
        apiFollow.remove(item.followId).then(res=>{
           if(res.status == 200) {
            this.getPage();
            //  $this.follow.list.splice(idx,1);
           }
        })
      },//展示全部
      tagTab(num) {
         this.active = num;
         if(num == 1) {
           if(this.follow.list.length==0){
             this.getPage()
           }

         } else {
           if(this.followMe.list.length==0){
             this.getMyPage()
           }
         }
       },
       handleSizeChange(val) {
         if(this.active==1){
           this.follow={list:[],count:0,pageIndex:1,pageSize:val};
           this.getPage()
         }else{
           this.followMe={list:[],count:0,pageIndex:1,pageSize:val};
           this.getMyPage()
         }

      },
      handleCurrentChange(val) {
        if(this.active==1){
          this.follow.pageIndex=val;
          this.getPage()
        }else{
          this.followMe.pageIndex=val;
          this.getMyPage()
        }

      },
      getMyPage() {//关注我的，关注他的
        this.page.aid = this.pageId;
        this.page.pageIndex=this.followMe.pageIndex;
        this.page.pageSize=this.followMe.pageSize;
        let $this=this;
        apiFollow.mypage(this.page).then(res=>{
            if(res.status== 200) {
               $this.followMe.count = res.result.count;
               res.result.list.forEach(item=>{
                  item.userFollow.authorInfo = { aid: "",name: "",orgInfo: "",avatar: "",sex: null ,sign:''}
               })
               this.followMe.list = res.result.list;
               //console.log(this.mypageList,'this.mypageList');
               this.getUserData(res.result.list);
            }else{
              console.log('加载关注我数据错误:'+res.message);
            }
        })
       },
       getPage() { //我关注的，他关注的
        this.page.aid = this.pageId;
        this.page.pageIndex=this.follow.pageIndex;
        this.page.pageSize=this.follow.pageSize;
        let $this=this;
        apiFollow.page(this.page).then(res=>{
          if(res.status== 200) {
             $this.follow.count = res.result.count;
             res.result.list.forEach(item=>{
                item.authorInfo = { aid: "",name: "",orgInfo: "",avatar: "",sex: null ,sign:''}
             })
             this.follow.list = res.result.list;
             this.getUserData(res.result.list);
          }
        })
       },
       getUserData(list) {
          let ids = [];
          if(this.active == 1) {
            ids = list.map(item=> item.followId);
          } else {
            ids = list.map(item=> item.userFollow.aid);
          }
            apiUser.getByIds(ids).then(res => {
                if (res.status == 200) {
                    list.forEach((item, index) => {
                        res.result.some(author => {
                        if (this.active == 1 && author.aid == item.followId) {
                            item.authorInfo = author;
                            return true;
                        } else if ( this.active == 2 && author.aid == item.userFollow.aid) {
                            item.userFollow.authorInfo = author;
                            return true;
                        } else {
                            return false;
                        }
                    });
                });
                } else {
                this.$message.error(res.message);
                }
            });
         },
     }
  }
</script>
<style lang="scss" scoped>
.follow-top-tabs{
  display: flex;
  padding: 4px 0;
  .tabs-index{
    padding:0 60px 10px 10px;
    cursor: pointer;
    .line{
        display: inline-block;
        width: 100%;
        height: 4px;
        background: #0060FF;
        border-radius: 3px;
    }
  }
}
.follow-list{
    display: flex;
    border-top:  1px solid rgba($color: #999999, $alpha: 0.2);
    padding: 36px 0 38px 0;
    .follow-center{
      flex: 100%;
      margin-left: 20px
    }
    .btn{
        margin-top: 18px;
        height: 40px;
        width: 140px;
      }
}
</style>
