<template>
  <div class="snapshot-img">
    <template v-if="imageData.snapshotId">
      <datav-cover
        :fileId="imageData.snapshotId"
        :key="imageData.snapshotId ? imageData.snapshotId : imageData.id"
        :fit="fit"
        class="template-item_img"
      />
    </template>
    <template v-else>
      <img :src="noDataImg" class="template-local_img" />
    </template>
  </div>
</template>

<script>
const DatavCover = () => import('@/components/portal/datav/DatavCover.vue')

export default {
  name: 'SnapshotImg',
  components: {DatavCover},
  props: {
    imageData: {
      type: Object,
      default: () => {}
    },
    fit:{
      type: String,
      default: 'contain'
    }
  },
  data() {
    return {
      noDataImg:require(`@/assets/nodata_images/picture-no-data.jpg`)
    }
  },
  computed: {},

  watch: {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.snapshot-img {
  .template-item_img {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .template-local_img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
</style>
