<template v-if="msg">
  <div class="chat-message" :class="msg.viewType ? 'chat-message--accept' : 'chat-message--send'">
    <div class="h-20 grid place-items-center text-center text-sm text-[#000]/40 mb-16">{{ msg.createTime }}</div>
    <div class="chat-message__content">
      <van-image
          v-if="msg.viewType === 1"
          :src="defaultAvatar"
          width="40px"
          height="40px"
          radius="100%"
          class="mr-8"
      ></van-image>
      <div  v-if="msg.viewType === 0" class="self-center text-sm mx-5 text-black-9">
        <van-loading v-if="sendStatus === 'loading'" size="16"/>
        <van-icon v-if="sendStatus === 'error'" name="warning"  size="16"/>
      </div>
      <div class="flex flex-col" :class=" msg.viewType ?  'items-start' : 'items-end'">
        <div v-if="showName && msg.viewType === 1" class="text-black-9 text-sm mb-2">{{ msg.nickName }}</div>
        <div class="flex-grow-0 w-fit">
          <TextMessage v-if="msg.type === 'text'" :message-content="msg.messageContent"
                       :view-type="msg.viewType"></TextMessage>
          <ImageMessage v-if="msg.type === 'image'" :message-content="msg.messageContent"
                        :view-type="msg.viewType"></ImageMessage>
          <AudioMessage v-if="msg.type === 'audio'" :message-content="msg.messageContent"
                        :view-type="msg.viewType"></AudioMessage>
          <LinkMessage v-if="msg.type === 'link'" :message-content="msg.messageContent"
                       :view-type="msg.viewType"></LinkMessage>
        </div>
      </div>
      <van-image
          v-if="msg.viewType === 0"
          :src="userInfo?.headImageUrl || defaultAvatar"
          width="40px"
          height="40px"
          radius="100%"
          class="ml-8"
      ></van-image>
    </div>
  </div>
</template>
<script setup>
import defaultAvatar from "~/assets/img/default_avatar.png";
import TextMessage from "~/pages/chat/chat-message/text-message/index.vue";
import ImageMessage from "~/pages/chat/chat-message/image-message/index.vue";
import AudioMessage from "~/pages/chat/chat-message/audio-message/index.vue";
import LinkMessage from "~/pages/chat/chat-message/link-message/index.vue";
import {findHyperlinks} from "~/pages/chat/chat-message/link-message/handle";

const userInfoStore = useUserInfoStore();
const {userInfo} = storeToRefs(userInfoStore);

const props = defineProps({
  message: Object,
  showName: {
    type: Boolean,
    default: false
  }
});
const msg = computed(() => {
  try {
    // console.log(props.message, 'msg')
    const {
      createTime,
      getUserId,
      sendUserId,
      messageContent,
      messageType,
      object = {headImageUrl: defaultAvatar, showName: '无名大侠'}
    } = props.message
    return {
      messageContent: messageContent,
      type: getMessageType(messageType, messageContent),
      viewType: sendUserId === userInfo?.value.pass ? 0 : 1,
      createTime: createTime,
      headImageUrl: object.headImageUrl,
      nickName: object.showName
    }
  } catch (e) {
    console.log(e, '??')
    return null
  }
})

const sendStatus = ref('success')
const handleSendStatus = () => {
  if (msg?.value.createTime) {
    sendStatus.value = ''
    return
  }
  sendStatus.value = 'loading'
  setTimeout(() => {
    if (!msg?.value?.createTime) {
      sendStatus.value = 'error'
    } else {
      sendStatus.value = 'success'
    }
  }, 2 * 1000)
}

onMounted(() => {
  handleSendStatus()
})


const getMessageType = (messageType, messageContent) => {
  const types = ['text', 'image', 'audio', 'video', 'link']
  if (messageType === 0 && findHyperlinks(messageContent)) return types[4]
  return types[messageType]
}
</script>
<style scoped lang="scss">
.chat-message {
  margin: 20px 0;

  .chat-message__content {
    width: max-content;
    display: flex;
  }

  &.chat-message--accept {
    .chat-message__content {
      margin-right: auto;
    }
  }

  &.chat-message--send {
    .chat-message__content {
      margin-left: auto;
    }
  }
}
</style>