<template>
  <img
    class=""
    :src="filename" 
    :width="imgW"
    :height="imgH"
    @load="loadImage"
    @error="onImgError()"
  >
</template>

<script>
  import PathMixin from '../mixins/PathMixin.js'
  import defaultImageMixin from '../mixins/defaultImageMixin.js'

  export default {
    mixins: [PathMixin, defaultImageMixin],
    props: ['details', 'imgOffset', 'container'],

    data: function () {
      return {
        imgWidth: 1,
        imgHeight: 1,
        imgError: false,
      }
    },
    methods: {
      onImgError() {
        this.imgError = true;
      },
      loadImage(img) {
        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.details.pictures[this.imgOffset]){
          return (this.imgError) ? this.getDefaultImage(this.details.modell_kategorie) : this.adCDNPath(this.details.ident_nr_kunde, this.details.ident_nr_standort) + this.details.pictures[this.imgOffset]['datei'];
        }else{
          return this.getDefaultImage(this.details.modell_kategorie);
        }
      }
    }
  }
</script>