<template>
  <div class="picture-message" @click="dialogVisibleClick">
    <img class="picture-message-img" :src="item.payload.url" alt="">
  </div>
  <el-dialog v-model="dialogVisible" fullscreen>
    <div class="dialog-content">
      <img class="dialog-img" :src="item.payload.url" alt="">
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'

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

const dialogVisible = ref(false)

function dialogVisibleClick() {
  dialogVisible.value = true
}
</script>

<style scoped>
.picture-message {
  padding: 0;
  margin: 0;
  max-width: 100%;
  border-radius: 10px;
}
.picture-message-img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}
.dialog-content {
  width: 98vw;
  height: 95vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialog-img {
  max-width: 100%;
  height: auto;
  display: block;
}
</style>
