<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"
            :class="index == activeIndex ? 'active' : ''"
            v-for="(item, index) in messageCategory"
            :key="item.key"
            @click="clickCategory(index, item.category)"
            >{{ item.category }}</span
          >

          <span
            class="my-tag-style"
            v-if="messageNewsNum.消息信息 > 0"
            @click="clearNo()"
            >清除未读</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" @touchmove="showIndex = null">
          <!-- <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="touchstart(index, item)"
          >
            <van-badge :dot="item.status == 0 ? true : false">
              <div style="padding: 10px; min-width: calc(100vw - 1.6rem)">
                <!--@touchend.prevent="touchend(index)"  长按备份-->
                <div class="messgae-title">
                  <span>{{ item.title }}</span>
                  <span>{{ item.createTime }}</span>
                </div>
                <div class="message-content">
                  {{ item.messageBy }},您好！您有一条来自{{ item.menuName }}的{{
                    item.content
                  }}相关的待处理任务...
                </div>
              </div>
            </van-badge>
          </van-cell-group>
          <van-image
            v-if="messageList.length <= 0"
            fit="contain"
            :src="require('../../../assets/noMessage.png')"
          />
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import {
  postMessgaelist,
  noticeRemove,
  removeAllMessgae,
  removeMessgae,
} from "@/service/message";
export default {
  props: {
    actives: {
      type: String,
      default: () => "",
    },
    messageNewsNum: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      isLoading: false,
      show: false,
      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.activeIndex = sessionStorage.getItem("activeIndex")
      ? sessionStorage.getItem("activeIndex")
      : 0;
    this.setMessage();
    this.getMessageSort();
  },
  methods: {
    //下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
        this.getMessageSort();
        this.$parent.$parent.$parent.$parent.getBadgeNumber();
      }, 1000);
    },
    // 点击类别
    clickCategory(index, data) {
      this.activeIndex = index;
      this.getMessageSort();
      this.activeVal = this.messageCategory[index].category;
      // 点击全部还是已读还是未读
      this.setMessage();
    },

    // 搜索事件
    onSearch(val) {
      if (this.activeIndex == 0) {
        let formData = new FormData();
        formData.append("status", 0);
        formData.append("keyword", this.searchVal);
        this.getMessageList(formData);
      } else if (this.activeIndex == 1) {
        let formData = new FormData();
        formData.append("status", 1);
        formData.append("keyword", this.searchVal);
        this.getMessageList(formData);
      } else if (this.activeIndex == 2) {
        let formData = new FormData();
        formData.append("keyword", this.searchVal);
        this.getMessageList(formData);
      }
    },

    setMessage() {
      sessionStorage.setItem("activeNames", this.actives);
      sessionStorage.setItem("activeIndex", this.activeIndex);
    },

    read(data) {
      if (data.status == 0) {
        let formData = new FormData();
        formData.append("id", data.id);
        noticeRemove(formData).then((res) => {
          if (res.code == 0) {
            // 如果请求接口成功 则重新请求一下未读消息的条数
            this.getMessageSort();
          }
        });
      }
    },
    //根据类别请求接口
    getMessageSort() {
      if (this.activeIndex == 0) {
        let formData = new FormData();
        formData.append("status", 0);
        this.getMessageList(formData);
      } else if (this.activeIndex == 1) {
        let formData = new FormData();
        formData.append("status", 1);
        this.getMessageList(formData);
      } else if (this.activeIndex == 2) {
        this.getMessageList();
      }
    },
    // 请求消息接口方法

    getMessageList(Data) {
      postMessgaelist(Data).then((res) => {
        this.messageList = res.rows;
      });
    },

    touchstart(index, item) {
      this.read(item);
      this.$router.push({
        path: item.appUrl,
        query: {},
      });
    },

    //清除所有未读
    clearNo() {
      this.$dialog
        .confirm({
          title: "提示",
          message: "确定清楚所有未读内容内容",
          confirmButtonColor: "#1989FA",
        })
        .then(() => {
          removeAllMessgae()
            .then((res) => {
              if (res.code == "0") {
                this.$notify({ type: "success", message: "清楚成功" });
                this.$parent.$parent.$parent.$parent.getBadgeNumber();
                this.getMessageSort();
              } else {
                this.$notify({
                  type: "primary",
                  message: "没有未读消息可以清除",
                });
              }
            })
            .catch((err) => {
              console.log(
                "%c [ err ]",
                "font-size:13px; background:pink; color:#bf2c9f;",
                err
              );
            });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</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 {
    margin-top: 0.266667rem;
    .van-cell-group--inset {
      margin: 0;
      margin-bottom: 10px;
      padding: 10px;
      font-size: 13px;
      position: relative;
      .messgae-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

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