<template>
  <div class="container">
    <div class="flextwo mykind">
      <div
        class="fenleiword"
        :class="fenlei == 0 ? 'fenleiactive' : ''"
        @click="getfen(0)"
      >
        我的发布
      </div>
      <div
        class="fenleiword"
        :class="fenlei == 1 ? 'fenleiactive' : ''"
        @click="getfen(1)"
      >
        我的关注
      </div>
      <div
        class="fenleiword"
        :class="fenlei == 2 ? 'fenleiactive' : ''"
        @click="getfen(2)"
      >
        我的点赞
      </div>
      <div
        class="fenleiword"
        :class="fenlei == 3 ? 'fenleiactive' : ''"
        @click="getfen(3)"
      >
        我的评论
      </div>
    </div>
    <div class="nodata" v-if="tiezilist.length == 0">暂无数据</div>
    <div class="mycollectlist" v-else>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <mytiezi :tiezilist="tiezilist" :showpull="showpull" :fenlei="fenlei" />
      </van-list>
      <!-- <div class="tieziitem mycollectitem">
        <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 mytiezi from "@/components/mytiezi.vue";
export default {
  components: {
    mytiezi
  },
  data() {
    return {
      page: 1,
      tiezilist: [],
      showpull: true,
      loading: false,
      finished: false,
      fenlei: 0,
      tiezilist: []
    };
  },
  created() {
    this.fenlei = this.$route.query.type;
    if (this.fenlei == 0) {
      this.getfabu();
    } else if (this.fenlei == 1) {
      this.getguanzhu();
    } else if (this.fenlei == 2) {
      this.getdainzian();
    } else if (this.fenlei == 3) {
      this.getpinglun();
    }
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        let newpage = this.page;
        newpage++;
        this.page = newpage;
        if (this.fenlei == 0) {
          this.getfabu();
        } else if (this.fenlei == 1) {
          this.getguanzhu();
        } else if (this.fenlei == 2) {
          this.getdainzian();
        } else if (this.fenlei == 3) {
          this.getpinglun();
        }
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.showpull == false) {
          this.finished = true;
        }
      }, 1000);
    },
    // 头部切换
    getfen(id) {
      this.fenlei = id;
      this.page = 1;
      this.tiezilist = [];
      if (this.fenlei == 0) {
        this.getfabu();
      } else if (this.fenlei == 1) {
        this.getguanzhu();
      } else if (this.fenlei == 2) {
        this.getdainzian();
      } else if (this.fenlei == 3) {
        this.getpinglun();
      }
    },
    // 获取我的发布
    getfabu() {
      let that = this;
      var url = "/api/forum/get_my_forum";
      var params = {
        page: that.page,
        pageNum: 10
      };
      console.log("参数", params);
      that.$axios
        .post(url, params)
        .then(res => {
          console.log(res);
          that.tiezilist = that.tiezilist.concat(res.data);
          if (that.page > 1) {
            if (res.data.length == 0) {
              that.showpull = false;
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取我的关注
    getguanzhu() {
      let that = this;
      var url = "/api/forum/get_my_forum_attention";
      var params = {
        page: that.page,
        pageNum: 10
      };
      console.log("参数", params);
      that.$axios
        .post(url, params)
        .then(res => {
          console.log(res);
          that.tiezilist = that.tiezilist.concat(res.data);
          if (that.page > 1) {
            if (res.data.length == 0) {
              that.showpull = false;
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 获取论我的点赞
    getdainzian() {
      let that = this;
      var url = "/api/forum/get_my_forum_praise";
      var params = {
        page: that.page,
        pageNum: 10
      };
      console.log("参数", params);
      that.$axios
        .post(url, params)
        .then(res => {
          console.log(res);
          that.tiezilist = that.tiezilist.concat(res.data);
          if (that.page > 1) {
            if (res.data.length == 0) {
              that.showpull = false;
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //  获取我的评论
    getpinglun() {
      let that = this;
      var url = "/api/forum/get_my_forum_comments";
      var params = {
        page: that.page,
        pageNum: 10
      };
      console.log("参数", params);
      that.$axios
        .post(url, params)
        .then(res => {
          console.log(res);
          that.tiezilist = that.tiezilist.concat(res.data);
          if (that.page > 1) {
            if (res.data.length == 0) {
              that.showpull = false;
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style scoped>
@import "../../style/homepage.css";
.mycollectlist {
  margin-top: 1rem;
}
.nodata {
  color: #999;
  font-size: 0.28rem;
  text-align: center;
  margin-top: 1.5rem;
}
</style>