<template>
  <div class="dialog" v-if="visible">
    <div v-if="type === 1" class="content">
      <img
        width="680"
        height="705"
        :src="imageUrl"
      />
      <img
        class="close"
        src="https://files.yunqueyi.com/image/svg+xml/common/20240704144219420.svg"
        @click="close"
      />
    </div>
    <img v-if="type === 2" width="680" height="474" :src="imageUrl" />
  </div>
</template>

<script>
export default {
  name: 'SysUpgradeDialog',
  data: function() {
    return {
      type: 1,
      visible: false,
      imageUrl: null,
      defaultImageUrl: 'https://files.yunqueyi.com/image/png/common/2024070411371293.png',
    };
  },
  methods: {
    open(type, imageUrl) {
      this.visible = true;
      this.type = type;
      this.imageUrl = imageUrl || this.defaultImageUrl;
    },
    close() {
      this.visible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.dialog {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(2, 2, 2, 0.6);
  z-index: 999999;

  img {
        display: block;
    }
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .close {
        width: 62px;
        height: 62px;
        margin-top: 32px;
    }
}

</style>
