<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" @change="changeTab">
        <van-tab :title="`消息提醒(${dangerNewsNum})`" name="消息提醒">
          <info-tip @getList="getBadgeNumber"></info-tip>
        </van-tab>
        <!-- <van-tab title="预警提醒" name="预警提醒" >
            <Warning></Warning>
        </van-tab> -->
        <!-- <van-tab title="SOS求救" name="SOS求救">
            <Iso></Iso>
        </van-tab> -->
        <van-tab :title="`待办事项(${messageNewsNum})`" name="待办事项">
          <wait-event @getList="getBadgeNumber"></wait-event>
        </van-tab>
      </van-tabs>
    </div>

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

<script>
import infoTip from "./infoTip";
import waitEvent from "./waitEvent";
// import Warning from "./warning";
// import Iso from "./iso";
import {
  badgeNumber,
} from "@/service/message";
import tabBar from "@/components/TabBar";
export default {
  components: {
    infoTip,
    waitEvent,
    // Iso,
    tabBar,
    // Warning
  },
  data() {
    return {
      activeName: "消息提醒",
      messageNewsNum:0,
      dangerNewsNum:0,
    };
  },
  mounted() {
    this.getBadgeNumber()
    // 判断路由跳转有没有带text
    if (this.$route.params.text) {
      this.activeName = this.$route.params.text;
    } else {
      // 判断缓存中有没有infoActiveName
      let currentTab = sessionStorage.getItem("infoActiveName");
      switch (currentTab) {

        case "预警提醒":
          this.activeName = "预警提醒"
          break;
        case "SOS求救":
          this.activeName = "SOS求救"
          break;
        case "待办事项":
          this.activeName = "待办事项"
          break;
        default:
          this.activeName = "消息提醒"
          break;
      }
    }
  },
  beforeRouteLeave(to, from, next) {
    // 如果取得路由地址是 save-workbench 则清空session缓存
    if (to.name == "save-workbench" || to.name == "my") {
      sessionStorage.removeItem("infoActiveName");
    }
    next();
  },
  methods: {
    changeTab(title) {
      this.showIndex = null;
      // 把点击的页卡名字纯到缓存中
      sessionStorage.setItem("infoActiveName", title);
    },
    //获取未读消息数
    getBadgeNumber() {
      badgeNumber().then(res => {
        this.messageNewsNum = res.data.待办事项;
        this.dangerNewsNum= 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;
  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>
