<template>
  <Panel :header="$t('گفتگو')">
    <div v-for="item in messages" :key="item.id" >
      <div class="card mb-8">
        <Panel toggleable>
            <template #header >
                <div class="flex items-center gap-2">
                    <Avatar v-if="item.createdBy.avatarMedia" :image="item.createdBy.avatarMedia" size="large" shape="circle" />
                    <Avatar v-else image="/src/assets/alt.png" size="large" shape="circle" />
                    <span v-if="item.createdBy.name" class="font-bold">{{item.createdBy.name}}</span>
                    <span v-else class="font-bold">کاربر بدون نام</span>
                    <Tag v-if="item.createdBy.roles[0] === 'Admin'" class="gap-1" icon="pi pi-user" severity="info" value="ادمین"></Tag>
                    <Tag v-else class="gap-1" icon="pi pi-user" severity="success" value="کاربر"></Tag>
                </div>
            </template>
            <template #footer>
                <div class="flex flex-wrap items-center justify-end">
                 
                    <span class="text-surface-500 dark:text-surface-400">{{ jDate(item.createdAt) }}</span>
                </div>
            </template>
        
            <p class="m-0">
        {{ item.content }}
            </p>
        </Panel>
    </div>
    </div>
    <Textarea v-model="value" placeholder="پاسخ..." class="w-full" rows="5" />
    <div class="flex pt-4 justify-end">
      <Button
        :label="$t('send')"
        icon="pi pi-send"
        severity="success"
        :loading="saving"
        @click="send(value)"
      />
    </div>
  </Panel>
</template>

<script setup>
import { ref, watchEffect } from "vue";
import { useRoute } from "vue-router";
const value = ref("");
import { useTicketsStore } from "@/stores/tickets";
import { jDate } from "@/utils/jDate";
const store = useTicketsStore();
const messages = ref([]);
const route = useRoute();

const send = async (value) => {
  const sended = await store.reply({
    content: value,
    ticketId: route.params.id,
  });

};
watchEffect(async () => {
 const data = await store.ticket(route.params.id);
 messages.value = data.ticketMessages.reverse()

});
</script>

