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

      <!-- 标题 -->
      <div class="head_title">
        <span class="head_title_text">消息盒子</span>
      </div>

      <!-- 全部已读 -->
      <div class="head_readBoxA">
        <div class="head_readBox" v-show="isShow">
          <span class="read" @click="read()" v-if="messIf">全部标记已读</span>
          <span class="read_del" @click="read_del()" v-else>删除已读消息</span>
        </div>
      </div>
      <!-- 全部已读 -->
    </div>

    <!-- 主内容 -->
    <div class="message_list_main" :style="'height:' + fullHeight + 'px'">
      <!-- 数据列表 -->
      <ul class="message_list_main_ul">
        <li
          class="message_list_main_li"
          @click="xiangqing(item.ids, item.ret)"
          v-for="(item, index) in this.redata"
          :key="index"
        >
          <!-- 未读标识 -->
          <div class="yuandian_box" v-if="item.read === '0'">
            <img src="../../assets/image/yuandian.png" :alt="item.id" class="yuandian_box_img" />
          </div>
          <!-- 未读标识 -->

          <!-- 时间和标识 -->
          <div class="message_list_main_li_timeBox">
            <div
              class="message_list_main_li_biaoshi"
            >你的{{ item.ret === 'answ' ? '交流' : '个人秀' }}有新回复啦！</div>
            <div class="message_list_main_li_time">{{ item.time }}</div>
          </div>
          <!-- 时间和标识 -->

          <!-- 回复内容 -->
          <div class="message_list_main_li_neirong">{{ item.username }}：{{ item.content }}</div>
          <!-- 回复内容 -->
        </li>
      </ul>
      <!-- 数据列表 -->
    </div>
    <!-- 主内容 -->
  </div>
</template>

<script>
export default {
  name: 'message_list',
  components: {},
  data() {
    //这里存放数据
    return {
      loading: true, //加载
      fullHeight: document.documentElement.clientHeight,
      messIf: true, //已读
      redata: [], //数据
      yuandianShow: "", //圆点是否显示
      isShow: true //显示已录和删除
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    }
  },
  //方法集合
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    //返回主页
    FanHui() {
      // this.$router.push("/home");
      this.$router.replace("/home");
    },

    //消息列表数据
    message_list() {
      let _this = this;
      let postData = _this.$qs.parse({
        page: 1
      });
      _this
        .$axios({
          method: "post",
          url: "bigservers/user_news",
          data: postData
        })
        .then(res => {
          if (res.data.dat.length === 0) {
            this.$notify.info({
              title: "消息",
              message: "暂无消息",
              duration: 1500
            });
            _this.isShow = false; //隐藏头部删除、已读
          } else {
            _this.redata = res.data.dat;

            //判断是否有read == 0
            var data = res.data.dat;
            for (var i = 0; i < data.length; i++) {
              if (data[i].read == "0") {
                _this.messIf = true;
              } else {
                _this.messIf = false;
              }
            }
          }
          _this.loading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },

    //点击已读
    read() {
      this.$axios({
        method: "get",
        url: "bigservers/del_news",
        params: {
          id: "",
          ret: "all"
        }
      })
        .then(res => {
          if (res.data === 0) {
            this.messIf = false;
            this.message_list();
          } else if (res.data === 1) {
            this.$notify.error({
              title: "错误",
              message: "操作失败，请重试",
              duration: 1500
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    //点击删除全部已读
    read_del() {
      this.$axios({
        method: "get",
        url: "bigservers/del_news",
        params: {
          id: "",
          ret: "off"
        }
      })
        .then(res => {
          if (res.data === 0) {
            this.messIf = true;
            // this.$notify({
            //   title: "成功",
            //   message: "删除成功",
            //   type: "success",
            //   duration: 1500
            // });
            this.redata = [];
            this.message_list();
          } else if (res.data === 1) {
            this.$notify.error({
              title: "错误",
              message: "操作失败，请重试",
              duration: 1500
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    //点击列表数据进入相应的详情页面
    xiangqing(ids, ret) {
      //判断是个人秀还是交流
      if (ret === "farm") {
        //个人秀
        localStorage.setItem("fieldDetailsId", ids); //存个人秀的ID
        localStorage.setItem("fieldName", "true"); //存个人秀的标识
        this.$router.push("/field_details");
      } else if (ret === "answ") {
        //交流
        localStorage.setItem("home_questionID", ids); //存交流的ID
        localStorage.setItem("home_questionName", "true"); //存交流的标识
        this.$router.push("/questions_details");
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.message_list(); //消息列表数据
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
};
</script>
<style lang='scss'>
@import "../../assets/scss/bus.scss";
@import "../../assets/scss/message_list.scss";
//@import url(); 引入公共css类
</style>