<template>
  <div class="container">
    <div class="tiezhlist tiezhlistbox" v-if="tiezishow">
      <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.logo_image"
                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/share.png" alt="" class='shareimg' @click="sharebtn">
            <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" @click.stop="begincomment(item)">
                <img :src="item.user.avatar" alt="" />
              </div>
              <div class="tieziright flextwo">
                <div class="tiezirighttop flextwo">
                  <div class="flexone" @click.stop="begincomment(item)">
<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 class="register" v-if="showcomment">
      <div class="commentwrap">
        <div class="commenttop flextwo">
          <div class="commenttopleft"></div>
          <div class="commenttopmiddle">全部{{child.length}}条评论</div>
          <img src="../../../assets/close.png" alt class="closeimg"  @click="hidecomment"/>
        </div>

        <div class="commentbox">
          <div class="nodata" v-if="child.length == 0">暂无评论</div>
          <div>
            <div class="commentboxitem"  v-for="(item, index) in child"
              :key="index">
              <div class="commentimg">
                <img :src="item.user.avatar" alt />
              </div>
              <div class="commentright">
                <div class="commentnamek">{{item.user.nickname}}</div>

                <div class="commenttext">
               {{item.content}}
                </div>
                <!-- <div class="commenttext">
                  回复
                  <span class="repalayname">4tio4oi</span>
                  skfgsldf
                </div> -->
              </div>
            </div>
          </div>
          <!-- <div class="kanmore flexthree"
          >
            查看更多
            <img src="../../../assets/jianotu.png" alt class="jiantou" />
          </div> -->
        </div>
        <div class="commentbot flextwo">
          <img src="../../../assets/jianpan.png" alt class="jianpan" />
          <div class="entercomment">
            <input type="text" :placeholder="dateinit" v-model="textcomment" />
          </div>
          <div class="fasong" @click="sendtext">发送</div>
        </div>
      </div>
    </div>
     <!-- 分享弹层 -->
    <div class="sharewrap" v-if="shareshow" @click="hidesharek">
      <img src="../../../assets/sharewrapimg.png" alt />
    </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:'',
      showcomment:false,
      textcomment:'',
      dateinit: "请输入",
      tiezishow:false,
      comments_id:"",
      child:[],
      userinfo:'',//用户信息
      shareshow:false
    };
  },
  created() {
    this.baseurl = "http://" + location.host;
    document.title = "帖子详情";
    this.forum_id = this.$route.query.id;
    console.log(this.forum_id);
    // 获取帖子详情
    this.getformdetail();
    // 获取评论列表
    this.getcommentlist();
    // 获取用户信息
    this.getuserinfo()
  
  },
   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: {
    // 弹出分享弹层
    sharebtn(){
      this.shareshow=true
    },
    // 隐藏分享弹层
    hidesharek(){
      this.shareshow=false
    },
     // 获取用户信息
    getuserinfo() {
      let that = this;
      var url = "/api/member/index";
      var params = {};
      console.log("7766554", params);
      that.$axios
        .post(url, params)
        .then(res => {
          that.userinfo = res.data;
          
        })
        .catch(err => { });
    },
    // 开始评论
    begincomment(item){
       console.log(343843,item)
      this.showcomment=true;
      this.dateinit='@'+item.user.nickname;
      this.comments_id=item.id;
      this.child=item.child
    },
    // 发送消息
    sendtext(){
      let that = this;
      if (that.textcomment == "") {
        Toast("请输入评论内容");
        return false;
      }
      var url = "/api/comments/publish_comments";
      var params = {
        forum_id: that.forum_id,
        content: that.textcomment,
        comments_id:that.comments_id
      };
      console.log("参数", params);
      that.$axios
        .post(url, params)
        .then(res => {
          console.log(res);
          Toast("评论成功");
        //  把发布的信息放到数组
          let obj={
            user:{}
          };
          obj.user.nickname=that.userinfo.nickname;
          obj.user.avatar=that.userinfo.avatar;
          obj.content=that.textcomment;
          console.log(obj)
           that.child.unshift(obj);
           that.child=that.child;
            that.textcomment='';
            that.comment = "";
           that.$forceUpdate()
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 隐藏评论弹层
    hidecomment(){
      this.showcomment=false
    },
    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()
            that.tiezishow=true
          }, 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;
            }
          }
         
        })
        .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,
        comments_id:''
      };
      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
}
.tieziwordbox p img{
  width:100%!important
}

.kanmore {
  width: 100%;
  color: #333;
  font-size: 0.28rem;
  margin: 0.32rem 0;
}
.jiantou {
  width: 0.2rem;
  height: 0.25rem;
  margin-left: 0.16rem;
}
.xiajiantou {
  width: 0.2rem;
  height: 0.25rem;
  transform: rotate(90deg);
  margin-left: 0.16rem;
}
.shangjiantou {
  width: 0.2rem;
  height: 0.25rem;
  transform: rotate(-90deg);
  margin-left: 0.16rem;
}
.societybox {
  margin-bottom: 1.2rem;
  margin-top: 2rem;
}
.desyincang {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.commentbot {
  padding: 0.16rem 0.32rem;
  box-sizing: border-box;
  background: #f7f7f7;
}
.entercomment {
  width: 4.9rem;
  height: 0.76rem;
  background: #fff;
  color: #454e56;
  font-size: 0.28rem;
}
.entercomment input {
  width: 100%;
  height: 100%;
  padding: 0.2rem;
  box-sizing: border-box;
}
.fasong {
  width: 1.14rem;
  height: 0.6rem;
  background:#F19B18;
  border-radius: 0.04rem;
  color: #fff;
  font-size: 0.28rem;
  text-align: center;
  line-height: 0.6rem;
}
.jianpan {
  width: 0.5rem;
  height: 0.5rem;
}
.repalayname {
  color: #F19B18;
  font-size: 0.28rem;
}
.commenttext {
  color: #454e56;
  font-size: 0.28rem;
  margin-top: 0.1rem;
}
.commentname {
  color: "#333333";
  font-size: 0.28rem;
  font-weight: bold;
}
.commentnamek{
   color: "#333333";
  font-size: 0.28rem;
  font-weight: bold;
}
.commentimg {
  width: 0.64rem;
  height: 0.64rem;
  border-radius: 50%;
  margin-right: 0.08rem;
  font-size: 0;
  flex: 0 0 auto;
}
.commentimg img {
  border-radius: 50%;
}
.commentboxitem {
  margin-top: 0.24rem;
  display: flex;
}
.commentwrap {
  width: 100%;
  height: 8.5rem;
  background: #fff;
  border-radius: 0.1rem 0.1rem 0 0;
  position: absolute;
  bottom: 0;
  left: 0;
}
.closeimg {
  width: 0.38rem;
  height: 0.38rem;
}
.commenttop {
  padding: 0.32rem 0.32rem 0;
  box-sizing: border-box;
}
.commentbox {
  padding: 0 0.32rem;
  box-sizing: border-box;
  overflow-y: scroll;
  height: 6.62em;
  padding-bottom: 0.32rem;
}
.commenttopleft {
  width: 0.24rem;
  height: 0.24rem;
}
.commenttopmiddle {
  color: #041121;
  font-size: 0.36rem;
}
.nodata{
  color:#999;
  font-size:0.32rem;
  text-align: center;
  margin-top:0.23rem;
}
.shareimg{
  width:0.32rem;
  height: 0.32rem;
  margin-right:0.3rem;
}
.sharewrap {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
</style>