<script setup>
import TicketApi from "@/services/TicketApi.js";
import {onMounted, ref} from 'vue';
import {codeTicket} from "@/setup/global";

const props = defineProps({
  idTicket: [Number,String],
  codeTicket : [Number,String],
})

const messages = ref([])

onMounted(async () => {
  messages.value = await TicketApi.getMessages(props.codeTicket, props.idTicket)
})


</script>

<template>
   <div v-if="messages.length >0" class="container-fluid">

         <div class="col-lg-12">
           <div class="chat-app">
             <div id="plist" class="people-list">

               Menu / to do

             </div>
             <div class="chat">
               <div class="chat-header clearfix">
                 <div class="row">
                   <div class="col-lg-6">
                     <a href="javascript:void(0);" data-toggle="modal" data-target="#view_info">
                       <img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="avatar">
                     </a>
                     <div class="chat-about">
                       <h6 class="m-b-0">Aiden Chavez</h6>
                       <small>Last seen: 2 hours ago</small>
                     </div>
                   </div>
                   <div class="col-lg-6 hidden-sm text-end">
                     <a href="javascript:void(0);" class="btn btn-outline-secondary me-2"><i class="fa-solid fa-camera"></i></a>
                     <a href="javascript:void(0);" class="btn btn-outline-primary me-2"><i class="fa-solid fa-image"></i></a>
                     <a href="javascript:void(0);" class="btn btn-outline-info me-2"><i class="fa-solid fa-cogs"></i></a>
                     <a href="javascript:void(0);" class="btn btn-outline-warning"><i class="fa-solid fa-question"></i></a>
                   </div>
                 </div>
               </div>
               <div class="chat-history">
                 <ul class="m-b-0">

                   <li class="clearfix" v-for="(message, i) in messages" :key="i">
                     <div class="message-data" :class="message.sender === 'pharma' ? 'text-end' : ''">
                       <span class="message-data-time">{{message.date}}</span>
                       <i class="fa-solid fa-circle-user ms-2 fa-2x text-primary" v-if="message.sender === 'client'"></i>
                     </div>
                     <div class="message" :class="message.sender === 'pharma' ? 'other-message float-end' : 'my-message'">

                       <strong v-if="message.object !== null">{{message.object}}<br/></strong>

                       <div v-if="message.htmlBody !== null" v-html="message.htmlBody"></div>
                       <div v-else>{{message.body}}</div>

                     </div>
                   </li>
                 </ul>
               </div>

               <div class="chat-message clearfix">
                 <div class="input-group mb-3">
                   <span class="input-group-text"><i class="fa-solid fa-paper-plane"></i></span>
                   <input type="text" class="form-control" placeholder="Entrer votre réponse">
                 </div>
               </div>
             </div>
           </div>
         </div>



   </div>
    <div v-else class="text-center mt-5">
     <i class="fa-solid fa-circle-notch fa-spin fa-fw text-primary fa-4x"></i>
    </div>
</template>

<style scoped>

</style>
