<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, index) in sortlist" :key="index">
          <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, indexk) in item.images_arr"
              :key="indexk"
              @click="previewimg(index, indexk)"
            >
              <img :src="item" alt />
            </div>
          </div>
          <div class="jianzhengtui flexone">
            <div
              class="jianzheng flexone"
              v-for="(item, index) in item.tags"
              :key="index"
            >
              <div class="jianzhengleft" :style="{ background: item.color }">
                #
              </div>
              <div class="jianzhengright" :style="{ color: item.color }">
                {{ item.name }}
              </div>
            </div>
          </div>

          <!-- 点赞 -->
          <div class="dainzan flexone">
            <div class="flexone dianitem" @click="zanclick(index, item)">
              <img
                src="../../../assets/diankong.png"
                alt
                class="dianzanimg"
                v-if="item.is_good == 0"
              />
              <img
                src="../../../assets/zan.png"
                alt
                class="dianzanimg"
                v-else
              />
              <span class="number">{{ item.good_count }}</span>
            </div>
            <div class="flexone dianitem" @click="collect(index, item)">
              <img
                src="../../../assets/starkong.png"
                alt
                class="dianzanimg"
                v-if="item.is_favorite == 0"
              />
              <img
                src="../../../assets/star.png"
                alt
                class="dianzanimg"
                v-else
              />

              <span class="number">{{ item.favorite_count }}</span>
            </div>
            <div class="flexone dianitem" @click="copytext">
              <img src="../../../assets/edit.png" alt class="dianzanimg" />
              <!-- <span class="number">复制文本</span> -->
              <span
                class="number"
                v-clipboard:copy="item.description"
                v-clipboard:success="onCopy"
                >复制</span
              >
              <!-- v-clipboard:error="onError" -->
            </div>
            <div class="flexone dianitem" @click="save(item)">
              <img src="../../../assets/download.png" alt class="dianzanimg" />
              <span class="number">一键保存</span>
            </div>
          </div>
        </div>
      </van-list>
    </div>

    <!-- 图片没有上传 -->
    <div class="gantanimg" v-if="nophoto" @click="nophotoup">
      <img src="../../../assets/gantan.png" class="ganimg" alt />
      <div class="gantantext">用户未上传图片</div>
    </div>
    <!-- 预览图片 -->
    <van-image-preview
      v-model="show"
      :images="images"
      @change="onChange"
      :startPosition="startPosition"
    >
      <template v-slot:index>第{{ index + 1 }}页</template>
    </van-image-preview>
    <!-- 添加 -->
    <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, Toast, ImagePreview } from "vant";
Vue.use(ImagePreview);

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: "",
      show: false,
      index: 0,
      images: [],
      startPosition: 0
    };
  },
  created() {
    this.getsort();
  },
  methods: {
    save(item) {
      this.images = item.images_arr;
      if (this.images.length == 0) {
        this.nophoto = true;
      } else {
        this.index = 0;
        this.show = true;
      }
    },
    previewimg(index, indexk) {
      console.log(index, indexk);
      this.index = indexk;
      this.images = this.sortlist[index].images_arr;
      this.show = true;
      this.startPosition = indexk;
    },
    nophotoup() {
      this.nophoto = false;
    },
    // 图片预览
    onChange(index) {
      this.index = index;
    },
    onCopy(e) {
      Toast("复制成功");
    },
    onLoad() {
      let that = this;
      console.log(888);
      // if (that.page = 1) {
      //   that.loading = false
      //   that.finished = false
      // }
      // 异步更新数据
      // 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);
    },
    // 收藏
    collect(index, item) {
      let that = this;
      var url = "/api/user/favorite";
      let param = {
        type: 3,
        favorite_id: item.id
      };

      that.$axios
        .post(url, param)
        .then(function(res) {
          console.log(res);
          if (item.is_favorite == 0) {
            item.is_favorite = 1;
            that.sortlist[index].is_favorite = 1;
            that.sortlist[index].favorite_count =
              that.sortlist[index].favorite_count + 1;
            Toast("收藏成功");
          } else if (item.is_favorite == 1) {
            item.is_favorite = 1;
            Toast("取消收藏成功");
            that.sortlist[index].is_favorite = 0;
            that.sortlist[index].favorite_count =
              that.sortlist[index].favorite_count - 1;
          }
          that.sortlist = that.sortlist;
          that.$forceUpdate();
        })
        .catch(function(err) {
          console.log(err);
        });
    },

    zanclick(index, item) {
      let that = this;
      console.log(item.id);
      var url = "/api/user/good";
      let param = {
        type: 1,
        good_id: item.id
      };

      that.$axios
        .post(url, param)
        .then(function(res) {
          console.log(res);
          if (item.is_good == 0) {
            item.is_good = 1;
            that.sortlist[index].is_good = 1;
            that.sortlist[index].good_count =
              that.sortlist[index].good_count + 1;
            Toast("点赞成功");
          } else if (item.is_good == 1) {
            item.is_good = 1;
            Toast("取消点赞成功");
            that.sortlist[index].is_good = 0;
            that.sortlist[index].good_count =
              that.sortlist[index].good_count - 1;
          }
          that.sortlist = that.sortlist;
          that.$forceUpdate();
        })
        .catch(function(err) {
          console.log(err);
        });
    },

    // 复制文本
    copytext() {},

    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;
          that.getsocidtylist();
        })
        .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>