<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
            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 class="connectphone">联系方式：15822184563</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 class="tieziitem">
        <div class="tiezitop flexone">
          <div class="tieziimg">
            <img src="../../../assets/touxiang_img@2x.png" alt="" />
          </div>
          <div class="tieziright">
            <div class="tiezirighttop flex">
              <div>
                <div class="tieziming">中面小麦</div>
                <div class="tiezifen">30分钟</div>
              </div>

              <div>
                <div class="vipimg">
                  <img src="../../../assets/vip_icon@2x.png" alt="" />
                  <div class="vipname">VIP1</div>
                </div>
                <div class="tiezizhuan">面坊转让</div>
              </div>
              <img
                src="../../../assets/banggong_icon@2x.png"
                class="banggongimg"
                alt=""
              />
              <img
                src="../../../assets/peisong_icon@2x.png"
                class="banggongimg"
                alt=""
              />
              <img
                src="../../../assets/yirenzheng_icon@2x.png"
                class="banggongimg"
                alt=""
              />
            </div>
            <div class="tiezibto flexone"></div>
          </div>
        </div>
        <div class="tiezicontent">
          <div class="teizicontenttop flextwo">
            <div class="tiezicontentname">滚滚长江东逝水</div>
            <img
              src="../../../assets/xingxing_icon@2x.png"
              alt=""
              class="starimg"
            />
            <img
              src="../../../assets/weishoucang_icon@2x.png"
              alt=""
              class="starimg"
            />
          </div>
          <div class="tieziwordbox">滚滚长江东逝水</div>
          <div class="teiziimgbox flexone">
            <div class="tieziimgimg">
              <img src="../../../assets/banner.png" alt="" />
            </div>
            <div class="tieziimgimg">
              <img src="../../../assets/banner.png" alt="" />
            </div>
            <div class="tieziimgimg">
              <img src="../../../assets/banner.png" alt="" />
            </div>
            <div class="tieziimgimg">
              <img src="../../../assets/banner.png" alt="" />
            </div>
            <div class="tieziimgimg">
              <img src="../../../assets/banner.png" alt="" />
            </div>
          </div>
          <div class="tiezipingbot">
            <div class="teizipingitem flexone">
              <img
                src="../../../assets/pinglun_icon@2x.png"
                alt=""
                class="lunimg"
              />
              1005
            </div>
            <div class="teizipingitem flexone">
              <img
                src="../../../assets/zan_icon@2x.png"
                alt=""
                class="lunimg zanimg"
              />
              1005
            </div>
            <div class="teizipingitem flexone">
              <img
                src="../../../assets/cai_icon@2x.png"
                alt=""
                class="lunimg zanimg"
              />
              1005
            </div>
          </div>
        </div>
      </div> -->
    </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);
        });
    },
    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>