<template>
  <div>
    <!-- 头部标签 -->
    <van-sticky>
      <header class="header-wrap">消息中心</header>
    </van-sticky>

    <!-- 内容 -->
    <div class="con">
      <van-tabs
        v-model="activeName"
        color="#247df7"
        title-inactive-colo="#d0d1d1"
        title-active-color="#000000"
        sticky
        offset-top="1.333333rem"
        @click="onClick"
      >
        <van-tab
          title="待办事项"
          name="待办事项"
          :badge="messageNewsNum.待办事项 > 0 ? messageNewsNum.待办事项 : ''"
        >
          <wait-event :actives="activeName"></wait-event>
        </van-tab>
        <van-tab
          title="消息信息"
          name="消息信息"
          :badge="messageNewsNum.消息信息 > 0 ? messageNewsNum.消息信息 : ''"
        >
          <message-news
            :actives="activeName"
            :messageNewsNum="messageNewsNum"
          ></message-news>
        </van-tab>
        <van-tab
          title="通知公告"
          name="通知公告"
          :badge="messageNewsNum.通知公告 > 0 ? messageNewsNum.通知公告 : ''"
        >
          <notice-info
            :actives="activeName"
            :messageNewsNum="messageNewsNum"
          ></notice-info>
        </van-tab>
      </van-tabs>
    </div>

    <!-- tanBar -->
    <tab-bar :index="0"></tab-bar>
  </div>
</template>

<script>
import messageNews from "./messageNews";
import waitEvent from "./waitEvent";
import noticeInfo from "./noticeInfo";
import tabBar from "@/components/TabBar";
import { badgeNumber } from "@/service/message";
export default {
  components: {
    messageNews,
    waitEvent,
    noticeInfo,
    tabBar,
  },
  data() {
    return {
      activeName: "",
      messageNewsNum: {},
      searchValue: "",
    };
  },
  created() {
    this.activeName = sessionStorage.getItem("activeNames")
      ? sessionStorage.getItem("activeNames")
      : "";
    // this.activeName = actives;
    this.getBadgeNumber();
  },
  mounted() {},
  methods: {
    onClick(e) {
      this.activeName = e;
      sessionStorage.setItem("activeNames", e);
      sessionStorage.setItem("activeIndex", 0);
      this.getBadgeNumber();
    },
    onSearch() {
      console.log("[ 1111 ]", 1111);
    },
    //获取未读消息数
    getBadgeNumber() {
      badgeNumber().then((res) => {
        this.messageNewsNum = res.data;
      });
    },
  },
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
.header-wrap {
  width: 100%;
  height: 1.333333rem;
  background-color: #2980f7;
  font-size: 17px;
  line-height: 1.333333rem;
  color: white;
  font-weight: none;
  text-align: center;
}
.con {
  // height: calc(100% - 110px);
  // height: 100%;
  padding: 0 0 50px 0;
  background-color: #f0f1f5;
  position: relative;
  /deep/ .van-info {
    right: -6px;
    background-color: #fa4c4c;
  }
}
</style>
