<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: ['result'],

    data: function () {
      return {
        imgWidth: 1,
        imgHeight: 1,
        imgError: false,
      }
    },
    methods: {
      onImgError() {
        this.imgError = true;
      },
      loadImage(img) {
        if(this.$parent.$refs.rImageContainer) {
          var maxH = this.$parent.$refs.rImageContainer.clientHeight;
          var maxW = this.$parent.$refs.rImageContainer.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.result.media[0]){
          return (this.imgError) ? this.getDefaultImage(this.result.modell_kategorie) : this.adCDNPath(this.result.ident_nr_kunde, this.result.ident_nr_standort) + this.result.media[0]['datei'];
        }else{
          return this.getDefaultImage(this.result.modell_kategorie);
        }
      }
    }
  }
</script>