<template>
  <div class="aos-image" :id="imageId">
    <img
      v-if="src"
      class="aos-image__inner"
      @click="click"
      :src="src" />
      <span v-else>暂无图片</span>
  </div>
</template>
<script>
  import 'viewerjs-optimize/dist/viewer-optimize.css';
  import Viewer from 'viewerjs-optimize';
  export default {
    name: 'AosImage',
    props: {
      imageId: {
        type: String,
        required: true
      },
      src: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        viewer: ''
      };
    },
    beforeDestroy() {
      this.destory()
      document.getElementById(this.imageId).removeEventListener('hidden');
    },

    methods: {
      click(){
        this.destory()
        this.viewer = new Viewer(document.getElementById(this.imageId), {
          className: 'aos-img-viewer-container ' + this.imageId
        });
      },
      destory(){
        if(this.viewer){
          this.viewer.destroy();
          this.viewer = null;
        }
      }
    }
  };
</script>
