<template>
  <div class="container">
    <div class="coursenav flexone">
      <div
        class="coursenavleft"
        :class="selnav == index ? 'selactive' : ''"
        @click="selectnav(item.id,index)"
        v-for="(item, index) in navarr"
        :key="index"
      >{{ item.sort_name }}</div>
    </div>
    <div class="societybox">
      <div class="nodata" v-if="sortlist.length==0">暂无数据</div>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" v-else>
        <div class="societyitem" v-for="item in sortlist" :key="item.id">
          <div class="societytop flextwo">
            <div class="societyleft flexone">
              <div class="personimg">
                <img :src="item.user.avatar" alt />
              </div>
              <div class="personright">
                <div class="personname">{{item.user.nickname}}</div>
                <div class="persondate">{{item.createtime}}</div>
              </div>
            </div>
            <div class="dingimg" v-if="item.is_top==1">
              <img src="../../../assets/ding.png" alt />
            </div>
          </div>
          <div class="societytext">{{item.description}}</div>
          <div class="societyimg flexone" v-if="item.images_arr.length!=0">
            <div class="societyimgitem" v-for="item in item.images_arr" :key="item">
              <img src="../../../assets/societyimg.png" alt />
            </div>
          </div>
          <div class="jianzheng flexone">
            <div class="jianzhengleft">#</div>
            <div class="jianzhengright">见证蜕变</div>
          </div>
          <!-- 点赞 -->
          <div class="dainzan flexone">
            <div class="flexone dianitem">
              <img src="../../../assets/zan.png" alt class="dianzanimg" />
              <span class="number">960</span>
            </div>
            <div class="flexone dianitem">
              <img src="../../../assets/star.png" alt class="dianzanimg" />
              <span class="number">960</span>
            </div>
            <div class="flexone dianitem">
              <img src="../../../assets/edit.png" alt class="dianzanimg" />
              <span class="number">960</span>
            </div>
            <div class="flexone dianitem">
              <img src="../../../assets/download.png" alt class="dianzanimg" />
              <span class="number">960</span>
            </div>
          </div>
        </div>
      </van-list>
    </div>

    <!-- 图片没有上传 -->
    <div class="gantanimg" v-if="nophoto">
      <img src="../../../assets/gantan.png" class="ganimg" alt />
      <div class="gantantext">用户未上传图片</div>
    </div>

    <!-- 添加 -->
    <div class="addimg" @click="publish">
      <img src="../../../assets/add.png" alt />
    </div>
    <tabBar v-bind:active="1" />
  </div>
</template>

<script>
import tabBar from "@/components/views/tabBar.vue";
import Vue from 'vue';
import { List } from 'vant';

Vue.use(List);
export default {
  components: {
    tabBar
  },
  data() {
    return {
      selnav: 0,
      navarr: [],
      sort_id: '',
      nophoto: false,
      sortlist: [],
      loading: false,
      finished: false,
      page: 1,
      this_page: '',
      total_page: ''
    };
  },
  created() {
    this.getsort()
  },
  methods: {
    onLoad() {
      let that = this;
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        // for (let i = 0; i < 10; i++) {
        //   this.list.push(this.list.length + 1);
        // }
        let newpage = that.page;
        newpage++;
        that.page = newpage;
        that.getsocidtylist()
        // 加载状态结束
        that.loading = false;
        // 数据全部加载完成
        if (that.total_page == that.this_page) {
          that.finished = true;
        }
      }, 1000);
    },

    selectnav(id, index) {
      let that = this;

      this.selnav = index;
      this.sort_id = id
      that.page = 1;
      that.sortlist = [];
      that.getsocidtylist()
    },
    publish() {
      this.$router.push({
        path: "/publish",
        // query: { testId: item.test_student_id }
      });
    },
    // 获取分类列表
    getsort() {
      let that = this;
      var url = "/api/social/sort";
      let param = {

      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          that.navarr = res.data
          that.sort_id = res.data[0].id

        })
        .catch(function (err) {
          console.log(err);
        });
    },
    // 获取社区列表
    getsocidtylist() {
      let that = this;
      var url = "/api/social/social_list";
      let param = {
        sort_id: that.sort_id,
        page: that.page
      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          that.sortlist = that.sortlist.concat(res.data.social)
          that.this_page = res.data.this_page;
          that.total_page = res.data.total_page

        })
        .catch(function (err) {
          console.log(err);
        });
    }
  }
};
</script>

<style scoped>
@import "../../../style/society.css";
.societybox {
  margin-bottom: 1.2rem;
}
</style>