<template>
  <el-dialog :visible.sync="dialogVisible" class="picture-preview">
    <div class="picture" :style="'background-image:url(' + src + ')'"></div>
  </el-dialog>
</template>

<script>
export default {
  name: 'PicturePreview',
  props: {
    visible: {
      type: Boolean,
    },
    src: {
      type: String,
      default: ''
    }
  },
  computed: {
    dialogVisible: {
      get: function () {
        return !!this.visible
      },
      set: function () {
        this.$emit('close')
        if (this.dialogVisible === false) {
          this.$emit('close')
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.picture {
  width: 910px !important;
  height: 670px !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  @media screen and (max-width: 1366px) {
    width: 600px !important;
    height: 460px !important;
  }
}
</style>

<style scoped>
.picture-preview /deep/ .el-dialog {
  width: 950px !important;
  margin-top: 10vh !important;
}

@media screen and (max-width: 1366px) {
  .picture-preview /deep/ .el-dialog {
    width: 640px !important;
  }
}
</style>
