<template>
  <div class="field_details_box">
    <!-- 头部 -->
    <div class="field_details_headrBox">
      <div class="field_details_divBox">
        <img
          @click="goBack()"
          src="../../assets/image/new/30.png"
          alt
          class="field_headrBox-img"
        />
        <div class="field_details_headrBox-tlt">详情</div>
      </div>
    </div>

    <!-- 主内容 -->
    <div class="field_details_main">
      <!-- 交流 -->
      <div class="swiper-slide" ref="viewBox">
        <ul class="field_details_box_main-ulA">
          <li class="field_details_box_main-listA">
            <!-- 用户信息 -->
            <div class="field_details_box_main-listA-userBox">
              <img
                preview="1"
                v-lazy="'http://192.168.1.8:8002/' + photo"
                alt
                class="field_details_box_main-listA-userBox-img"
              />

              <div class="field_details_box_main-listA-userBox-txt">
                <div class="field_details_box_main-listA-userBox-name">
                  {{ redata.user_remark == null ? str : redata.user_remark }}
                </div>
                <div class="field_details_box_main-listA-userBox-time">
                  {{ redata.time }}
                </div>
              </div>
            </div>

            <!-- 交流内容-文字 -->
            <div class="field_details_box_main-listA-writing">
              {{ redata.problem }}
            </div>

            <!-- 交流图片 -->
            <div class="field_details_box_main-listA-image">
              <ul class="field_details_box_main-listA-image-ul">
                <li
                  class="field_details_box_main-listA-image-list"
                  v-for="item in this.redata.img"
                  :key="item"
                >
                  <img
                    preview="1"
                    v-lazy="'http://192.168.1.8:8002/' + item"
                    alt
                    class="field_details_box_main-listA-imageList"
                  />
                </li>
              </ul>
            </div>

            <!-- 交流数据的查看评论点赞 -->
            <div class="field_details_box_main-listA-operation">
              <ul class="field_details_box_main-listA-operation-ul">
                <li class="field_details_box_main-listA-operation-list">
                  <img
                    src="../../assets/image/new/8.png"
                    alt
                    class="field_details_box_main-listA-operation-listImg"
                  />
                  <div class="field_details_box_main-listA-operation-listNum">
                    {{ this.visit_num }}
                  </div>
                </li>
                <li class="field_details_box_main-listA-operation-list">
                  <img
                    src="../../assets/image/new/10.png"
                    alt
                    class="field_details_box_main-listA-operation-listImg"
                  />
                  <div class="field_details_box_main-listA-operation-listNum">
                    {{ this.replys }}
                  </div>
                </li>
                <li class="field_details_box_main-listA-operation-list">
                  <!-- 未点赞 -->
                  <img
                    @click.stop="likeA()"
                    v-if="this.like == '0'"
                    src="../../assets/image/new/3.png"
                    alt
                    class="field_details_box_main-listA-operation-listImg"
                  />
                  <!-- 点赞了 -->
                  <img
                    v-else
                    @click.stop="noLike()"
                    src="../../assets/image/new/23.png"
                    alt
                    class="field_details_box_main-listA-operation-listImg"
                  />
                  <div class="field_details_box_main-listA-operation-listNum">
                    {{ this.like_num }}
                  </div>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>

      <!-- 评论 -->
      <ul class="field_details_commentUl" v-if="replyShow">
        <li
          class="field_details_commentList"
          v-for="(item, index) in this.lower"
          :key="index"
        >
          <div class="field_details_commentList-div1">
            <img
              preview="1"
              v-lazy="'http://192.168.1.8:8002/' + item.photo"
              alt=""
              class="field_details_commentList_img1"
            />
            <div class="field_details_commentList_div2">
              <div class="field_details_commentList_div2_name">
                {{
                  item.user_remark == null ? item.username : item.user_remark
                }}
              </div>
              <div class="field_details_commentList_div2_txt">
                {{ item.problem }}
              </div>
              <div class="field_details_commentList_div2_time">
                {{ item.time }}
              </div>
            </div>
          </div>

          <div class="give_box">
            <!-- 未点赞 -->
            <img
              @click.stop="likeB(item.id, index)"
              v-if="item.exist == '0'"
              src="../../assets/image/new/3.png"
              alt
              class="field_details_commentList_img"
            />
            <!-- 点赞了 -->
            <img
              v-else
              @click.stop="noLikeB(item.id, index)"
              src="../../assets/image/new/23.png"
              alt
              class="field_details_commentList_img"
            />
            <div class="field_details_commentList_likeNum">
              {{ item.replys_num }}
            </div>
          </div>
        </li>
      </ul>

      <!-- 评论暂无数据 -->
      <div class="without_box" v-else>
        <img src="../../assets/image/without.png" alt class="without_img" />
        <div class="without_text">还没有人评论</div>
      </div>

      <!-- 发表评论 -->
      <div class="bomIpt_box">
        <div class="Ipt_box">
          <input
            type="text"
            disabled="disabled"
            @focus="ipt()"
            class="Ipt"
            placeholder="写回复"
          />
        </div>
      </div>

      <!-- 隐藏的input和发表按钮 -->
      <div id="inputId" class="hidIpt_box" v-show="iptShow">
        <textarea
          maxlength="100"
          v-model="textIpt"
          type="text"
          @blur="IptA($event)"
          class="hidIpt_box_ipt"
          ref="Iptid"
        />
        <button class="hidIpt_box_btn" @click="btnFbiao()">发表</button>
      </div>
      <!-- 隐藏的input和发表按钮 -->
    </div>
  </div>
</template>

<script>
export default {
  name: "field_details",
  data() {
    return {
      fullHeight: document.documentElement.clientHeight, //自适应高度
      redata: {},
      replyShow: false, //是否有留言
      isClick: true, //点赞开关
      // 详情点赞
      visit_num: "", //查看
      replys: "", //评论
      like: "", //点赞
      like_num: null, //点赞次数
      id: "", //id
      photo: "", //头像
      // 发表评论
      iptShow: false, //input框
      textIpt: "", // 隐藏input的双向绑定
      str: "", //username加密手机号
      lower: [], //评论数据
      ret: "",
    };
  },
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function () {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    },

    //发表评论
    textIpt: function () {
      this.textIpt = this.textIpt.replace(/^\s+|\s+$/g, "");
    },
  },
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    // 返回
    goBack() {
      var that = this;
      if (that.ret == "help") {
        that.$router.replace("/help");
      } else if (that.ret == "exchange") {
        that.$router.replace("/exchange");
      }
    },

    //详情数据接口
    fieldDetailsData() {
      var that = this;
      let form = new FormData();
      form.append("id", that.id);
      that
        .$axios({
          method: "post",
          url: "http://192.168.1.8:8002/user_answer",
          data: form,
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          // 判断是否有评论
          if (res.data[0].lower.length === 0) {
            that.replyShow = false;
          } else {
            that.replyShow = true;
          }
          that.phonePad(res.data[0].username);
          // that.redata = res.data[0];
          // that.like = res.data[0];
          // //处理评论数据
          var arr = [];
          for (var i = 0; i < res.data[0].lower.length; i++) {
            var obj = {};
            obj["exist"] = res.data[0].lower[i].exist;
            obj["id"] = res.data[0].lower[i].id;
            obj["like_num"] = res.data[0].lower[i].like_num;
            obj["photo"] = res.data[0].lower[i].photo;
            obj["problem"] = res.data[0].lower[i].problem;
            obj["time"] = res.data[0].lower[i].time;
            obj["user_remark"] = res.data[0].lower[i].user_remark;

            if (res.data[0].lower[i].username !== "admin") {
              // 1字符串转化成数组
              let phoneArr = [...res.data[0].lower[i].username];
              var n = "";
              // 2.将数组中的4-7位变成*
              phoneArr.map((res, index) => {
                if (index > 2 && index < 7) {
                  n += "*";
                  // return '*';
                } else {
                  n += res;
                }
              });
              obj["username"] = n;
            } else {
              obj["username"] = res.data[0].lower[i].username;
            }
            arr.push(obj);
          }
          // console.log(arr)
          that.lower = arr;
          that.redata = res.data[0];
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //将手机号码加密
    phonePad(p) {
      // 1字符串转化成数组
      let phoneArr = [...p];
      // 2.将数组中的4-7位变成*
      phoneArr.map((res, index) => {
        if (index > 2 && index < 7) {
          this.str += "*";
          // return '*';
        } else {
          this.str += res;
        }
      });
      return this.str;
    },

    // 交流点赞
    likeA() {
      var that = this;
      var isClick = that.isClick;
      var form = new FormData();
      form.append("id", that.id);
      form.append("ret", "answers"); //ret  answers问题点赞  comment评论点赞
      form.append("req", "add"); //req  add 点赞 move 取消点赞
      if (isClick === true) {
        that.isClick = false;
        that
          .$axios({
            method: "post",
            url: "http://192.168.1.8:8002/answer_praise",
            data: form,
          })
          .then((res) => {
            if (res.data.code == "200") {
              this.$message({
                type: "success",
                message: "点赞成功!",
                duration: 1500,
              });
              that.like = "1"; //改变点赞状态
              that.like_num = that.like_num + 1; //改变点赞数据
            } else {
              this.$notify.error({
                title: "错误",
                message: "点赞出错了！！",
                duration: 1500,
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
        setTimeout(function () {
          that.isClick = true;
        }, 1500);
      }
    },
    // 交流取消点赞
    noLike() {
      var that = this;
      var isClick = that.isClick;
      var form = new FormData();
      form.append("id", that.id);
      form.append("ret", "answers"); //ret  answers问题点赞  comment评论点赞
      form.append("req", "move"); //req  add 点赞 move 取消点赞
      if (isClick === true) {
        that.isClick = false;
        that
          .$axios({
            method: "post",
            url: "http://192.168.1.8:8002/answer_praise",
            data: form,
          })
          .then((res) => {
            if (res.data.code == "200") {
              that.$message({
                type: "success",
                message: "取消点赞成功！",
                duration: 1500,
              });
              that.like = "0"; //改变点赞状态
              that.like_num = that.like_num - 1; //改变点赞数量
            } else {
              that.$notify.error({
                title: "错误",
                message: "取消点赞出错了！！",
                duration: 1500,
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
        setTimeout(function () {
          that.isClick = true;
        }, 1500);
      }
    },

    // 交流评论点赞
    likeB(id, index) {
      var that = this;
      var isClick = that.isClick;
      var form = new FormData();
      form.append("id", id);
      form.append("ret", "comment"); //ret  answers问题点赞  comment评论点赞
      form.append("req", "add"); //req  add 点赞 move 取消点赞
      if (isClick === true) {
        that.isClick = false;
        that
          .$axios({
            method: "post",
            url: "http://192.168.1.8:8002/answer_praise",
            data: form,
          })
          .then((res) => {
            if (res.data.code == "200") {
              this.$message({
                type: "success",
                message: "点赞成功!",
                duration: 1500,
              });
              // that.like = "1"; //改变点赞状态
              // that.like_num = that.like_num + 1; //改变点赞数据

              that.lower[index].exist = "1"; //改变点赞状态

              that.lower[index].like_num =
                that.lower[index].like_num + 1;
              // console.log(that.redata.lower[index].like_num);
            } else {
              this.$notify.error({
                title: "错误",
                message: "点赞出错了！！",
                duration: 1500,
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
        setTimeout(function () {
          that.isClick = true;
        }, 1500);
      }
    },
    // 交流评论取消点赞
    noLikeB(id, index) {
      var that = this;
      var isClick = that.isClick;
      var form = new FormData();
      form.append("id", id);
      form.append("ret", "comment"); //ret  answers问题点赞  comment评论点赞
      form.append("req", "move"); //req  add 点赞 move 取消点赞
      if (isClick === true) {
        that.isClick = false;
        that
          .$axios({
            method: "post",
            url: "http://192.168.1.8:8002/answer_praise",
            data: form,
          })
          .then((res) => {
            if (res.data.code == "200") {
              that.$message({
                type: "success",
                message: "取消点赞成功！",
                duration: 1500,
              });
              that.lower[index].exist = "0"; //改变点赞状态
              that.lower[index].like_num =
                that.lower[index].like_num - 1; //改变点赞数量
            } else {
              that.$notify.error({
                title: "错误",
                message: "取消点赞出错了！！",
                duration: 1500,
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
        setTimeout(function () {
          that.isClick = true;
        }, 1500);
      }
    },

    // 发表评论
    //获取焦点input框
    ipt() {
      this.iptShow = true;
      console.log(this.iptShow);
    },
    //隐藏框失去焦点
    IptA(e) {
      // this.textIpt = ''
    },
    //发表
    btnFbiao() {
      let that = this;
      // 判断当前是否输入框为空
      if (that.textIpt !== "") {
        var form = new FormData();
        form.append("id", that.id);
        form.append("content", that.textIpt);
        form.append("ids", "");
        // let postData = that.$qs.parse({
        //   id: that.id,
        //   content: that.textIpt,
        //   // ids: "",
        // });
        that
          .$axios({
            method: "post",
            url: "http://192.168.1.8:8002/user_reply",
            data: form,
            headers: {
              "Content-Type": "multipart/form-data",
            },
          })
          .then((res) => {
            if (res.data.code === "200") {
              this.$message({
                type: "success",
                message: "评论成功!",
                duration: 1500,
              });
              that.textIpt = "";
              this.iptShow = false;
              that.fieldDetailsData(); //请求详情数据
            } else {
              that.$notify.error({
                title: "错误",
                message: "评论失败,请重试",
                duration: 1500,
              });
            }
          })
          .catch((err) => {
            that.$notify.error({
              title: "错误",
              message: "评论失败,请重试",
              duration: 1500,
            });
          });
      } else {
        this.$notify.error({
          title: "错误",
          message: "内容不能为空！！！",
          duration: 1500,
        });
      }
    },
  },

  mounted() {
    var that = this;
    that.visit_num = that.$route.query.visit_num;
    that.replys = that.$route.query.replys;
    that.like = that.$route.query.like;
    that.like_num = that.$route.query.like_num;
    that.id = that.$route.query.id;
    that.photo = that.$route.query.photo;
    that.ret = that.$route.query.ret;
    console.log(that.like)
    that.get_boderHeight(); //动态获取浏览器高度
    that.fieldDetailsData(); //详情数据接口

    //点击评论input和发表以外进行隐藏
    this.$nextTick(() => {
      document.addEventListener("click", (e) => {
        if (
          e.target.className == "hidIpt_box_ipt" ||
          e.target.className == "hidIpt_box_btn" ||
          e.target.className == "Ipt_box" ||
          e.target.className == "Ipt" ||
          e.target.className == "reply_btn"
        ) {
          // this.dialog = false;
          this.iptShow = true;
        } else {
          this.iptShow = false;
        }
      });
    });
  },
};
</script>
<style lang='scss'>
@import "../../assets/scss/field_details.scss";
</style>