<template>
    <el-badge :class="['tjm_tools_icon', unReadCount > 9 && 'm-r-10']" :value="unReadCount" :show-zero="false" :offset="[-2, 3]" @click="goTodo">
        <el-icon size="24" :color="layoutStyle == 'horizontal' && '#fff'">
            <tjm-icon-ep-bell />
        </el-icon>
    </el-badge>
</template>

<script setup>
import mittBus from "@/utils/mittBus";
import { useSettingStore } from "@/store/settings";
const settingStore = useSettingStore();
const { layoutStyle } = storeToRefs(settingStore);

import { useUserStore } from "@/store/user";
const createId = ref(useUserStore().userInfo.id);

import API from "@/api/policy/toDo";
const unReadCount = ref(0);
const router = useRouter();
const route = useRoute();

onMounted(() => {
    mittBus.on("getMessage", () => getMessage());
});

getMessage();
function getMessage() {
    API.msg({ isRead: 0, createId: createId.value }).then(res => unReadCount.value = res.code === 200 && res.data.total || 0).catch(() => unReadCount.value = 0);
}

function goTodo() {
    if (route.path != "/myAffairs") router.push({ path: "/myAffairs", query: { element: "send" } });
    else mittBus.emit("LayoutNotice");
}
</script>

<style lang="scss" scoped>
.tjm_tools_icon {
  display: flex;
  align-items: center;
}

.m-r-10 {
  margin-right: 10px;
}
</style>