<!--  -->
<template>
  <div class="questions_details_box" :style="'height:' + fullHeight + 'px'" v-loading="loading">
    <!-- 头部 -->
    <div class="questions_details_head">
      <div class="questions_details_head_returnA" @click="FanHui()">
        <img src="../../assets/image/left.png" alt class="questions_details_head_returnA_img" />
      </div>

      <!-- 轮播 -->
      <div class="block">
        <el-carousel trigger="click" height="6rem">
          <el-carousel-item v-for="item in imageData" :key="item">
            <img
              preview="1"
              v-lazy=" 'bigservers/' + item"
              alt
              class="lunboImg"
            />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 轮播 -->
    </div>

    <!-- 主内容 -->
    <div class="questions_details_main">
      <!-- 详情基础数据 -->
      <div class="main_basisData">
        <!-- 类型标识和描述 -->
        <div class="questions_details_TAGBox">
          <span class="questions_details_TAG">{{ this.redata.ret == 'plant' ? '病害' : '虫害' }}</span>
          <span class="questions_details_TAGText">{{ this.redata.problem }}</span>
        </div>

        <!-- 用户头像和用户名 -->
        <div class="questions_details_NameBox">
          <div class="questions_details_NameBox_box">
            <img
              :src=" 'bigservers/' + this.redata.photo"
              alt
              class="questions_details_NameBox_image"
            />
            <div
              class="questions_details_NameBox_text"
            >{{ this.redata.user_remark === '' || this.redata.user_remark === null ? this.str : this.redata.user_remark }}</div>
          </div>
          <div class="questions_details_NameBox_time">{{ this.redata.time }}</div>
        </div>

        <!-- 地址 -->
        <div class="questions_details_address">
          <img src="../../assets/image/ding.png" alt class="questions_details_address_img" />
          <span class="questions_details_address_addr">{{ this.redata.addr }}</span>
        </div>
        <!-- 地址 -->

        <!-- 详情 -->
        <ul class="questions_details_details">
          <li class="questions_details_details_li">
            <div class="questions_details_details_li_medicine">近期用肥用药情况：</div>
            <div class="questions_details_details_li_medicineData">{{ this.redata.drug }}</div>
          </li>
          <li class="questions_details_details_li">
            <div class="questions_details_details_li_acreage">发生面积：</div>
            <div class="questions_details_details_li_acreageData">{{ this.redata.area }}</div>
          </li>
          <li class="questions_details_details_li">
            <div class="questions_details_details_li_weather">近期天气情况：</div>
            <div class="questions_details_details_li_weatherData">{{ this.redata.weather }}</div>
          </li>
        </ul>
        <!-- 详情 -->
        <!-- 线 -->
        <div class="main_basisData_wire"></div>
        <!-- 线 -->
      </div>
      <!-- 详情基础数据 -->

      <!-- 留言列表 -->
      <div class="main_leave">
        <!-- 标题 -->
        <div class="main_leave_title_box">
          <div class="main_leave_title">用户回答</div>
          <div class="main_leave_title_num">{{ this.redata.num }}</div>
        </div>

        <!-- 留言 -->
        <ul class="reply" v-if="replyShow">
          <li class="questions_details_li" v-for="(item, index) in this.redata.lower" :key="index">
            <!-- 第一级用户评论 -->
            <div class="questions_details_li_criticOne">
              <div class="criticOne_profile">
                <!-- 头像和名称 -->
                <div class="profile_box">
                  <img :src=" 'bigservers/' + item.photo" alt class="profile_img" />
                  <!-- <div class="profile_name">{{ item.username }}</div> -->
                  <div
                    class="profile_name"
                  >{{ item.user_remark === '' || item.user_remark === null ? item.username : item.user_remark }}</div>
                </div>
                <!-- 头像和名称 -->

                <!-- 点赞 -->
                <div class="give_box">
                  <img
                    v-if="item.exist == '0'"
                    @click="give($event, item.id, index)"
                    src="../../assets/image/give.png"
                    alt
                    class="give_img"
                  />
                  <img
                    v-else
                    @click="giveA($event, item.id, index)"
                    src="../../assets/image/giveA.png"
                    alt
                    class="give_img"
                  />
                  <div class="give_text">{{ item.like_num }}</div>
                </div>
              </div>

              <!-- 回复的文字 -->
              <div class="questions_details_li_criticOne_text">{{ item.problem }}</div>

              <!-- 时间和回复按钮 -->
              <div class="reply_time">
                <div class="time_text">{{ item.time }}</div>

                <div
                  class="reply_btn"
                  @click="reply($event, item.username, item.user_remark, item.id)"
                >回复</div>
              </div>
            </div>
            <!-- 第一级用户评论 -->

            <!-- 第二级评论 -->
            <ul v-show="item.lower.length !== 0" class="questions_details_ulTwo">
              <li class="questions_details_liTwo" v-for="(itemA, index) in item.lower" :key="index">
                <!-- 头像和名称 -->
                <div class="criticTwo_profile">
                  <img
                    :src=" 'bigservers/' + itemA.photo"
                    alt
                    class="profileTwo_img"
                  />
                  <!-- <div class="profileTwo_name">{{ itemA.username }}</div> -->
                  <div
                    class="profileTwo_name"
                  >{{ itemA.user_remark === '' || itemA.user_remark === null ? itemA.username : itemA.user_remark }}</div>
                </div>

                <!-- 回复内容 -->
                <div class="questions_details_li_criticTwo_text">{{ itemA.problem }}</div>

                <!-- 时间和回复功能 -->
                <div class="reply_timeTwo">
                  <div class="time_textTwo">{{ itemA.time }}</div>

                  <!-- <div class="reply_btnTwo" @click="reply($event, itemA.username, item.user_remark, item.id)">回复</div> -->
                </div>
              </li>
            </ul>
            <!-- 第二级评论 -->
          </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>
      <!-- 留言列表 -->

      <!-- 底部input框 -->
      <div class="bomIpt_box">
        <div class="Ipt_box">
          <input
            disabled="disabled"
            maxlength="80"
            type="text"
            @focus="ipt()"
            class="Ipt"
            placeholder="写回复"
          />
        </div>

        <!-- 查看 -->
        <div class="bomIpt_box_chakan">
          <img src="../../assets/image/chakan.png" alt class="bomIpt_box_chakanImg" />
          <div class="bomIpt_box_chakanNum">{{ this.redata.visit_num }}</div>
        </div>
        <!-- 查看 -->

        <!-- 收藏 -->
        <div class="bomIpt_box_shoucang">
          <img
            v-if="this.redata.stroe === '0'"
            @click="collect()"
            src="../../assets/image/collect.png"
            alt
            class="bomIpt_box_shoucangImg"
          />
          <img
            v-else
            @click="collectA()"
            src="../../assets/image/collect12.png"
            alt
            class="bomIpt_box_shoucangImgA"
          />
          <div class="bomIpt_box_shoucangNum">{{ this.redata.collect_num }}</div>
        </div>
        <!-- 收藏 -->
      </div>
      <!-- 底部input框 -->

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

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      isClick: true, //点赞开关
      iptShow: false, //input框
      fullHeight: document.documentElement.clientHeight,
      redata: [], //页面基础数据
      imageData: [], //轮播数据
      // problemShow: false, //二级评论是否显示
      problemShow: "", //二级评论是否显示
      replyShow: false, //是否有留言
      textIpt: "", // 隐藏input的双向绑定
      // nameAA: "admin", //当前操作的用户
      giveShow: true, //点赞
      collectShow: true, //收藏
      replyTAG: "", //判断是什么回复的标识
      //查看大图
      imgList: "",
      loading: true, //加载
      str: "", //加密手机号
      name: "", //回复
      nameA: "" //回复
    };
  },
  //监听属性 类似于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;
        })();
      };
    },

    //返回home页面
    FanHui() {
      //判断当前页面数据是从首页还是消息提醒
      if (localStorage.getItem("home_questionName") !== null) {
        // console.log("消息");
        localStorage.removeItem("home_questionID"); //删除ID
        localStorage.removeItem("questions_detailsBiaoshi");
        localStorage.removeItem("home_questionName");
        this.$router.replace("/message_list");
      } else {
        // console.log("首页");
        localStorage.removeItem("home_questionID"); //删除ID
        localStorage.removeItem("questions_detailsBiaoshi");

        // this.$router.push({ name: "home", params: { nums: "1" } });
        this.$router.replace({ name: "home", params: { nums: "1" } });
      }
    },

    //获取焦点input框
    ipt() {
      this.iptShow = true;
      // this.$nextTick(() => {
      //   this.$refs.Iptid.focus();
      // });
    },

    //隐藏框失去焦点
    IptA() {
      // this.textIpt = ''
    },

    //详情数据
    ajaxData() {
      let _this = this;
      let postData = _this.$qs.parse({
        id: localStorage.getItem("home_questionID")
      });
      _this
        .$axios({
          method: "post",
          url: "bigservers/user_answer",
          data: postData
        })
        .then(res => {
          //判断是否有评论
          if (res.data[0].lower.length === 0) {
            _this.replyShow = false;
          } else {
            _this.replyShow = true;
          }
          _this.redata = res.data[0];
          _this.imageData = res.data[0].img;
          _this.loading = false;
          _this.phonePad(res.data[0].username);
        })
        .catch(err => {
          console.log(err);
        });
    },

    //一级评论回复事件
    reply(e, name, nameA, ids) {
      this.iptShow = true; //显示input
      this.$nextTick(() => {
        this.$refs.Iptid.focus();
      });
      if (nameA !== "") {
        this.textIpt = "回复" + nameA + "：";
        this.nameA = nameA;
      } else {
        this.textIpt = "回复" + name + "：";
        this.name = name;
      }
      this.replyTAG = "one";
      // console.log(ids);
      localStorage.setItem("home_questionBId", ids);
    },

    //发表评论
    btnFbiao() {
      let _this = this;

      if (this.name !== "") {
        var num = "回复" + this.name + "："
        var dat = _this.textIpt
        dat = dat.replace(num, '')
      } else if (this.nameA !== "") {
        var num = "回复" + this.nameA + "："
        var dat = _this.textIpt
        dat = dat.replace(num, '')
      }
      if (dat === "") {
        this.$notify.error({
          title: "错误",
          message: "内容不能为空！！！",
          duration: 1500
        });
      } else {
        if (this.replyTAG === "one") {
          var postData = _this.$qs.parse({
            ret: "new", //新建
            id: localStorage.getItem("home_questionID"), //问题id
            ids: localStorage.getItem("home_questionBId"), //一级评论id
            content: _this.textIpt //评论内容
          });
        } else {
          var postData = _this.$qs.parse({
            ret: "new", //新建
            id: localStorage.getItem("home_questionID"), //问题id
            ids: "", //一级评论id
            content: _this.textIpt //评论内容
          });
        }
        _this
          .$axios({
            method: "post",
            url: "bigservers/user_reply",
            data: postData
          })
          .then(res => {
            //判断评论是否成功
            if (res.data === 0) {
              this.$message({
                type: "success",
                message: "评论成功!",
                duration: 1500
              });
              _this.textIpt = "";
              this.ajaxData();
              localStorage.setItem("questions_detailsBiaoshi", "1");
            } else if (res.data === 1) {
              this.$notify.error({
                title: "错误",
                message: "评论失败,请重试",
                duration: 1500
              });
            }
            _this.iptShow = false; //收起input
            _this.nameA = ''
            _this.name = ''
          })
          .catch(err => {
            console.log(err);
          });
      }
    },

    //评论点赞
    give(e, id, index) {
      let _this = this;
      let postData = _this.$qs.parse({
        id: id,
        ret: "addr"
      });
      var isClick = _this.isClick;
      if (isClick === true) {
        _this.isClick = false;
        _this
          .$axios({
            method: "post",
            url: "bigservers/answer_praise",
            data: postData
          })
          .then(res => {
            if (res.data === 0) {
              this.$message({
                type: "success",
                message: "点赞成功!",
                duration: 1500
              });
              _this.redata.lower[index].exist = "1"; //改变点赞状态
              _this.redata.lower[index].like_num =
                _this.redata.lower[index].like_num + 1; //改变点赞数量
              _this.numOne = res.data.num;
            } else if (res.data === 1) {
              this.$notify.error({
                title: "错误",
                message: "点赞出错了！！",
                duration: 1500
              });
            } else if (res.data === 2) {
              this.$message({
                type: "success",
                message: "已点赞!",
                duration: 1500
              });
            }
          });
        setTimeout(function() {
          _this.isClick = true;
        }, 1500);
      }
    },

    //取消点赞
    giveA(e, id, index) {
      let _this = this;
      let postData = _this.$qs.parse({
        id: id,
        ret: "move"
      });
      var isClick = _this.isClick;
      if (isClick === true) {
        _this.isClick = false;
        _this
          .$axios({
            method: "post",
            url: "bigservers/answer_praise",
            data: postData
          })
          .then(res => {
            if (res.data === 0) {
              this.$message({
                type: "success",
                message: "取消点赞成功!",
                duration: 1500
              });
              _this.redata.lower[index].exist = "0"; //改变点赞状态
              _this.redata.lower[index].like_num =
                _this.redata.lower[index].like_num - 1; //改变点赞数量
              // console.log(res.num);
            } else if (res.data === 1) {
              this.$notify.error({
                title: "错误",
                message: "取消点赞出错了！！",
                duration: 1500
              });
            } else if (res.data === 2) {
              this.$message({
                type: "success",
                message: "已点赞!",
                duration: 1500
              });
            }
          });
        setTimeout(function() {
          _this.isClick = true;
        }, 1500);
      }
    },

    //点击收藏
    collect() {
      let _this = this;
      let postData = _this.$qs.parse({
        id: localStorage.getItem("home_questionID"),
        ret: "plus"
      });
      var isClick = _this.isClick;
      if (isClick === true) {
        _this.isClick = false;
        _this
          .$axios({
            method: "post",
            url: "bigservers/answer_praise",
            data: postData
          })
          .then(res => {
            if (res.data === 0) {
              this.$message({
                type: "success",
                message: "收藏成功!",
                duration: 1500
              });
              _this.redata.stroe = "1"; //改变点赞状态
              _this.redata.collect_num = _this.redata.collect_num + 1; //改变点赞数量
            } else if (res.data === 1) {
              this.$notify.error({
                title: "错误",
                message: "收藏出错了！！",
                duration: 1500
              });
            }
          })
          .catch(err => {
            console.log(err);
          });
        setTimeout(function() {
          _this.isClick = true;
        }, 1500);
      }
    },

    //取消收藏
    collectA() {
      let _this = this;
      let postData = _this.$qs.parse({
        id: localStorage.getItem("home_questionID"),
        ret: "off"
      });
      var isClick = _this.isClick;
      if (isClick === true) {
        _this.isClick = false;
        _this
          .$axios({
            method: "post",
            url: "bigservers/answer_praise",
            data: postData
          })
          .then(res => {
            if (res.data === 0) {
              this.$message({
                type: "success",
                message: "取消收藏成功!",
                duration: 1500
              });
              _this.redata.stroe = "0"; //改变点赞状态
              _this.redata.collect_num = _this.redata.collect_num - 1; //改变点赞数量
            } else if (res.data === 1) {
              this.$notify.error({
                title: "错误",
                message: "取消收藏出错了！！",
                duration: 1500
              });
            }
          })
          .catch(err => {
            console.log(err);
          });
        setTimeout(function() {
          _this.isClick = true;
        }, 1500);
      }
    },

    //第一次进入详情时进行调用-暂时不用
    oneAjax() {
      let _this = this;
      let postData = _this.$qs.parse({
        id: localStorage.getItem("home_questionID"),
        ret: "answ"
      });
      _this
        .$axios({
          method: "post",
          url: "bigservers/reminder",
          data: postData
        })
        .then(res => {
          // //判断是否有评论
          // if (res.data[0].lower.length === 0) {
          //   _this.replyShow = false;
          // } else {
          //   _this.replyShow = true;
          // }
          // _this.redata = res.data[0];
          // _this.imageData = res.data[0].img;
          // console.log(res.data);
        })
        .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 += "*";
        } else {
          this.str += res;
        }
      });
      return this.str;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    //判断本地是否有存field_detailsBiaoshi
    if (localStorage.getItem("questions_detailsBiaoshi") === null) {
      this.oneAjax();
      this.ajaxData();
    } else if (localStorage.getItem("questions_detailsBiaoshi") !== null) {
      this.ajaxData();
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.get_boderHeight();

    //点击评论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.iptShow = true;
        } else {
          this.iptShow = false;
        }
      });
    });
  }
};
</script>
<style lang='scss'>
@import "../../assets/scss/bus.scss";
@import "../../assets/scss/questions_details.scss";
//@import url(); 引入公共css类
</style>