<template>
  <div class="container">
    <div class="minetopkkk">
      <div class="minetophezi tiezibox flextwo">
        <div
          class="xiaoxiitem flexfour"
          :class="seltie == 1 ? 'seltieactive' : ''"
          @click="selxiao(1)"
        >
          <img
            src="../../../assets/tiezi_icon@2x.png"
            alt=""
            class="teiziimg"
          />
          帖子回复
        </div>
        <div
          class="xiaoxiitem flexfour"
          :class="seltie == 2 ? 'seltieactive' : ''"
          @click="selxiao(2)"
        >
          <img
            src="../../../assets/xitong_icon@2x.png"
            alt=""
            class="teiziimg"
          />
          <div class="dot" v-if="bublenumber!=0">{{bublenumber}}</div>
          系统通知
        </div>
      </div>
    </div>
    <div v-if="newslist.length==0" class="nodatakk">暂无数据</div>

    <div class="tieziboxlist" v-else>
       <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
      <div class="tieziboxitem flex" v-for="(item,index) in newslist" :key="index" @click="tiezidetail(item)">
        <img :src="item.user.avatar" alt="" class="xiaoimg" />
        <div class="tieziboxmiddle">
          <div class="tieziname flextwo">
            <div class="tietitle">{{item.user.nickname}}</div>
            <div class="tiedate">{{item.createtime}}</div>
          </div>
          <div class="tiezinametext tiezitext">{{item.content}}</div>
        </div>
      </div>
       </van-list>
    </div>
    <tabBar v-bind:active="1" />
  </div>
</template>

<script>
import Vue from "vue";
import tabBar from "@/components/tabsec.vue";
import {List, Toast } from "vant";
Vue.use(List);
Vue.use(Toast)
export default {
  components: {
    tabBar
  },
  data() {
    return {
      seltie: 1,
      newslist:[],
      loading: false,
      finished: false,
      showpull: true,
      page: 1,
      bublenumber:'',
      user:{
          avatar:"",
          nickname:''
      }
    };
  },
  created(){
    // 获取帖子列表
    this.getiezilist()
    // 获取气泡
    this.getbubble();
    // 获取默认昵称和头像
    this.getnickname()
  },
  methods: {
    selxiao(id) {
      this.seltie = id;
      this.page=1;
      this.newslist=[]
      if(this.seltie==1){
        this.getiezilist();
      }else{
        this.getxiaoxi();
      }
    },
      onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        let newpage = this.page;
        newpage++;
        this.page = newpage;
        if(this.seltie==1){
          this.getiezilist()
        }else{
          this.getxiaoxi();
        }
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.showpull == false) {
          this.finished = true;
        }
      }, 1000);
    },
    // 获取默认昵称和头像
    getnickname(){
      let that = this;
      var url = "/api/sundry/get_page";
      var params = {
          id:14
      };
      console.log("7766554", params);
      that.$axios
        .post(url, params)
        .then(res => {
         console.log(res,'默认头像和昵称')
         let newuser=that.user;
         newuser.avatar=res.data.avatar;
         newuser.nickname=res.data.nickname;
         that.user=newuser
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取气泡
    getbubble(){
      let that = this;
      var url = "/api/information/bubble";
      var params = {
        
      };
      console.log("7766554", params);
      that.$axios
        .post(url, params)
        .then(res => {
         console.log(res)
         that.bublenumber=res.data.total
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取消息列表
    getxiaoxi(){
      let that = this;
      var url = "/api/information/get_all";
      var params = {
        page:that.page
      };
      console.log("7766554", params);
      that.$axios
        .post(url, params)
        .then(res => {
        console.log(res)
          that.newslist=that.newslist.concat(res.data);
          if(that.page>1){
            if(res.data.length==0){
              that.showpull=false;
            }
          }
          that.newslist.forEach(function(value,index,array){
              value.user=that.user
          })
          that.newslist=that.newslist;
          that.$forceUpdate();
          console.log('4343980409',that.newslist)
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取帖子
    getiezilist(){
      let that = this;
      var url = "/api/forum/my_forum_comments";
      var params = {
        page:that.page
       
      };
      console.log("7766554", params);
      that.$axios
        .post(url, params)
        .then(res => {
        console.log(res)
          that.newslist=that.newslist.concat(res.data);
          if(that.page>1){
            if(res.data.length==0){
              that.showpull=false;
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 帖子详情
    tiezidetail(item){
      if(this.seltie==2){
        let id=item.id
        this.$router.push({
        path:"/xiaoxidetail",
        query:{
          id:id
        }
      })
      }else{
        let id=item.forum_id
          this.$router.push({
          path: "/tiezidetail",
          query: { id: id }
      });
      }
     
    }
  }
};
</script>

<style scoped>
@import "../../style/homepage.css";
.tiezitext{
  display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.nodatakk{
  color:#333;
  font-size:0.28rem;
  text-align: center;
  margin-top:2.2rem;
}
</style>