Vue.component('blur-image', {
  props: {
    src: {
      type: String,
      default: "#",
    },
    alt: {
      type: String,
      default: 'Image',
    },
    ratio: {
      type: Number,
      default: 3,
    },
    contain: {
      type: Boolean,
      default: true,
    }
  },
  methods: {
    getImageAlias (src = "#", option = "") {
      if ((src||"").includes("<?=$host_url;?>")) {
        return src.substring(0, (src||"").lastIndexOf("."))+"_"+option+src.substring((src||"").lastIndexOf("."))
      } else {
        return src;
      }
    },
  },
  template:
`<div class="ratio" :style="'position:relative;width:100%;height:0;overflow:hidden;padding-bottom:'+(100/ratio)+'%;'">
  <div class="content blur-img" style="width:100%;height:100%;position:absolute;" v-if="ratio>1.91">
    <v-img 
      :lazy-src="getImageAlias(src,'ph')"
      :src="src"
      :alt="'Blured '+alt" 
      :aspect-ratio="ratio"
      style="height:100%;" 
    ></v-img>
  </div>
  <div class="content" style="width:100%;height:100%;position:absolute;">
    <v-img 
      :contain="contain"
      :lazy-src="getImageAlias(src,'ph')" 
      :src="src"
      height="100%"
      aspect-ratio="1.91" 
      :alt="alt"
    >
      <template v-slot:placeholder>
        <v-skeleton-loader
          height="100%"
          class="mx-auto"
          type="image"
        ></v-skeleton-loader>
      </template>
    </v-img>
  </div>
</div>`
});