<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>
                <div class="tieziming">{{ item.user.nickname }}</div>
                <div class="tiezifen">30分钟</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">
                  面坊转让
                </div>
              </div>
              <img
                src="../assets/banggong_icon@2x.png"
                class="banggongimg"
                alt=""
              />
              <img
                src="../assets/peisong_icon@2x.png"
                class="banggongimg"
                alt=""
              />
              <img
                src="../assets/yirenzheng_icon@2x.png"
                class="banggongimg"
                alt=""
              />
            </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"
                />
                <img
                  src="../assets/weishoucang_icon@2x.png"
                  alt=""
                  class="starimg"
                /> -->
          </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/cai_icon@2x.png"
                alt=""
                class="lunimg zanimg"
              />
              1005
            </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);
        });
    },

    // 点赞和取消点赞
    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>