<template>
  <div>
    <div ref="previewCanvas" style="height:72px;width:72px;" />
  </div>
</template>

<script>
import * as cornerstone from 'cornerstone-core'

export default {
  props: {
    // eslint-disable-next-line vue/require-default-prop
    imageId: String
  },

  mounted() {
    var previewCanvas = this.$refs.previewCanvas
    cornerstone.enable(previewCanvas)
    cornerstone.loadImage(this.imageId).then(function(image) {
      cornerstone.displayImage(previewCanvas, image)
    })
  }
}
</script>

<style lang="scss" scoped>
  .preview-image {
    width: 100%;
  }
</style>
