<template>
  <div>
    <ul class="follow-top-tabs">
        <li class="follow-home-title tabs-index" @click="tagTab(1)">{{userInfo.aid == pageId ?'我关注的人':'TA关注的人'}}<span v-if="active == 1" class="line"></span></li>
        <li class="follow-home-title tabs-index" @click="tagTab(2)">{{userInfo.aid == pageId ?'关注我的人':'关注TA的人'}}<span v-if="active == 2" class="line"></span></li>
    </ul>
    <div v-show="active ==1">
        <div class="follow-list" v-for="(item,index) in follow.list" :key="item.userFollow.id">
            <div style="width:60px;height:60" @click="toHome(item.userFollow.authorInfo)">
              <el-avatar shape="circle" style="width:60px;height:60px" size="small" :src="baseUrl+item.userFollow.authorInfo.avatar" v-if="item.userFollow.authorInfo.avatar"></el-avatar>
              <div v-else class="uavatar">
                  <div v-if="item.userFollow.authorInfo.sex == null" style="border-radius: 50%;width: 60px;height: 60px;"></div>
                  <div v-else>
                    <div v-if="item.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;">{{item.userFollow.authorInfo.name}}
                  <!-- <img style="width:22px;height:22;vertical-align:middle" src="/images/homeWu/man.png" /> -->
                </p>
                <p class="portal-summary-text">{{item.userFollow.authorInfo.sign}}</p>
            </div>
            <div>
              <followButton :data="index" :has="item.has" :aid="item.userFollow.followId" @cancel="myCancelFollow" @add="myAddFollow"></followButton>
            </div>
            <!--
            <div v-if="pageId == userInfo.aid">
                <el-button plain class="btn" icon="el-icon-check" @click="cancel(item)">取消关注</el-button>
            </div>
            <div v-else>
              <el-button class="btn" icon="el-icon-check" v-if="item.has" @click="cancel(item)">取消关注</el-button>
              <el-button type="primary" class="btn" v-else icon="el-icon-plus" @click="toFollow(item)">关注TA</el-button>
            </div>
            -->
        </div>
        <!--分页没有加-->
          <div style="text-align: center; margin-top:57px;" v-show="follow.count > follow.pageSize">
            <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" @click="toHome(maPage.userFollow.authorInfo)">
              <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>
              <followButton data="maPage.userFollow" :has="maPage.has" :aid="maPage.userFollow.aid" @add="myFollowAdd" @cancel="myFollowCancel"></followButton>
            </div>
            <!--
            <div v-if="pageId == userInfo.aid">

                <el-button class="btn" icon="el-icon-check" v-if="maPage.has">已关注</el-button>
                <el-button type="primary" class="btn" v-else icon="el-icon-plus" @click="toFollow(maPage)">关注TA</el-button>
            </div>
            <div v-else>
                <el-button plain class="btn" icon="el-icon-check" v-if="maPage.has" @click="cancel(maPage,2)">取消关注</el-button>
                <el-button type="primary" class="btn" v-else icon="el-icon-plus" @click="toFollow(maPage)">关注TA</el-button>
            </div>
            -->
        </div>
         <!--分页没有加-->
         <div style="text-align: center; margin-top:57px;" v-show="followMe.count > followMe.pageSize">
            <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 followButton from "@/components/Follow/button.vue";
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,
      followButton,
      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
            }
          }
      },
      mounted() {
          this.pageId = this.$xpage.getHomeId(this.$route);
          this.$bus.$on('followIndex',(num)=>{
             this.active = num;
          })
      },
    methods:{
      toHome(ava) {
            this.$router.push({path:this.$xpage.getHomePath(ava.aid)})
      },
      myCancelFollow(aid,delIdx){ //我关注的，取消关注操作
          this.followMe.pageIndex=1;
          this.getMyPage();
          // console.log(aid,delIdx,'参数值');
          // //先从我关注的人中员列表中移除
          // //this.$nextTick(()=>{
          //  this.follow.list.splice(delIdx,1);
          // //})

          // // this.follow.list.forEach(one=>{
          // //    console.log(one.has,one.followId,'存在的用户');
          // // })
          // //检查“关注我的”人列表中是否有此人，有此设置设置关注状态
          // this.followMe.list.some((fme,idx)=>{
          //   //console.log('关注我的:',fme.userFollow.aid,aid);
          //   if(fme.userFollow.aid==aid){
          //      fme.has=false;
          //      //console.log('设置关注状态');
          //      //this.$forceUpdate();
          //      return true
          //   }
          //   return false;
          // });

      },
      myAddFollow(data){ //我关注的，添加关注
        this.followMe.pageIndex=1;
        this.getMyPage();
        //检查“关注我的”人列表中是否有此人，有此设置设置关注状态
        // this.followMe.list.some((item,idx)=>{
        //   //console.log('我关注的用户:'+item.userFollow.followId);
        //   if(item.userFollow.aid==data.userFollow.followId){
        //      item.has=true;
        //      return true
        //   }
        //   return false;
        // });
      },
      myFollowAdd(data) { //关注我的，添加关注
        //直接刷新“我关注的”人员列表
        this.follow.pageIndex=1;
        this.getPage();
        // 因为转移到新的列表，所以这里需要转化一下
        // let check=this.follow.list.some((item,idx)=>{
        //   console.log('我关注的用户:'+item.userFollow.followId,data.userFollow.followId);
        //   if(item.userFollow.followId==data.userFollow.followId){
        //      item.has=true;
        //      return true
        //   }
        //   return false;
        // });
        // if(!check){
        //   this.follow.list.push(data);//同步添加“我关注的”列表中
        // }

      },
      myFollowCancel(aid){ //关注我的，取消关注
        //同步，从我关注的列表中移除
        this.follow.pageIndex=1;
        this.getPage();
        //console.log('移除用户:'+aid);
        // let delIdx=-1;
        // this.follow.list.forEach((item,idx)=>{
        //   //console.log('我关注的用户:'+item.userFollow.followId);
        //   if(item.userFollow.followId==aid){
        //     delIdx=idx;
        //   }
        // });
        // if(delIdx>-1){
        //   this.follow.list.splice(delIdx,1);
        // }
      },
      resetActive(){
        // this.active=1;
        this.follow={list:[],count:0,pageIndex:1,pageSize:10},
        this.followMe={list:[],count:0,pageIndex:1,pageSize:10},
        this.tagTab(this.active);
      },
      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() {//关注我的，关注他的
        let params={
          aid:this.pageId,
          pageIndex:this.followMe.pageIndex,
          pageSize:this.followMe.pageSize
        }
        let $this=this;
        apiFollow.mypage(params).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,2);
            }else{
              console.log('加载关注我数据错误:'+res.message);
            }
        })
       },
       getPage() { //我关注的，他关注的
        let params={
          aid:this.pageId,
          pageIndex:this.follow.pageIndex,
          pageSize:this.follow.pageSize
        }
        let $this=this;
        apiFollow.page(params).then(res=>{
          if(res.status== 200) {
             $this.follow.count = res.result.count;
             res.result.list.forEach(item=>{
                item.userFollow.authorInfo = { aid: "",name: "",orgInfo: "",avatar: "",sex: null ,sign:''}
             })
             $this.follow.list = res.result.list;
             $this.getUserData(res.result.list, 1);
          }
        })
       },
      //  num  判断是哪个接口
       getUserData(list,num) {
            let ids = [];
            if(num == 2) {
              ids = list.map(item=> item.userFollow.aid);
            } else {
              ids = list.map(item=> item.userFollow.followId);
            }
            apiUser.getByIds(ids).then(res => {
                if (res.status == 200) {
                    list.forEach((item, index) => {
                        res.result.some(author => {
                          if (num == 1 && author.aid == item.userFollow.followId) {
                              item.userFollow.authorInfo = author;
                              return true;
                          } else if(num == 2 && author.aid == item.userFollow.aid){
                              item.userFollow.authorInfo = author;
                              return true;
                          } else {
                              return false;
                          }
                      });
                  });
                  this.$forceUpdate()
                } 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>
