<template>
  <div class="flex items-center justify-center text-gray-400">{{ formatDate(message.createTime as number) }}</div>
  <div class="flex py-3 px-4 items-center" :class="message?.senderId != userInfo.id ? 'flex-row-reverse' : 'flex-row'">
    <div class="rounded-full shrink-0 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?.senderId != userInfo.id" />
      <el-avatar size="large" v-if="message?.senderId == userInfo.id" style="background: rgb(99 ,102 ,241)">
        <span class="text-3xl ">{{ userInfo.username ? userInfo.username[0] : 'U' }}</span>
      </el-avatar>
    </div>
    <div class="mx-2 max-w-3/5 bg-green-100 rounded-lg">
      <el-popover placement="top" :width="60" :trigger="!message.isRetracted ? 'hover' : 'contextmenu'" effect="dark" >
        <div class="flex items-center justify-center">
          <el-dialog v-model="dialogVisible" width="30%" center>
            <span>是否确认撤回消息?</span>
            <template #footer>
              <span>
                <el-button @click="dialogVisible = false">Cancel</el-button>
                <el-button color="rgb(79,70,229)" @click="recallMessage(message)">确定</el-button>
              </span>
            </template>
          </el-dialog>
          <button class="text-white" @click="dialogVisible = true">撤回</button>
        </div>
        <template #reference>
          <div class="flex flex-col items-center justify-center w-full px-3 py-3">
            <div class="flex flex-col items-start justify-center">
              <span v-if="message.type == 1 || message.type == 100" class="text-base 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"
                  :zoom-rate="2"
                  :preview-src-list="[message?.content]"
                  :initial-index="0"
                  :lazy="false"
                  fit="cover">
                  <template #placeholder>
                    <div class="image-slot">Loading<span class="dot">...</span></div>
                  </template>
                </el-image>
              </div>
              <div class="h-[1px] bg-gray-300 w-full my-2 " v-if="message.type == 1"></div>
              <span v-if="message.type == 1" class="whitespace-break-spaces">{{ message.translatedContent }}</span>
            </div>
          </div>
        </template>
      </el-popover>
    </div>
    <div class="flex items-center justify-center">
      <SvgIcon name="success-singleton" class="w-4 h-4 text-indigo-300" v-if="!message.isRead && !message.isRetracted"/>
      <SvgIcon name="success-multiple" class="w-4 h-4 text-indigo-300" v-if="message.isRead && !message.isRetracted"/>
      <div v-if="message.isRetracted" class="bg-indigo-50 p-1.5 rounded-md text-xs">已撤回</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Message } from '@/types/global'
import type { PropType } from 'vue'
import { useUserInfoStore } from '@/stores/counter'
import { formatDate } from '@/utils/formatTime'
import { ref } from 'vue'
import SvgIcon from "@/components/SvgIcon.vue";

const userInfoStore = useUserInfoStore()
const userInfo = userInfoStore.getUserInfo()

const dialogVisible = ref(false)

const emits = defineEmits(['recallMessage'])

const recallMessage = (item: Message) => {
  item.type = 100
  message.type = 100
  item.isRetracted = true
  item.username = userInfo.username
  emits('recallMessage', item)
  dialogVisible.value = false
}

const { message } = defineProps({
  message: {
    type: Object as PropType<Message>,
    required: true,
  },
})
</script>

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

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