<template>
  <div>
    <!-- 内容列表 -->
    <div class="con-list">
      <van-cell-group
        inset
        v-for="(item, index) in messageList"
        :key="index"
        @click="read(item)"
        @touchstart="touchstart(index, item)"
        @touchend.prevent="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>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messageList: [
        {
          noticeTitle: "隐患上报消息",
          upcomingUserName: "张某某",
          createUserName: "李某某",
          noticeTitle: "重要任务"
        }
      ],
      Loop: "", // 定时器
      showIndex: null // 是否显示遮罩层
    };
  },
  mounted() {},
  methods: {
    read() {},

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

    // 详情
    goDetail(data) {
      console.log(data);
      this.showIndex = null;
    },
    // 确认
    goConfirm(data) {
      console.log(data);
      this.$router.push("/affirm-danger");
      this.showIndex = null;
    }
  }
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
.con-list {
  padding: 10px 10px 0;
  background-color: #f0f1f5;
  .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>
