<script setup>
import { useUserStore } from '@/store/user'
const { userInfo } = useUserStore()

defineProps({
  item: {
    type: Object,
    required: true
  }
})

const emits = defineEmits(['imgHandler'])
const handleImg = (item) => {
  emits('imgHandler', item)
}
</script>

<template>
  <view w-full f-s-s mb-40 p-20 justify-end>
    <view flex-auto mr-28 flex-col items-end justify-end>
      <view>{{ userInfo.nickName }}</view>
      <view bg-white p-16 max-w-350 lh-28 text-28 rounded-12 mt-8>
        {{ item.content }}
      </view>
      <view v-if="item.picture" rounded-12 mt-16>
        <up-image
          :show-loading="true"
          :src="item.picture"
          width="120px"
          height="120px"
          @tap="handleImg(item)"
        />
      </view>
    </view>
    <view flex-none>
      <UserAvatar size="35" />
    </view>
  </view>
</template>
