<template>
  <div class="container">
    <div class="personbox flexone" v-if="show">
      <div class="personboxleft">
        <img :src="user.avatar" alt="" />
      </div>
      <div class="personboxright">
        <div class="persondis flexone">
          <div class="personname">{{ user.nickname }}</div>
          <div v-if='user_id!=null'>
           <div
            class="personguan"
            v-if="user.is_attention == 2"
            @click="attentionguan"
          >
            关注
          </div>
          <div
            class="noattention"
            @click="noattention"
            v-if="user.is_attention == 1"
          >
            取消关注
          </div></div>
         
        </div>
        <div class="connectphone">联系方式：{{user.mobile_hide}}</div>
      </div>
    </div>
    <div class="tiezhlist">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <tiezicontent :tiezilist="personlist" :showpull="showpull" />
      </van-list>
     
    </div>
  </div>
</template>

<script>
import tiezicontent from "@/components/tiezicontent.vue";
import { Toast } from "vant";
export default {
  components: {
    tiezicontent
  },
  data() {
    return {
      tiezisel: 1,
      user_id: "",
      suer: "",
      personlist: [],
      showpull: true,
      loading: false,
      finished: false,
      page: 1,
      show: false
    };
  },
  created() {
    document.title = "个人主页";
    this.user_id = this.$route.query.userid;
    this.getpersonpage();
  },
  methods: {
    seltiekind(id) {
      this.tiezisel = id;
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        let newpage = this.page;
        newpage++;
        this.page = newpage;
        this.getpersonpage();
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.showpull == false) {
          this.finished = true;
        }
      }, 1000);
    },

    // 获取个人主页
    getpersonpage() {
      let that = this;
      let url = "/api/forum/get_user_forum";
      var params = {
        user_id: that.user_id,
        page: that.page,
        pageNum: 10
      };
      console.log("8934394889", params);

      that.$axios
        .post(url, params)
        .then(res => {
          console.log("个人主页信息", res);
          that.user = res.data.user;
          console.log("676767676767", that.user);
          setTimeout(function() {
            that.show = true;
          }, 200);
          that.personlist = that.personlist.concat(res.data.list);
          if (that.page > 1) {
            if (res.data.list.length == 0) {
              that.showpull = false;
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 关注和取消关注
    attentionguan() {
      let that = this;
      let url = "/api/forum/attention";
      var params = {
        to_user_id: that.user_id
      };

      that.$axios
        .post(url, params)
        .then(res => {
          Toast("关注成功");
          that.user.is_attention = 1;
          that.user = that.user;
          that.$forceUpdate();
        })
        .catch(err => {
          console.log(err);
          Toast(err.msg)
        });
    },
    noattention() {
      let that = this;
      let url = "/api/forum/attention";
      var params = {
        to_user_id: that.user_id
      };

      that.$axios.post(url, params).then(res => {
        Toast("取消关注成功");
        that.user.is_attention = 2;
        that.user = that.user;
        that.$forceUpdate();
      });
    }
  }
};
</script>

<style scoped>
@import "../../style/homepage.css";
</style>