<template>
  <img
    :items="items"
    class="fancy"
    :src="filename" 
    :width="imgW"
    :height="imgH"
    @load="loadImage"
    @error="onImgError()"
    @click="$emit('imageClick', $event)"
  >
</template>

<script>
  import PathMixin from '../mixins/PathMixin.js'
  import defaultImageMixin from '../mixins/defaultImageMixin.js'
  // import VuePictureSwipe from './vue3-picture-swipe/VuePictureSwipe.vue';
  // import VuePictureSwipe from './vue3-picture-swipe/main.js';

  export default {
    mixins: [PathMixin, defaultImageMixin],
    components: {
      // 'vue-picture-swipe': VuePictureSwipe,
    },
    props: {
      imgOffset: {
        type: Number,
        required: true
      },
      container: {
        type: String,
        required: true,
      },
      prefix: {
        type: String,
        required: true,
        default: '',
      }
    },
    data: function () {
      return {
        imgWidth: 1,
        imgHeight: 1,
        imgError: false,
        // items: [{
        //   src: 'http://via.placeholder.com/600x400',
        //   thumbnail: 'http://via.placeholder.com/64x64',
        //   w: 600,
        //   h: 400,
        //   alt: 'some numbers on a grey background' // optional alt attribute for thumbnail image
        // },
        // {
        //   src: 'http://via.placeholder.com/1200x900',
        //   thumbnail: 'http://via.placeholder.com/64x64',
        //   w: 1200,
        //   h: 900,
        //   htmlAfterThumbnail: '<span class="photos-date">29.12.2021</span>' // optional, insert your html after tag <a> if you need it
        // }],
      }
    },
    methods: {
      onImgError() {
        this.imgError = true;
      },
      loadImage(img) {
        // img.target.dataset.origw = img.srcElement.naturalWidth;
        // img.target.dataset.origh = img.srcElement.naturalHeight;
        img.target.dataset.fullp = this.marktplatzCDNPath(this.$store.state.details.ident_nr_kunde, this.$store.state.details.ident_nr_standort) + this.$store.state.details.rel_pictures[this.imgOffset]['datei'];
        var c = this.$parent.$refs[this.container];
        if(Array.isArray(c)) {
          c = c[0];
        }
        var maxH = c.clientHeight;
        var maxW = c.clientWidth;
        var imgW = img.srcElement.naturalWidth;
        var imgH = img.srcElement.naturalHeight;
        var t1 = maxW / imgW;
        var t2 = maxH / imgH;
        if(t1 > t2) {
          this.imgWidth = imgW * t2;
          this.imgHeight = imgH * t2;
        }else{
          this.imgWidth = imgW * t1;
          this.imgHeight = imgH * t1;
        }
      },
    },
    mounted() {
    },
    computed: {
      imgW: function() {
        return this.imgWidth;
      },
      imgH: function() {
        return this.imgHeight;
      },      
      pSize() {
      },
      filename() {
        if(this.$store.state.details.rel_pictures[this.imgOffset]){
          return (this.imgError) ? this.getDefaultImage(this.$store.state.details.modell_kategorie) : this.marktplatzCDNPath(this.$store.state.details.ident_nr_kunde, this.$store.state.details.ident_nr_standort) + this.prefix + this.$store.state.details.rel_pictures[this.imgOffset]['datei'];
        }else{
          return this.getDefaultImage(this.$store.state.details.modell_kategorie);
        }
      }
    }
  }
</script>