<template>
  <div>
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <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"
            show-action
            placeholder="请输入搜索内容"
            @search="onSearch"
          >
            <template #action>
              <div @click="onSearch">搜索</div>
            </template>
          </van-search>
        </div>

        <!-- 内容列表 -->
        <div class="con-list">
          <van-cell-group
            inset
            v-for="(item, index) in waitList"
            :key="index"
            @click="touchstart(index, item)"
          >
            <van-badge :dot="item.status == 0 ? true : false">
              <div style="padding: 10px; min-width: calc(100vw - 1.6rem)">
                <div class="messgae-title">
                  <span>{{ item.title }}</span>
                  <span>{{ item.createTime }}</span>
                </div>
                <div class="message-content">
                  {{ item.content }},{{ item.createBy }}
                </div>
                <div class="bot_but">
                  <van-button color="#33CCFF" size="mini">立即处理</van-button>
                </div>
              </div>
            </van-badge>
          </van-cell-group>
          <van-image
            v-if="waitList.length <= 0"
            fit="contain"
            :src="require('../../../assets/noMessage.png')"
          />
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import { Toast } from "vant";
import { waitList, removeWaitList } from "@/service/message";
export default {
  props: {
    actives: String,
    default: () => "",
  },
  data() {
    return {
      isLoading: false,
      messageCategory: [
        {
          key: "0",
          category: "待办",
        },
        {
          key: "1",
          category: "已办",
        },
        {
          key: "2",
          category: "全部",
        },
      ],
      activeIndex: 0,
      searchVal: "",
      waitList: [], // 待办列表
      // refreshing: false, // 下拉刷新开关
      // loading: false, // 列表滚动到底部会触发load事件
      // finished: false // 列表数据全部加载完成
    };
  },
  mounted() {},
  created() {
    this.activeIndex = sessionStorage.getItem("activeIndex")
      ? sessionStorage.getItem("activeIndex")
      : 0;
    this.getWaitSort();
    this.setMessage();
  },
  methods: {
    //下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
        this.getWaitSort();
        this.$parent.$parent.$parent.$parent.getBadgeNumber();
      }, 1000);
    },
    // 点击类别
    selectCategory(index, data) {
      this.activeIndex = index;
      this.getWaitSort();
      this.setMessage();
    },

    // 搜索事件
    onSearch(val) {
      if (this.activeIndex == 0) {
        let formData = new FormData();
        formData.append("status", 0);
        formData.append("keyword", this.searchVal);
        this.getWaitList(formData);
      } else if (this.activeIndex == 1) {
        let formData = new FormData();
        formData.append("status", 1);
        formData.append("keyword", this.searchVal);
        this.getWaitList(formData);
      } else if (this.activeIndex == 2) {
        let formData = new FormData();
        formData.append("keyword", this.searchVal);
        this.getWaitList(formData);
      }
    },
    setMessage() {
      sessionStorage.setItem("activeNames", this.actives);
      sessionStorage.setItem("activeIndex", this.activeIndex);
    },
    //根据类别请求接口
    getWaitSort() {
      if (this.activeIndex == 0) {
        let formData = new FormData();
        formData.append("status", 0);
        this.getWaitList(formData);
      } else if (this.activeIndex == 1) {
        let formData = new FormData();
        formData.append("status", 1);
        this.getWaitList(formData);
      } else if (this.activeIndex == 2) {
        this.getWaitList();
      }
    },

    // 请求消息接口方法
    getWaitList(Data) {
      waitList(Data).then((res) => {
        this.waitList = res.rows;
      });
    },

    touchstart(index, item) {
      this.$router.push({
        path: item.appUrl,
        query: {},
      });
    },
    //     // 加载完成后将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 {
  min-height: 58vh;
  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;
      font-size: 13px;
      padding: 10px;
      .message-content {
        margin-top: 10px;
      }
      .messgae-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .bot_but {
        display: flex;
        justify-content: right;
        align-items: center;
      }
    }
  }
}
</style>
