<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter();
const props = defineProps({
  critical: {
    type: Number,
    required: true,
    default: 0,
  },
  major: {
    type: Number,
    required: true,
    default: 0,
  },
  minor: {
    type: Number,
    required: true,
    default: 0,
  },
  theme: {
    type: String,
    default: 'default',
  },
});

function goToAlarmPage() {
  router.push('/navigate/maintenance/alarm');
}
</script>
<template>
  <div id="alarmCountContainer" class="alarm-container" @click="goToAlarmPage">
    <div class="nav-warn-item alarm-icon">
      <el-tooltip
        :content="
          props.critical > 0 || props.major > 0 || props.minor > 0
            ? $t('IRM_HOME_ALARM')
            : $t('HEADER_NO_WARNING')
        "
        trigger-keys
      >
        <i class="alarm-uniE900" :class="`${theme}-warn`"></i>
      </el-tooltip>
    </div>
    <div
      v-if="props.critical && props.critical > 0"
      id="alarmCountCritical"
      class="nav-warn-item critical-alarm"
    >
      <span>{{ props.critical > 99 ? '99+' : props.critical }}</span>
    </div>
    <div
      v-if="props.major && props.major > 0"
      id="alarmCountMajor"
      class="nav-warn-item major-alarm"
    >
      <span>{{ props.major > 99 ? '99+' : props.major }}</span>
    </div>
    <div
      v-if="props.minor && props.minor > 0"
      id="alarmCountMinor"
      class="nav-warn-item minor-alarm"
    >
      <span>{{ props.minor > 99 ? '99+' : props.minor }}</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.alarm-container {
  display: flex;
  height: 100%;
  align-items: center;
  padding-right: 4px;
  .nav-warn-item {
    display: inline-block;
    margin-right: 2px;
    text-align: center;
    i {
      font-size: 22px;
      color: var(--o-text-color-tertiary);
      vertical-align: middle;
    }
    &:last-child {
      margin-right: 0;
    }
    span {
      vertical-align: middle;
      color: #fffffe;
      line-height: 16px;
    }
  }

  .critical-alarm {
    width: 30px;
    background-color: var(--o-color-danger);
    border-radius: 2px;
  }

  .major-alarm {
    width: 30px;
    background-color: var(--o-color-major);
    border-radius: 2px;
  }

  .minor-alarm {
    width: 30px;
    background-color: var(--o-color-warning);
    border-radius: 2px;
  }
  .alarm-icon {
    width: 24px;
    padding: 0 3px;
  }
}

.standard-warn {
  &:before {
    color: #fffffe !important;
  }
}

.ibma-warn {
  &:before {
    color: #fffffe !important;
  }
}

.beautiful-warn {
  &:before {
    color: #fffffe !important;
  }
}
</style>
