<template>
  <div>
    <div class="tiezhlist">
      <div
        class="tieziitem"
        v-for="(item, index) in tiezilist"
        :key="index"
        @click="luntandetail(item)"
      >
        <div class="tiezitop flexone">
          <div class="tieziimg">
            <img :src="item.user.avatar" alt="" />
          </div>
          <div class="tieziright">
            <div class="tiezirighttop flex">
              <div style="margin-right:0.2rem">
                <div class="tieziming">{{ item.user.nickname }}</div>
                <div class="tiezifen">{{item.createtime}}</div>
              </div>

              <div>
                <div class="vipimg" v-if="item.forum_type == 1">
                  <img src="../assets/vip_icon@2x.png" alt="" />
                  <div class="vipname">{{ item.user.level.name1 }}</div>
                </div>
                <div class="tiezizhuan" v-for="(item,index) in item.user.label" :key="index" >{{item.name_label}}</div>
              </div>
              <div class="flex" v-if="item.user.label!='[]'">
                     <img  
                    :src="itemk.logo_image"
                    class="banggongimg"
                    alt=""
                    v-for="(itemk, index) in item.user.label"
                    :key="index"
                   
                  />
              </div>
              <img
                src="../assets/yirenzheng_icon@2x.png"
                class="banggongimg"
                alt=""
                v-if="item.is_card == 1"
              />
            </div>
            <div class="tiezibto flexone"></div>
          </div>
        </div>
        <div class="tiezicontent">
          <div class="teizicontenttop flextwo">
            <div class="tiezicontentname">{{ item.title }}</div>
            <img
                  src="../assets/xingxing_icon@2x.png"
                  alt=""
                  class="starimg"
                  v-if="item.is_collect==1"
                  @click.stop="collect(index,item.id)"
                />
                <img
                  src="../assets/weishoucang_icon@2x.png"
                  alt=""
                  class="starimg"
                   @click.stop="collect(index,item.id)"
                  v-else
                />
          </div>
          <div class="tieziwordbox" v-html="item.content"></div>

          <div
            class="teiziimgbox flexone"
            v-if="item.video != null"
            @click.stop="govideo(item.video)"
          >
            <div class="videoimg">
              <img :src="item.video_image" alt="" />
              <img src="../assets/bofang_icon@2x.png" alt="" class="videobtn" />
            </div>
          </div>
          <div class="teiziimgbox flexone" v-if="item.images != null">
            <div
              class="tieziimgimg"
              v-for="(item, indexk) in item.images"
              :key="indexk"
              @click.stop="previewimg(index, indexk, item)"
            >
              <img :src="item" alt="" />
            </div>
          </div>
          <div class="tiezipingbot">
            <div class="teizipingitem flexone" v-if="item.comment != 0">
              <img src="../assets/pinglun_icon@2x.png" alt="" class="lunimg" />
              {{ item.comment }}
            </div>
            <div
              class="teizipingitem flexone"
              @click.stop="praisedian(item, index)"
            >
              <img
                src="../assets/zan_icon@2x.png"
                alt=""
                class="lunimg zanimg"
                v-if="item.is_praise == 1"
              />
              <img
                src="../assets/nodianzan.png"
                alt=""
                class="lunimg zanimg"
                v-if="item.is_praise == 2"
              />
              {{ item.praise }}
            </div>
            <div class="teizipingitem flexone">
              <img
                src="../assets/number.png"
                alt=""
                class="lunimg zanimg"
              />
              {{item.view}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import wx from "weixin-js-sdk";
import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);
export default {
  props: ["tiezilist", "showpull"],
  dta() {
    return {
      tiezilist: []
    };
  },
  created() {
    this.getappid();
  },
  methods: {
    // 获取appid
    getappid() {
      let that = this;
      console.log(34734894890);
      let urlk = window.location.href;
      var url = "/api/user/get_jssdk";
      let param = {
        url: urlk
      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res, "jssdkjsskd");
          wx.config({
            debug: false,
            appId: res.data.appId, // 和获取Ticke的必须一样------必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名，见附录1
            //需要分享的列表项:发送给朋友，分享到朋友圈，分享到QQ，分享到QQ空间
            jsApiList: ["previewImage"]
          });
        })
        .catch(function (err) {
          console.log(err);
        });
    },
 // 收藏和取消收藏
    collect(index,id){
      let that = this;
      var url = "/api/forum/collect";
      var params = {
        forum_id: id
      };
      console.log("7766554", params);
      that.$axios
        .post(url, params)
        .then(res => {
          let newtiezilist=that.tiezilist;
          if( newtiezilist[index].is_collect==2){
              newtiezilist[index].is_collect=1;
              Toast("收藏成功")
          }else{
            newtiezilist[index].is_collect=2;
              Toast("取消收藏成功")
          }
         
          that.tiezilist=newtiezilist;
          that.$forceUpdate()
          that.bannertop = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
   
   
    // 点赞和取消点赞
    praisedian(item, index) {
      let that = this;
      if (that.tiezilist[index].is_praise == 2) {
        Toast("点赞成功");
        that.tiezilist[index].is_praise = 1;
        that.tiezilist[index].praise = that.tiezilist[index].praise + 1;
      } else {
        Toast("取消点赞成功");
        that.tiezilist[index].is_praise = 2;
        that.tiezilist[index].praise = that.tiezilist[index].praise - 1;
      }

      that.tiezilist = that.tiezilist;

      var url = "/api/forum/praise";
      var params = {
        forum_id: item.id
      };
      console.log("参数", params);
      that.$axios
        .post(url, params)
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 论坛详情
    luntandetail(item) {
      this.$router.push({
        path: "/tiezidetail",
        query: { id: item.id }
      });
    },
    // 进入video
    govideo(src) {
      console.log(src);
      this.$router.push({
        path: "/videoplay",
        query: { url: src }
      });
    },
    // 预览图片
    previewimg(index, indexk, item) {
      wx.previewImage({
        current: item, // 当前显示图片的http链接
        urls: this.tiezilist[index].images // 需要预览的图片http链接列表
      });
    }
  }
};
</script>
<style scoped>
@import "./style/homepage.css";
</style>