<template>
  <div class="detail-dialog">
    <n-modal
      v-model:show="showModal"
      @close="closeModal"
      :mask-closable="false"
    >
      <n-card
        style="width: 600px;text-align: center;"
        title="查看图片"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <div class="content-box">
          <img :src="props.detailSrc" alt="图片" />
        </div>
        <n-button @click="closeModal" class="create" quaternary> <div style="color: #fff;">确定</div> </n-button>
      </n-card>

    </n-modal>
  </div>
</template>

<script setup>
import { ref, defineProps, computed } from "vue";
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  detailSrc: {
    type: String,
    default: "",
  },
});
const emit = defineEmits("update:show", "close-dialog");
const showModal = computed({
  get: () => props.show,
  set: (value) => {
    emit("update:show", value);
  },
});
// 关闭弹窗
const closeModal = () => {
  emit("close-dialog", false);
};
</script>
<style scoped lang="scss">
.content-box {
  display: flex;
  height: 85%;
  justify-content: center;
  align-items: center;
  img {
    max-width: 450px;
    max-height: 600px;
  }
}
.create {
  margin-top: 50px;
  width: 260px;
  height: 55px;
  background: linear-gradient(260deg, #c448b8, #591df5);
  border-radius: 6px;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 5px;
}
</style>
