<template>
  <div style="width: calc(100vw - 74px)" class="flex justify-start items-start">
    <div class="shrink-0 w-40 h-40 border rounded-[4px]">
      <img class="w-full h-full" :src="itemData.haeadImage" alt="" />
    </div>
    <template v-if="itemData?.type == 'text'">
      <div class="inline-block w-0 h-0 mt-10 border-[8px] border-transparent border-r-white"></div>
      <ChatText item-data="" @on-delete="$emit('onDelete')"></ChatText>
    </template>
    <!-- <template v-if="itemData?.type == 'image'"> -->
    <div class="ml-10 max-w-251 border">
      <img
        class="w-full h-full object-contain"
        src="../../assets/img/comment/H5_default.png"
        alt=""
      />
      <!-- <ChatImage :item-data="_default" @on-delete="$emit('onDelete')" /> -->
    </div>
    <!-- </template> -->
    <template v-if="itemData?.type == 'like'"></template>
  </div>
</template>

<script setup>
defineProps({
  itemData: {
    type: Object,
    default: () => ({})
  }
})

defineEmits(['onDelete'])
</script>

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