<template>
  <div class="flex items-center full-height" :class="{ ...alignmentCss }">
    <div class="container" :class="{ ...alignmentCss }">
        <div class="sub-container">
          <div class="prefix">
            <span>с</span>
          </div>
          <div>
            <date-time-cell :value="from" />
          </div>
        </div>

        <div class="sub-container">
          <div class="prefix">
            <span>по</span>
          </div>
          <div>
            <date-time-cell :value="to" />
          </div>
        </div>

    </div>
  </div>
</template>

<style lang="scss" scoped>

.container {
  display: inline-flex;
  flex-wrap: wrap;
  column-gap: 6px;
}
.sub-container {
  display: grid;
  grid-template-columns: minmax(0, 20px) minmax(0, auto);

  .label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    span {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .prefix {
    overflow: hidden;
    font-size: 14px;
    font-family: "Golos UI", sans-serif;
    line-height: 20px;
    font-weight: 400;
    color: rgba(2, 12, 18, 0.58);      

    //span {
    //  &::after {
    //    content: "..........";
    //  }
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  //}
}
</style>

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

import DateTimeCell from './date-time.vue';

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

@Component({
  inheritAttrs: false,
  components: { DateTimeCell },
})
export default class PeriodCell extends Vue {

  @Prop({
    type: [String, Object],
    default: '',
  })
  public readonly from!: string | Moment;

  @Prop({
    type: [String, Object],
    default: '',
  })
  public readonly to!: string | Moment;

  @Prop({
    type: String,
    default: "left",
  })
  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>