<template>
    <div class="chat--messageinfo">
      <div :class="['chat--messageinfo-timestamp', {'sending': timestamp=='Sending'}]">{{timestamp}}</div>
      <div 
          class="chat--messageinfo-receipt">
          <div class="check1">✓</div>
          <!-- <span class="check2">✓</span> -->
        </div>
    </div>
</template>

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

@Component({
  components: { },
})
export default class MessageInfo extends Vue {
  // The message data
  @Prop() private message!: Message;


  get timestamp() {
    const timestamp = this.message.timestamp || '';
    console.warn('timestamp', timestamp);
    const regex = /(\d\d:\d\d):\d\d/g;
    const result = regex.exec(timestamp);
    return result ? result[1] : 'Sending';
  }
}
</script>