<template>
  <div
    class="row full-height items-center no-wrap person"
    :class="{ 'not-set': !value, ...alignmentCss, [`align-${align}`]: align }"
    :style="`--icon-color: ${iconColor}`"
  >
    <q-icon :name="(value) ? icon : iconBlank" size="24px" />
    <span class="text-no-wrap ellipsis">
      <span>
        {{ value }}
      </span>
    </span>
  </div>
</template>

<style lang="scss" scoped>
.person {
  color: rgba(2, 12, 18, 0.90);
  font-size: 14px;
  font-family: 'Golos UI', sans-serif;
  line-height: 16px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;

  ::v-deep i.pgs-icon {
    color: var(--icon-color);
  }

  &.not-set {
    ::v-deep i.pgs-icon {
      color: rgba(2, 12, 18, 0.58);
    }
  }

}


</style>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

type CssClasses = { [key: string]: boolean };

@Component({
  inheritAttrs: false,
})
export default class PersonCell extends Vue {

  @Prop({
    type: String,
    default: '',
  })
  public readonly value!: string;

  @Prop({
    type: String,
    default: 'pgs-check',
  })
  public readonly icon!: string;

  @Prop({
    type: String,
    default: '#1491cf',
  })
  public readonly iconColor!: string;

  @Prop({
    type: String,
    default: 'pgs-close',
  })
  public readonly iconBlank!: string;

  @Prop({
    type: String,
    default: "center",
  })
  public readonly align!: string;

  public get alignmentCss(): CssClasses {
    return ({
      "justify-center": this.align === 'center',
      "justify-start": this.align === 'left',
      "justify-end": this.align === 'right',
    });
  }
}

</script>
