<template>
  <div>
    <div class="message-wrap">
      <!-- 标签 -->
      <div class="category-wrap">
        <!-- <span class="my-tag-style active">全部</span>
        <span class="my-tag-style">已读</span>
        <span class="my-tag-style">未读</span> -->
        <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">
        <!-- <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="read(item)"
          @touchstart="touchstart(index, item)"
          @touchend="touchend(index)"
        >
          <div class="messgae-title">{{ item.noticeTitle }}</div>
          <div class="message-content">
            {{ item.upcomingUserName }},您好！您有一条来自{{
              item.createUserName
            }}的{{ item.noticeTitle }}相关的待处理任务...
          </div>

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

          <van-overlay :show="showIndex == index">
            <div class="wrapper" @click.stop>
              <van-button round type="primary" @touchstart="goDetail(item)"
              >详情</van-button
            >
            <van-button round type="info" @touchstart="goConfirm(item)"
              >整改</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.getMessageList();
    this.unRead();
  },
  methods: {
    // 点击类别
    clickCategory(index, data) {
      console.log(12312312310);
      this.activeIndex = index;
      this.activeVal = this.messageCategory[index].category;
      // 点击全部还是已读还是未读
      this.selectCategory(data);
    },

    // 搜索事件
    onSearch(val) {
      console.log(val);
    },

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

    // 点击消息条目时的点击事件 变成已读
    read(data) {
      console.log("触发了点击事件");
      // 判断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);
        }
      });
    },

    // 请求消息接口方法
    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.Loop = setTimeout(
        function() {
          this.showIndex = index;
        }.bind(this),
        300
      ); // 这里的1000是指需要长按的时间，单位为ms
    },
    touchend(index) {
      // 这个方法主要是用来将每次手指移出之后将计时器清零
      clearTimeout(this.Loop);
    },

    // 详情
    goDetail(data) {
      console.log(data);
      this.showIndex = null;
    },
    // 删除
    goDelete(data) {
      console.log(123);
      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 {
    .van-cell-group--inset {
      margin: 0;
      margin-bottom: 10px;
      padding: 10px;
      font-size: 13px;
      position: relative;

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