<template>
  <div class="LimitIndicator">
    <q-icon
      v-if="tooltips.length"
      class="LimitIndicator-WarningIcon"
      name="pgs-warning"
    >
      <q-tooltip>
        <div v-for="tooltip in tooltips" :key="tooltip">
          {{ tooltip }}
        </div>
      </q-tooltip>
    </q-icon>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { StateRecruitV3 } from '@/recruits/openapi/person-registry';

/** Компонент отвечающий за индикацию ограничения призыва на военную службу.
 * @param  stateRecruit {StateRecruitV3} props */
@Component({})
export default class LimitIndicator extends Vue {
  @Prop({ required: true, type: Object }) stateRecruit: StateRecruitV3;

  get tooltips(): string[] {
    const tooltips = [];
    if (this.stateRecruit) {
      if (this.stateRecruit.recruitmentCommercialInfo)
        tooltips.push(
          'Ограничение на вызов гражданина - Гражданин находится в местах лишения свободы'
        );
      if (
        !this.stateRecruit.recruitmentEighteen ||
        this.stateRecruit.recruitmentConscriptionDisable
      )
        tooltips.push(
          'Ограничение на призыв на военную службу - Не подлежит призыву по возрастному ограничению'
        );
    }
    return tooltips;
  }
}
</script>

<style lang="scss" scoped>
.LimitIndicator {
  display: flex;
  align-items: center;
  justify-content: center;

  &-WarningIcon {
    font-size: 16px;
    padding: 2px;
    border-radius: 128px;
    background: rgba(253, 243, 237, 1);
    border: 1px solid rgba(255, 255, 255, 1);
    color: rgba(207, 95, 20, 1);
  }
}
</style>
