<template>
  <div class="flex items-center justify-center text-gray-400">{{ formatDate(message.createTime) }}</div>
  <div class="flex py-3 px-4 items-center" :class="message?.receiverId == userInfo.id ? 'flex-row' : 'flex-row-reverse'">
    <div class="rounded-full text-white flex items-center justify-center text-xl font-medium">
      <SvgIcon name="service" class="w-12 h-12 text-blue-400" v-if="message?.receiverId == userInfo.id" />
      <el-avatar size="large" v-if="message?.senderId == userInfo.id">
        <span class="text-3xl">{{ userInfo.username ? userInfo.username[0] : 'U' }}</span>
      </el-avatar>
    </div>
    <div class="mx-2 bg-green-100 rounded-lg">
      <div class="flex flex-col items-center justify-center px-3 py-3">
        <div class="flex flex-col items-start justify-center">
          <span v-if="message.type == 1" class="text-base break-all whitespace-break-spaces">{{ message.content }}</span>
          <div class="demo-image__preview">
            <el-image v-if="message.type == 2"
              style="width: 100px; height: 100px"
              :src="message?.content"
              :preview-src-list="[message?.content]"
              :initial-index="0"
              fit="cover" >
              <template #placeholder>
                    <div class="image-slot">Loading<span class="dot">...</span></div>
                  </template>
            </el-image>
          </div>
        </div>
      </div>
    </div>
    <div class="flex items-center justify-center" v-if="message?.senderId === userInfo.id ">
      <SvgIcon name="check" class="w-5 h-5 text-indigo-400" v-if="(message?.status as number) == 2" />
      <SvgIcon name="check-circle" class="w-5 h-5 text-indigo-400" v-if="(message?.status as number) > 2" />
      <SvgIcon name="arrow-path" class="w-5 h-5 text-indigo-400 spin" v-if="(message?.status as number) < 2" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUserInfoStore } from '@/stores/message'
import type { Message } from '@/types/global'
import { ref, type PropType } from 'vue'
import { formatDate } from '@/utils/formatTime'
import SvgIcon from "@/components/SvgIcon.vue";
defineProps({
  message: {
    type: Object as PropType<Message>,
  },
})
const userInfoStore = useUserInfoStore()
const userInfo = userInfoStore.getUserInfo()
</script>

<style scoped>
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 2s linear infinite;
}
</style>
