<template>
  <div
    class="mx-12 py-8 mb-20 box-border border-b-[1px] border-dashed flex justify-between itmes-start"
  >
    <div class="w-265 shrink-0 box-border flex justify-start itmes-start">
      <div class="w-32 h-32 shrink-0 rounded-full mr-8 overflow-hidden">
        <img
          v-if="userInfo?.headImageUrl"
          class="w-full h-full object-cover"
          :src="userInfo?.headImageUrl"
          alt=""
        />
        <img
          v-else
          class="w-full h-full object-cover"
          src="https://www.xiaoyaotravel.com/_nuxt/default_avatar.gSq5JxK1.png"
          alt=""
        />
      </div>

      <div class="w-223">
        <div class="-mt-5 line-clamp-1 text-sm text-black-6 pr-4">
          {{ userInfo?.showName }}
        </div>
        <h1
          v-if="itemData.messageConten"
          class="w-full font-semibold line-clamp-2 text-black-3 text-base"
        >
          <template v-if="itemData.noticeType == 12">回复:</template>
          <template v-if="itemData.noticeType == 6">评论:</template>
          {{ itemData.messageConten }}
        </h1>
        <p class="text-black-9 text-sm">{{ itemData.creatTime }}</p>
      </div>
    </div>
    <NuxtLink
      itemData
      :to="itemData.businessType == 1 ? `/yj/${itemData.businessId}` : '/'"
      class="block w-71 ml-17 h-47 shrink-0 rounded-[4px] overflow-hidden"
    >
      <img
        v-if="itemData?.imageUrl"
        class="w-full h-full object-cover"
        :src="itemData?.imageUrl"
        alt=""
      />
      <img
        v-else
        class="w-full h-full object-cover"
        src="~/assets/img/comment/H5_default.png"
        alt=""
      />
    </NuxtLink>
  </div>
</template>
<script setup>
defineProps({
  itemData: {
    type: Object,
    default: () => ({})
  },
  userInfo: {
    type: Object,
    default: () => ({})
  }
})
</script>

<style lang="scss" scoped></style>
