<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>
  <div class="dialog-footer">
      <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      <el-button type="primary" @click="saveToDesktop">保存到本地</el-button>
  </div>
  </el-dialog>
</template>

<script setup>
import {
  ref, // 响应式基础
  watch, // 侦听器
  onMounted, // 组件挂载完成后执行
  onUpdated, // 组件更新后执行
  onUnmounted, // 组件销毁前执行
} from "vue";
const props = defineProps({
  item: {
    type: Object,
    required: true
  }
});

// 保存到桌面
function saveToDesktop() {
  const link = document.createElement('a');
  link.href = props.item.payload.url;
  link.download = props.item.payload.filename;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

// 弹窗相关
const dialogVisible = ref(false);
function dialogVisibleClick() {
  dialogVisible.value = true;
}

const refname = ref('');
watch(refname, async (newQuestion, oldQuestion) => {
  // 变化后执行
});
onMounted(() => {
  // 组件挂载完成后执行
});
onUpdated(() => {
  // 组件更新后执行
});
onUnmounted(() => {
  // 组件销毁前执行
});
</script>

<style scoped>
.picture-message{
  padding: 0;
  margin: 0;
  /* display: inline-block; */
  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>