<template>
  <Panel :header="$t('گفتگو')">
    <!-- <DataTable :value="messages.ticketMessages">
            <Column field="content" :header="$t('متن تیکت')" />
            <Column field="id" :header="$t('id')" />
            <Column :field="({createdAt}) => jDate(createdAt)" :header="$t('createdAt')" />
                <Column :header="$t('options')" headerClass="w-32">
                    <template #body="{ data }">
                      <div class="flex justify-end">
                        <Button
                          icon="pi pi-reply"
                          rounded
                          text
                          severity="secondary"
                          @click="edit(data)"
                        />
                      </div></template></Column>
                      <template #empty>
                        <p>{{ store.fetching ? $t("loading") : $t("emptyTable") }}</p>
                      </template>
        </DataTable> -->

    <div v-for="item in messages.ticketMessages" :key="item.id">
      <!-- <Textarea :value="item.content" cols="30" disabled /> -->
      <Fieldset legend="متن تیکت" class="mb-8" :class="{'bg-gray-100' : item.createdBy.roles[0] === 'Admin'}">
        <p class="m-0">
          {{ item.content }}
        </p>
      </Fieldset>
    </div>
    <Editor v-model="value" editorStyle="height: 320px" />

    <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();
console.log(route.params.id);
const send = async (value) => {
  console.log(value);
  const sended = await store.reply({
    content: value,
    ticketId: route.params.id,
  });
  console.log('sended', sended);
};
watchEffect(async () => {
  messages.value = await store.ticket(route.params.id);
  console.log("mess", messages.value.ticketMessages);
});
</script>

