<template>
  <div class="page">
    <h-navbar title="Notificação" />
    <div class="box">
      <van-tabs
        v-model:active="active"
        color="#fff"
        title-active-color="#fff"
        title-inactive-color="#fff"
      >
        <van-tab>
          <template #title>
            <div class="lingdang">
              <span style="font-size: 0.3rem">Plataforma</span>
              <h-img
                width=".5rem"
                type="local"
                class="imgBox"
                :src="active === 0 ? 'user/icon_ld.png' : 'user/icon_znx.png'"
              />
              <div class="num" v-show="noticesShow">
                {{ noticesShow }}
              </div>
            </div>
          </template>
          <Announcement @update-parent-value="updateNumValue" />
        </van-tab>
        <van-tab>
          <template #title>
            <div class="lingdang">
              <span style="font-size: 0.3rem">Pessoal</span>
              <h-img
                width=".5rem"
                type="local"
                class="imgBox"
                :src="active === 1 ? 'user/icon_yj2.png' : 'user/icon_yj.png'"
              />
              <div class="num" v-show="emailShow">
                {{ emailShow }}
              </div>
            </div>
          </template>
          <Email @update-parent-value="updateNumValue" />
        </van-tab>
      </van-tabs>
    </div>
    <bottom-tips />
  </div>
</template>
<script setup lang="ts">
import Email from "./emailPage/index.vue";
import Announcement from "./announcement/index.vue";
import socketApi from "@/socket/socketApi";
import { useUserStore } from "@/stores/modules/user";
const userStore = useUserStore();
import { ref, onMounted } from "vue";
import http from "@/https";
const emailShow = ref(0);
const noticesShow = ref(0);
const active = ref(0);
const checkNewMail = async () => {
  const res = await http.checkNewMail();
  if (res.code == 0) {
    emailShow.value = res.data.newMail;
  }
};
const checkNewNotice = async () => {
  const res = await http.checkNewNotice();
  console.log(res, "checkNewNotice");
  if (res.code == 0) {
    noticesShow.value = res.data.newNotice;
  }
};
const updateNumValue = (type: number) => {
  if (type === 1 && noticesShow.value !== 0) {
    noticesShow.value = noticesShow.value - 1;
    userStore.hasNewNotice(-1);
  } else if (type === 2 && emailShow.value !== 0) {
    emailShow.value = emailShow.value - 1;
    userStore.hasNewMail(userStore.newMail - 1);
  }
};
onMounted(async () => {
  await checkNewMail();
  await checkNewNotice();
});
</script>
<style lang="scss" scoped>
.page {
  height: 100%;
  ::-webkit-scrollbar {
    width: 5px;
    height: 12px;
  }
  .box {
    height: calc(100% - $nav-bar-height - 1.7rem);
    overflow: auto;
    padding: 0.1rem 0;
  }
  :deep(.van-tabs__line) {
    width: 50%;
    bottom: 0;
  }
  :deep(.van-tabs__nav) {
    background-color: #000;
    .van-tab--active {
      background-image: url("../../assets/img/base/button_02.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
  .lingdang {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    > .imgBox {
      margin-left: 0.1rem;
    }

    > .num {
      position: absolute;
      right: 0;
      background-color: #e77014;
      width: 0.35rem;
      height: 0.35rem;
      line-height: 0.35rem;
      text-align: center;
      color: #fff;
      border-radius: 50%;
      font-size: 0.3rem;
      top: 0;
    }
  }
}
</style>
