<template>
  <div>
    <LHeader :text="text"></LHeader>
    <van-cell-group inset>
      <div class="messgae-title">
        <span>{{ messageList.noticeTitle }}</span>
        <span>{{ messageList.sendTime }}</span>
      </div>
      <div class="message-content">
        {{ messageList.upcomingUserName }},您好！您有一条来自{{
          messageList.createUserName
        }}的{{ messageList.noticeTitle }}相关的待处理任务...
      </div>
    </van-cell-group>
  </div>
</template>

<script>
import { Toast } from "vant";
import LHeader from "@/components/header.vue";
export default {
  components: {
    LHeader,
  },
  data() {
    return {
      messageList: {},
      text: "消息详情",
      messageCategory: [
        {
          key: "0",
          category: "全部",
        },
        {
          key: "1",
          category: "已办",
        },
        {
          key: "2",
          category: "待办",
        },
      ],
      activeIndex: 0,
      searchVal: "",
      waitList: [], // 待办列表
      // refreshing: false, // 下拉刷新开关
      // loading: false, // 列表滚动到底部会触发load事件
      // finished: false // 列表数据全部加载完成
    };
  },
  mounted() {},
  created() {
    this.messageList = JSON.parse(this.$route.params.id);
    console.log(
      "%c [ this.messageList ]",
      "font-size:13px; background:pink; color:#bf2c9f;",
      this.messageList
    );
  },
  methods: {
    // 点击类别
    selectCategory(index, data) {
      this.activeIndex = index;
    },

    // 搜索事件
    onSearch(val) {
      if (val !== "") {
        console.log(this.search);
      }
    },

    //  // 下拉刷新事件
    // 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);
    // }
  },
};
</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;
      .message-content {
        margin-top: 10px;
      }
    }
  }
}
</style>
