<template>
  <div class="chat--message-complete">
    <div class="chat--message-complete__title row">
      <span class="mdi mdi-bell-outline"/>
      The service has been completed
    </div>
    <div class="chat--message-complete__details row">
      <!-- {{ offer_info }}
      <div>{{ offer_info.name }}</div>
      <div style="white-space: pre-line">{{ offer_info.description }}</div>
       -->
    </div>
    <div class="chat--message-complete__action row">
      <input type="button" value="Reject" @click="disagree()">
      <input type="button" value="Approve and rate" @click="review()">
    </div>
  </div>
</template>

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

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

  private info: any = { };

  // get product_name() {
  //   if (!this.message) {
  //     return '';
  //   }
  //   return this.offer_info.name;
  // }
  // get provider_nickname() {
  //   if (!this.message) {
  //     return '';
  //   }
  //   return this.offer_info.provider.nickname;
  // }

  public review() {
    // FIXME: hardcoded stuff that only works for bessern
    let dest = `/review-service/${this.info.transactionId}`;
    this.$root.$router.push(dest);
  }

  public mounted() {
    try {
      this.info = JSON.parse(this.message.content || '');
      console.error('[Chat] Complete request message parsed', this.info);
    } catch (e) {
      console.error('[Chat] unable to parse Complete request message content', this.message.content , e);
      this.info = {};
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>
