<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" :show="show"/>
      </van-list>
    
    </div>
  </div>
</template>

<script>
import mytiezi from "@/components/mytiezi.vue";
import {richTextFormat} from "../../../utils/base.js" //富文本超出显示省略号
export default {
  components: {
    mytiezi
  },
  data() {
    return {
      page: 1,
      tiezilist: [],
      showpull: true,
      loading: false,
      finished: false,
      fenlei: 0,
      show:false
      
    };
  },
  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;
            }
          }
           that.tiezilist.forEach(function(value,index,array){
              value.content=richTextFormat(value.content)
          })
          that.tiezilist=that.tiezilist;
          that.$forceUpdate()
        })
        .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;
            }
          }
          setTimeout(function(){
            that.show=true
          },200)
          console.log('帖子列表',that.tiezilist)
        })
        .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;
            }
          }
           that.tiezilist.forEach(function(value,index,array){
              value.content=richTextFormat(value.content)
          })
          that.tiezilist=that.tiezilist;
          that.$forceUpdate()
        })
        .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;
            }
          }
           that.tiezilist.forEach(function(value,index,array){
              value.content=richTextFormat(value.content)
          })
          that.tiezilist=that.tiezilist;
          that.$forceUpdate()
        })
        .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>