<template>
  <div>
    <!-- 政务端消息通知数量 -->
    <!-- 大于0的时候显示的图标 -->
    <el-badge :is-dot="countstwo > 0" class="item" v-if="checkRole(['common'])">
      <img src="@/assets/images/icon-tz@2x.png" alt="">
    </el-badge>
    <!-- 企业端消息通知数量 -->
    <el-badge :is-dot="counts > 0" class="item" v-if="showCompanySection">
      <img src="@/assets/images/icon-tz@2x.png" alt="">
    </el-badge>
  </div>
</template>

<script>
import { checkRole } from "@/utils/permission";
import { getMessageCount, getMessageCounttwo } from '@/api/ManageApi/index'

export default {
  data() {
    return {
      counts: 0,
      countstwo: 0,
    }
  },
  computed: {
    showCompanySection() {
      const isCompany = this.checkRole(['company']);
      const isCommon = this.checkRole(['common']);
      // 如果两个角色都存在，则隐藏企业端
      return isCompany && !isCommon;
    }
  },
  mounted() {
    this.getCounts();
    this.getCountstwo();
  },
  methods: {
    checkRole,
    // 获取数据
    async getCounts() {
      try {
        const response = await getMessageCount();
        if (response && response.code === 200) {
          this.counts = response.data; // 将消息数量赋值给 counts
        } else {        }
      } catch (error) {}
    },
    // 获取数据
    async getCountstwo() {
      try {
        const response = await getMessageCounttwo();
        if (response && response.code === 200) {
          this.countstwo = response.data; // 将消息数量赋值给 counts
        } else {        }
      } catch (error) {      }
    },
  }
}
</script>

<style scoped>
.item {
  margin-right: 10px;
  margin-top: .5rem;

  .el-dropdown-link {
    cursor: pointer;
    color: black;
  }

  img {
    width: 1.5rem;
    height: 1.6rem;
  }

  .el-dropdown-link i {
    font-size: 1rem;
    /* 增大图标的大小 */
  }
}
</style>