<template>
  <div>
    <!-- 政务端消息通知数量 -->
     <!-- 大于0的时候显示的图标 -->
    <el-badge :is-dot="counts > 0" class="item" v-if="checkRole(['common'])">
      <el-dropdown trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
          <i class="el-icon-bell"></i>
        </span>
      </el-dropdown>
    </el-badge>
    <!-- 企业端消息通知数量 -->
    <el-badge  :is-dot="counts > 0" class="item" v-if="showCompanySection">
      <el-dropdown trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
          <i class="el-icon-bell"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            消息数量: {{ counts }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-badge>
  </div>
</template>

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

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

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

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

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