<template>
  <div class="container">
    <div class="tiezhlist tiezhlistbox">
      <div class="tieziitem">
        <div class="tiezitop flexone" >
          <div class="tieziimg" @click="personclick">
            <img :src="tiezidetail.user.avatar" alt="" />
          </div>
          <div class="tieziright">
            <div class="tiezirighttop flex">
              <div>
                <div class="tieziming">{{ tiezidetail.user.nickname }}</div>
              </div>
              <div v-if="tiezidetail.user.level">
                <div class="vipimg" style="margin-left:0.2rem">
                  <img
                    src="../../../assets/vip_icon@2x.png"
                    alt=""
                    v-if="tiezidetail.forum_type == 1"
                  />
                  <div class="vipname">{{ tiezidetail.user.level.name1 }}</div>
                </div>
              </div>
               <img
                :src="item"
                class="banggongimg"
                alt=""
                v-for="(item, index) in tiezidetail.user.label"
                :key="index"
              />
              <img
                src="../../../assets/yirenzheng_icon@2x.png"
                class="banggongimg"
                alt=""
                v-if="tiezidetail.is_card == 1"
              />
            </div>
            <div class="tiezibto flexone"></div>
          </div>
        </div>
        <div class="tiezicontent">
          <div class="flexone">
            <div class="tiezifen">{{tiezidetail.createtime}}</div>
             <div class="tiezizhuan tiezhuanbox" v-for="(item,index) in tiezidetail.user.label" :key="index" >{{item.name_label}}</div>
            
          </div>

          <div class="teizicontenttop flextwo">
            <div class="tiezicontentname">{{ tiezidetail.title }}</div>
            <img
              src="../../../assets/xingxing_icon@2x.png"
              alt=""
              class="starimg"
              v-if="tiezidetail.is_collect==1"
              @click="collect"
            />
            <img
              src="../../../assets/weishoucang_icon@2x.png"
              alt=""
              class="starimg"
               @click="collect"
              v-else
            />
          </div>
          <div class="tieziwordbox" v-if="tiezidetail.type==1">{{ tiezidetail.content}}</div>
           <div class="tieziwordbox" v-html="tiezidetail.content" v-else></div>
          <div
            class="teiziimgbox flexone"
            v-if="tiezidetail.video != null"
            @click="govideo(tiezidetail.video)"
          >
            <div class="videoimg">
              <img :src="tiezidetail.video_image" alt="" />
              <img
                src="../../../assets/bofang_icon@2x.png"
                alt=""
                class="videobtn"
              />
            </div>
          </div>

          <div class="teiziimgbox flexone" v-if="tiezidetail.images != null">
            <div
              class="tieziimgimg"
              v-for="(item, indexk) in tiezidetail.images"
              :key="indexk"
              @click.stop="previewimg(index, indexk, item)"
            >
              <img :src="item" alt="" />
            </div>
          </div>
          <div class="tiezipingbot">
            <div class="teizipingitem flexone">
              <img
                src="../../../assets/pinglun_icon@2x.png"
                alt=""
                class="lunimg"
              />
              {{ tiezidetail.comment }}
            </div>
            <div class="teizipingitem flexone" @click="tiezizan">
              <img
                src="../../../assets/zan_icon@2x.png"
                alt=""
                class="lunimg zanimg"
                v-if="tiezidetail.is_praise == 1"
              />
              <img
                src="../../../assets/nodianzan.png"
                alt=""
                class="lunimg zanimg"
                v-if="tiezidetail.is_praise == 2"
              />
              {{ tiezidetail.praise }}
            </div>
            <div class="teizipingitem flexone">
              <img
                src="../../../assets/number.png"
                alt=""
                class="lunimg zanimg"
              />
              {{tiezidetail.view}}
            </div>
          </div>
        </div>
      </div>
      <!-- 全部评论 -->
      <div class="allcomentbox">
        <div class="commentname">全部评论</div>

        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            class="tieziitem"
            v-for="(item, index) in commentlist"
            :key="index"
          >
            <div class="tiezitop flexone">
              <div class="tieziimg">
                <img :src="item.user.avatar" alt="" />
              </div>
              <div class="tieziright flextwo">
                <div class="tiezirighttop flextwo">
                  <div class="flexone">
<div>
                    <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 style="margni-left:0.1rem">
                      
                   <div class="tiezizhuan tiezhuanbox" v-for="(item,index) in tiezidetail.user.label" :key="index" >{{item.name_label}}</div>

                    </div>
                  </div>
                  
                  </div>
                   <img
              src="../../../assets/xingxing_icon@2x.png"
              alt=""
              class="starimg"
              v-if="tiezidetail.is_collect==1"
              @click="collect"
            />
            <img
              src="../../../assets/weishoucang_icon@2x.png"
              alt=""
              class="starimg"
               @click="collect"
              v-else
            />
                </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="tiezipingbot">
                <div
                  class="teizipingitem flexone"
                  @click="dianzan(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>
            </div>
          </div>
        </van-list>
      </div>

      <div class="commentboxfix flexone">
        <div class="writebox">
          <input type="text" placeholder="写点什么..." v-model="comment" />
        </div>
        <div class="fasend" @click="sendcomment">发送</div>
      </div>
    </div>
  </div>
</template>

<script>
import wx from "weixin-js-sdk";
import { Toast } from "vant";
import {text} from "../../../utils/base.js"
export default {
  data() {
    return {
      tiezisel: 1,
      forum_id: "",
      tiezidetail: "",
      page: 1,
      loading: false,
      finished: false,
      showpull: true,
      commentlist: [],
      // 发送评论
      comment: "",
      user: "",//用户信息
      baseurl:''
    };
  },
  created() {
    this.baseurl = "http://" + location.host;
    document.title = "帖子详情";
    this.forum_id = this.$route.query.id;
    console.log(this.forum_id);
    // 获取帖子详情
    this.getformdetail();
    // 获取评论列表
    this.getcommentlist();
  
  },
   beforeRouteEnter(to, from, next) {
    var u = navigator.userAgent;
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    // XXX: 修复iOS版微信HTML5 History兼容性问题
    if (isiOS && to.path !== location.pathname) {
      // 此处不可使用location.replace
      location.assign(to.fullPath);
    } else {
      next();
    }
  },
  methods: {
    seltiekind(id) {
      this.tiezisel = id;
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        let newpage = this.page;
        newpage++;
        this.page = newpage;
        this.getcommentlist();
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.showpull == false) {
          this.finished = true;
        }
      }, 1000);
    },
     // 获取appid
    getappid() {
      let that = this;
      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, "hahahahaiaioaioaio4");
          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: [
              "showOptionMenu",
              "updateAppMessageShareData",
              "updateTimelineShareData"
            ]
          });
          
          that.sharetofriend();
        })
        .catch(function (err) {
          console.log(err);
        });
    },

    // 分享给朋友
    sharetofriend() {
      var that = this;
      localStorage.setItem("type", "");
      // 处理验证失败的信息
      wx.error(function (res) {
        logUtil.printLog("验证失败返回的信息:", res);
      });
      // 处理验证成功的信息
      wx.ready(function () {
        //       alert(window.location.href.split('#')[0]);
        // var share_title = that.sharemsg.title;
        // if (share_title.indexOf("${title}") >= 0) {
        //   share_title = share_title.replace(
        //     "${title}",
        //     that.details.details.title
        //   );
        // }
        // var share_desc = that.sharemsg.content;
        // if (share_desc.indexOf("${title}") >= 0) {
        //   share_desc = share_desc.replace(
        //     "${title}",
        //     that.details.details.title
        //   );
        // }
        // if (share_desc.indexOf("${text}") >= 0) {
        //   share_desc = share_desc.replace("${text}", that.details.details.text);
        // }
        // 分享到朋友圈
        wx.updateTimelineShareData({
          title: "中国面条", // 分享标题
          desc:that.tiezidetail.title,
          link: 
            that.baseurl +
            "/redirect.html?shareRedirect=" +
            encodeURIComponent(window.location.href), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl:
            "https://app.chinesenooddles.com/uploads/20201026/9d7ab1da16673a04e56215f8faf1fc47.png",

          // imgUrl: that.details.details.img
          //   ? that.details.details.img
          //   : that.sharemsg.img,

          // 分享图标
          //  desc: that.sharemsg.content,
          success: function (res) {
            // 用户确认分享后执行的回调函数
            console.log("suss");
            logUtil.printLog("分享到朋友圈成功返回的信息为:", res);
            that.showMsg("分享成功!");
          },
          cancel: function (res) {
            // 用户取消分享后执行的回调函数
            console.log("err");
            logUtil.printLog("取消分享到朋友圈返回的信息为:", res);
          }
        }),
          // 分享给朋友
          wx.updateAppMessageShareData({
            title: "中国面条", // 分享标题
            desc: that.tiezidetail.title, // 分享描述
            link:
              that.baseurl +
              "/redirect.html?shareRedirect=" +
              encodeURIComponent(window.location.href), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl:
              "https://app.chinesenooddles.com/uploads/20201026/9d7ab1da16673a04e56215f8faf1fc47.png",

            // imgUrl: that.details.details.img
            //   ? that.details.details.img
            //   : that.sharemsg.img,
            // 分享图标
            type: "", // 分享类型,music、video或link，不填默认为link
            dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
            success: function (res) {
              // 用户确认分享后执行的回调函数
              // logUtil.printLog("分享给朋友成功返回的信息为:", res);
            },
            cancel: function (res) {
              // 用户取消分享后执行的回调函数
              // logUtil.printLog("取消分享给朋友返回的信息为:", res);
            }
          });
      });
    },



    

    // 获取帖子详情
    getformdetail() {
      let that = this;
      var url = "/api/forum/get_forum_detail";
      var params = {
        forum_id: that.forum_id
      };
      console.log("参数", params);
      that.$axios
        .post(url, params)
        .then(res => {
          console.log("111111111", res);
          setTimeout(function() {
            that.tiezidetail = res.data;
            if(that.tiezidetail.type==2){
              that.tiezidetail.content=text(that.tiezidetail.content)
            }
            that.tiezidetail=that.tiezidetail;
            that.$forceUpdate()
            that.user = res.data.user;
            that.getappid()
          }, 200);
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 收藏和取消收藏
      collect(){
      let that = this;
      var url = "/api/forum/collect";
      var params = {
        forum_id: that.forum_id
      };
      console.log("7766554", params);
      that.$axios
        .post(url, params)
        .then(res => {
          let newtiezidetail=that.tiezidetail;
          if(newtiezidetail.is_collect==2){
            newtiezidetail.is_collect=1;
            Toast("收藏成功")
          }else{
             newtiezidetail.is_collect=2;
             Toast("取消收藏成功")
          }
          that.tiezidetail=newtiezidetail;
        })
        .catch(err => {
          console.log(err);
        });
    },
   
   
    // 帖子详情点赞
    tiezizan() {
      let that = this;
      if (that.tiezidetail.is_praise == 2) {
        that.tiezidetail.is_praise = 1;
        that.tiezidetail.praise = that.tiezidetail.praise + 1;

        Toast("点赞成功");
      } else {
        that.tiezidetail.is_praise = 2;
        that.tiezidetail.praise = that.tiezidetail.praise - 1;

        Toast("取消点赞成功");
      }

      that.tiezidetail = that.tiezidetail;
      var url = "/api/forum/praise";
      var params = {
        forum_id: that.forum_id
      };
      console.log("参数", params);
      that.$axios
        .post(url, params)
        .then(res => {})
        .catch(err => {
          console.log(err);
        });
    },

    // 获取评论列表
    getcommentlist() {
      let that = this;
      var url = "/api/comments/get_comments";
      var params = {
        forum_id: that.forum_id,
        page: that.page,
        pageNum: 10
      };
      console.log("参数", params);
      that.$axios
        .post(url, params)
        .then(res => {
          console.log(res, "评论列表", this.commentlist);
          this.commentlist = this.commentlist.concat(res.data);
          if (that.page > 1) {
            if (res.data.length == 0) {
              that.showpull = false;
            }
          }
          console.log(this.commentlist);
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 发送评论
    sendcomment() {
      let that = this;
      if (that.comment == "") {
        Toast("请输入评论内容");
        return false;
      }
      var url = "/api/comments/publish_comments";
      var params = {
        forum_id: that.forum_id,
        content: that.comment
      };
      console.log("参数", params);
      that.$axios
        .post(url, params)
        .then(res => {
          console.log(res);
          Toast("评论成功");

          that.comment = "";
          that.page = 1;
          that.commentlist = [];
          that.getcommentlist();
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 评论列表点赞
    dianzan(item, index) {
      let that = this;
      console.log(item, index);
      if (this.commentlist[index].is_praise == 2) {
        Toast("点赞成功");
        this.commentlist[index].is_praise = 1;
        this.commentlist[index].praise = this.commentlist[index].praise + 1;
      } else {
        this.commentlist[index].is_praise = 2;
        this.commentlist[index].praise = this.commentlist[index].praise - 1;
        Toast("取消点赞成功");
      }
      this.commentlist = this.commentlist;

      var url = "/api/comments/praise";
      var params = {
        comments_id: item.id
      };
      console.log("参数", params);
      that.$axios
        .post(url, params)
        .then(res => {})
        .catch(err => {
          console.log(err);
        });
    },
    govideo(src) {
      this.$router.push({
        path: "/videoplay",
        query: { url: src }
      });
    },
    personclick() {
      console.log(this.tiezidetail)
      this.$router.push({
        path: "/personpage",
        query: {
          type: 3,
          userid: this.tiezidetail.user_id
        }
      });
    }
  }
};
</script>

<style scoped>
@import "../../style/homepage.css";
.tiezhlistbox {
  margin-top: 0.24rem;
}
.tieziright,.tiezirighttop {
  flex:1
}

</style>