<template>
  <div>
    <div class="message-wrap">
      <!-- 标签 -->
      <div class="category-wrap">
        <span
          class="my-tag-style"
          :class="index == activeIndex ? 'active' : ''"
          v-for="(item, index) in messageCategory"
          :key="item.key"
          @click="clickCategory(index, item.category)"
          >{{ item.category }}</span
        >
      </div>

      <!-- 搜索 -->
      <!-- <div class="search-wrap">
        <van-search v-model="searchVal" placeholder="搜索" @search="onSearch" />
      </div> -->
      <!-- 内容列表 -->
      <div class="con-list" @touchmove="showIndex = null">
        <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          > -->
        <van-cell-group
          inset
          v-for="(item, index) in messageList"
          :key="index"
          @click="touchstart(index, item)"
        >
          <!--@touchend.prevent="touchend(index)"  长按备份-->
          <div class="messgae-title"><span>{{ item.noticeTitle }}</span> <span>{{item.sendTime}}</span> </div>
          <div class="message-content">
            {{ item.upcomingUserName }},您好！您有一条来自{{
              item.createUserName
            }}的{{ item.noticeTitle }}相关的待处理任务...
          </div>

          <!-- 长按显示遮罩层 -->

          <van-overlay :show="showIndex == index"  v-if="item.status == '未读'">
            <div class="wrapper" @click.stop ="showIndex = null">
              <!-- <van-button round type="primary" @click="goDetail(item)"
                >查看</van-button
              > -->
              <van-button
                round
                type="info"
                @click="read(item)"
                v-if="item.status == '未读'"
                >已读</van-button
              >
            </div>
          </van-overlay>
        </van-cell-group>

        <!-- </van-list>
        </van-pull-refresh> -->
      </div>
    </div>
  </div>
</template>

<script>
import { postMessgaelist, noticeRemove } from "@/service/message";
export default {
  data() {
    return {
      messageCategory: [
        {
          key: "0",
          category: "未读"
        },
        {
          key: "1",
          category: "已读"
        },
        {
          key: "2",
          category: "全部"
        }
      ],
      activeIndex: 0,
      activeVal: "未读",
      searchVal: "",
      messageList: [], // 消息列表
      // refreshing: false, // 下拉刷新开关
      // loading: false, // 列表滚动到底部会触发load事件
      // finished: false // 列表数据全部加载完成

      Loop: "", // 定时器
      showIndex: null // 是否显示遮罩层
    };
  },
  created() {
    this.unRead();
  },
  methods: {
    // 点击类别
    clickCategory(index, data) {
      // 关闭遮罩层
      this.showIndex = null;
      this.activeIndex = index;
      this.activeVal = this.messageCategory[index].category;
      // 点击全部还是已读还是未读
      this.selectCategory(data);
    },

    // 搜索事件
    onSearch(val) {},

    // 封装全部 已读 和 未读的方法
    selectCategory(data) {
      if (data == "全部") {
        this.getMessageList();
      } else {
        let formData = new FormData();
        formData.append("status", data);
        this.getMessageList(formData);
      }
    },

    // 点击消息条目时的点击事件 变成已读
    read(data) {
      // 判断showIndex是否等于null 如果不等于则先将showIndex改为null
      this.showIndex = null;
      if (data.status == "未读") {
        let formData = new FormData();
        formData.append("ids", data.pid);
        noticeRemove("/mobile/noticeRemove", formData).then(res => {
          if (res.code == 0) {
            // 如果请求接口成功 则重新请求一下未读消息的条数
            this.unRead();
            //  重新请求对应的接口 刷新列表数据
            let val = this.activeVal;
            this.selectCategory(val);
          }
        });
      }
    },

    // 请求有多少未读消息的接口
    unRead() {
      let formData = new FormData();
      formData.append("status", "未读");
      postMessgaelist("/mobile/notice", formData).then(res => {
        if (res.code == 0) {
          // 向父组件发送消息条数
          this.$emit("messageLength", res.total);
          // 给消息列表赋值
          this.messageList = res.rows;
        }
      });
    },

    // 请求消息接口方法
    getMessageList(data) {
      postMessgaelist("/mobile/notice", data).then(res => {
        this.messageList = res.rows;
      });
    },

    //  // 下拉刷新事件
    // onRefresh() {
    //   // 清空列表数据
    //   this.finished = false;

    //   // 重新加载数据
    //   // 将 loading 设置为 true，表示处于加载状态
    //   this.loading = true;
    //   this.onLoad();
    // },

    // // 列表初始化函数
    // onLoad() {
    //   setTimeout(() => {
    //     if (this.refreshing) {
    //       this.refreshing = false;
    //     }

    //     // 加载完成后将loading改成 false
    //     this.loading = false;
    //     // 为什么会连续触发 load 事件？  先加上这句 this.finished = true; 以后再删
    //     // this.finished = true;

    //     // 如果列表数据全部加载完成 则将finished改为true
    //     // if (this.list.length >= 40) {
    //     //   this.finished = true;
    //     // }
    //   }, 5000);
    // }

    touchstart(index, item) {
      // clearTimeout(this.Loop); //再次清空延时器，防止重复注册定时器
      if (this.showIndex != null) {
        this.showIndex = null;
        return;
      }
      this.showIndex = index;
      // this.Loop = setTimeout(
      //   function() {
      //     this.showIndex = index;
      //   }.bind(this),
      //   0
      // ); // 这里的1000是指需要长按的时间，单位为ms
    },
    // touchend(index) {
    //   // 这个方法主要是用来将每次手指移出之后将计时器清零 长按备份
    //   clearTimeout(this.Loop);
    // },

    // 详情
    goDetail(data) {
      this.showIndex = null;
    },
   
  }
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
.message-wrap {
  padding: 10px 10px 0;
  background-color: #f0f1f5;
  // 标签
  .category-wrap {
    .my-tag-style {
      width: 75px;
      height: 21px;
      font-size: 13px;
      border: 1px solid #1989fa;
      border-radius: 4px;
      color: #1989fa;
      display: inline-block;
      text-align: center;
      line-height: 21px;
      margin-right: 10px;
    }
    .active {
      color: white;
      background-color: #1989fa;
    }
  }
  // 搜索
  .search-wrap {
    margin: 10px 0;
    .van-search {
      border-radius: 5px;
      padding: 5px 12px;
    }
    .van-search__content {
      background-color: #ffffff;
    }
  }
  //  内容
  .con-list {
    margin-top: .266667rem;
    .van-cell-group--inset {
      margin: 0;
      margin-bottom: 10px;
      padding: 10px;
      font-size: 13px;
      position: relative;
      .messgae-title{
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .message-content {
        margin-top: 10px;
      }
      .van-overlay {
        position: absolute;
        .wrapper {
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          height: 100%;
        }
      }
    }
  }
}
</style>
