<template>
  <div class="row full-height items-center no-wrap date-time" :class="{ gray: !time, ...alignmentCss }">
    <q-icon :name="icon" size="20px" />
    <span class="text-no-wrap ellipsis">
      <span>
        {{ dateString }}
      </span>
      <span v-if="time" class="gray">
        {{ timeString }}
      </span>
    </span>
  </div>
</template>

<style lang="scss" scoped>
.date-time {
  color: rgba(2, 12, 18, 0.90);
  font-size: 14px;
  font-family: 'Golos UI', sans-serif;
  line-height: 16px;
  font-weight: 400;
}

.gray {
  //color: rgba(2, 12, 18, 0.58);
  color: rgba(2, 12, 18, 0.9);
}

// :not(.pgs-time) - Это просто иконка 'pgs-time' как-то плохо выравнивается с -1px
::v-deep i.pgs-icon:not(.pgs-time) {
  top: -1px;
}

</style>

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

import { formatDate } from '@/recruits/utils';

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

@Component({
  inheritAttrs: false,
  methods: { formatDate },
})
export default class DateTimeCell extends Vue {
  @Prop({
    type: [String, Object],
    default: '',
  })
  public readonly value!: string | Moment;

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

  @Prop({
    type: Boolean,
    default: false,
  })
  public readonly time!: boolean;

  @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',
    });
  }

  public get dateString(): string {
    if (this.value) {
      return formatDate(String(this.value), "DD.MM.YYYY");
    } else {
      return '‒‒.‒‒.‒‒‒‒';
    }
  }

  public get timeString(): string {
    if (this.value) {
      return formatDate(String(this.value), "HH:mm")
    } else {
      return '‒‒:‒‒';
    }
  }
}

</script>
