<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="selectCategory(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>
              <div class="messgae-title">隐患确认信息</div>
              <div class="message-content">
                张大海已确认一般隐患B类，右万宝宝负责整改。
              </div>
            </van-cell-group> -->
          <!-- </van-list>
        </van-pull-refresh> -->
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      messageCategory: [
        {
          key: "0",
          category: "全部"
        },
        {
          key: "1",
          category: "已读"
        },
        {
          key: "2",
          category: "未读"
        }
      ],
      activeIndex: 0,
      searchVal: "",
      // refreshing: false, // 下拉刷新开关
      // loading: false, // 列表滚动到底部会触发load事件
      // finished: false // 列表数据全部加载完成
    };
  },
  mounted() {},
  methods: {
    // 点击类别
    selectCategory(index, data) {
      this.activeIndex = index;
    },

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

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