<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
          >
          <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>
          <!-- <van-search
          v-model="searchVal"
          placeholder="搜索"
          @search="onSearch"
          @confirm="onSearch"
        /> -->
        </div>

        <!-- 内容列表 -->
        <div class="con-list">
          <van-cell-group
            inset
            v-for="(item, index) in notificationList"
            :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="mse_title">
                  {{ item.title }}
                </div>
                <div class="message-content">
                  {{ item.content }}
                </div>
              </div>
            </van-badge>
          </van-cell-group>
          <van-image
            v-if="notificationList.length <= 0"
            fit="contain"
            :src="require('../../../assets/noMessage.png')"
          />
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

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

    // 点击类别
    selectCategory(index, data) {
      this.activeIndex = index;
      this.getNotificationSort();
      this.setMessage();
    },

    // 搜索事件
    onSearch(val) {
      if (this.activeIndex == 0) {
        let formData = new FormData();
        formData.append("status", 0);
        formData.append("keyword", this.searchVal);
        this.getNotificationList(formData);
      } else if (this.activeIndex == 1) {
        let formData = new FormData();
        formData.append("status", 1);
        formData.append("keyword", this.searchVal);
        this.getNotificationList(formData);
      } else if (this.activeIndex == 2) {
        let formData = new FormData();
        formData.append("keyword", this.searchVal);
        this.getNotificationList(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);
        readNotification(formData).then((res) => {
          if (res.code == 0) {
            this.getNotificationSort();
          }
        });
      }
    },
    //根据类别请求接口
    getNotificationSort() {
      if (this.activeIndex == 0) {
        let formData = new FormData();
        formData.append("status", 0);
        this.getNotificationList(formData);
      } else if (this.activeIndex == 1) {
        let formData = new FormData();
        formData.append("status", 1);
        this.getNotificationList(formData);
      } else if (this.activeIndex == 2) {
        this.getNotificationList();
      }
    },
    //请求通知全部公告列表
    getNotificationList(Data) {
      notificationList(Data).then((res) => {
        this.notificationList = res.rows;
      });
    },
    touchstart(index, item) {
      this.read(item);
      this.$router.push({
        name: "message-details",
        params: {
          id: JSON.stringify(item),
        },
      });
    },
    //清除未读
    clearNo() {
      this.$dialog
        .confirm({
          title: "提示",
          message: "确定清楚所有未读内容内容",
          confirmButtonColor: "#1989FA",
        })
        .then(() => {
          removeAllNotification()
            .then((res) => {
              if (res.code == "0") {
                this.$notify({ type: "success", message: "清楚成功" });
                this.$parent.$parent.$parent.$parent.getBadgeNumber();
                this.getNotificationSort();
              } 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 {
    .van-cell-group--inset {
      margin: 0;
      margin-bottom: 10px;
      padding: 10px;
      font-size: 13px;
      .mse_title {
        margin-top: 10px;
      }
      .message-content {
        margin-top: 10px;
        text-indent: 28px;
      }
      .messgae-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .bot_but {
        display: flex;
        justify-content: right;
        align-items: center;
      }
    }
  }
}
</style>
