<!--  -->
<template>
  <div class="addData_details_box" :style="'height:' + fullHeight + 'px'">
    <!-- 头部 -->
    <div class="record_headrBox">
      <div class="record_divBox">
        <img
          @click="goBack()"
          src="../../assets/image/new/30.png"
          alt
          class="record_headrBox-img"
        />
        <div class="record_headrBox-tlt">详情</div>
      </div>
    </div>

    <!-- 主内容 -->
    <div class="addData_details_box_main">
      <!-- 图片 -->
      <div class="addData_details_box_imgBox">
        <el-carousel trigger="click" height="6rem">
          <el-carousel-item v-for="item in redata.img" :key="item">
            <img
              preview="1"
              v-lazy="'http://192.168.1.8:8002/' + item"
              alt
              class="addData_details_box_imgBox-img"
            />
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- <div class="addData_details_box_divBox">
        <div class="addData_details_box_divBox_div1">
          <img
            preview="1"
            v-lazy="'http://192.168.1.8:8002/' + redata.photo"
            alt=""
            class="addData_details_box_divBox_div1_img"
          />
          <div class="addData_details_box_divBox_div1_name2">
            {{
              redata.user_remark == null ? redata.username : redata.user_remark
            }}
            <div class="">上传于{{ redata.time }}</div>
          </div>
          <div class="addData_details_box_divBox_div1_name2Box">
            <img
              src="../../assets/image/ding.png"
              alt=""
              class="addData_details_box_divBox_div1_name2_img"
            />
            <div class="addData_details_box_divBox_div1_name2_txt">
              {{ redata.addr }}
            </div>
          </div>

          <div class="addData_details_box_divBox_div1_name2_txt1">
            {{ redata.problem }}
          </div>
        </div>
      </div> -->

      <!-- 测试 -->
      <div class="addData_details_box_divBox">
        <div class="addData_details_box_divBoxDiv1">
          <img
            preview="1"
            v-lazy="'http://192.168.1.8:8002/' + redata.photo"
            alt=""
            class="addData_details_box_divBox_div1_img"
          />

          <div class="" style="width: 100%">
            <div class="addData_details_box_divBox_div1_name2">
              {{
                redata.user_remark == null
                  ? str
                  : redata.user_remark
              }}
              <div class="" style="margin: 0 0 0 3%">
                上传于{{ redata.time }}
              </div>
            </div>

            <div class="addData_details_box_divBox_div1">
              <div class="addData_details_box_divBox_div1_name2Box">
                <img
                  src="../../assets/image/ding.png"
                  alt=""
                  class="addData_details_box_divBox_div1_name2_img"
                />
                <div class="addData_details_box_divBox_div1_name2_txt">
                  {{ redata.addr }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="addData_details_box_divBoxDiv2">
          {{ redata.problem }}
        </div>
      </div>

      <!-- 评论 -->
      <div class="addData_details_commentDiv" v-if="replyShow">
        <ul class="addData_details_commentUl">
          <li
            class="addData_details_commentList"
            v-for="(item, index) in lowerData"
            :key="index"
          >
            <div class="addData_details_commentList-div1">
              <img
                preview="1"
                v-lazy="'http://192.168.1.8:8002/' + item.photo"
                alt=""
                class="addData_details_commentList_img1"
              />
              <div class="addData_details_commentList_div2">
                <div class="addData_details_commentList_div2_name">
                  {{
                    item.user_remark == null ? item.username : item.user_remark
                  }}
                </div>
                <div class="addData_details_commentList_div2_txt">
                  {{ item.problem }}
                </div>
              </div>
            </div>

            <div
              class="addData_details_commentList_div2_time"
              v-time="item.newTime"
            ></div>
          </li>
        </ul>
      </div>

      <!-- 评论暂无数据 -->
      <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>
import "../../../static/js/time";
export default {
  name: "record",
  components: {},
  data() {
    return {
      fullHeight: document.documentElement.clientHeight,
      id: "", //从列表传输的id
      replyShow: false, //是否有留言
      redata: [],
      lowerData: [], //评论数据
      img: "", //要改成轮播图
      isClick: true, //点赞开关
      // 发表评论
      iptShow: false, //input框
      textIpt: "", // 隐藏input的双向绑定
      str: '', //加密
      ret: '',
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  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 == 'authenticate') {
        that.$router.replace("/authenticate");
      }
    },

    //详情数据接口
    addDataDetails() {
      var that = this;
      var form = new FormData();
      var id = that.id;
      form.append("id", 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.redata = res.data[0];
          that.img = res.data[0].img[0];
          that.phonePad(res.data[0].username);

          // 重组评论数据
          var arr = res.data[0].lower;
          for (var i = 0; i < arr.length; i++) {
            var d = new Date(arr[i].time);
            var t = d.getTime(d);
            arr[i]["newTime"] = t;

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

    // 发表评论
    //获取焦点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", "");
        that
          .$axios({
            method: "post",
            url: "http://192.168.1.8:8002/user_reply",
            data: form,
            headers: {
              "Content-Type": "multipart/form-data",
            },
          })
          .then((res) => {
            console.log(res.data)
            if (res.data.code == "200") {
              this.$message({
                type: "success",
                message: "评论成功!",
                duration: 1500,
              });
              that.textIpt = "";
              this.iptShow = false;
              that.addDataDetails(); //请求详情数据
            } else {
              that.$notify.error({
                title: "错误",
                message: "评论失败,请重试",
                duration: 1500,
              });
            }
          })
          .catch((err) => {
            that.$notify.error({
              title: "错误",
              message: "评论失败,请重试",
              duration: 1500,
            });
            console.log(err)
          });
      } else {
        this.$notify.error({
          title: "错误",
          message: "内容不能为空！！！",
          duration: 1500,
        });
      }
    },
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    _this.id = _this.$route.query.id;
    _this.ret = _this.$route.query.ret;
    _this.get_boderHeight();
    _this.addDataDetails(); //详情数据接口

    //点击评论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/bus.scss";
@import "../../assets/scss/addData_details.scss";
</style>