<template>
  <img :src="imageURL" />
</template>

<style lang="scss" scoped>
</style>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { cardImageURL } from "../../mlpccg";

@Component({
  components: {}
})
export default class CardImage extends Vue {
  @Prop()
  private id!: string;

  private loaded!: boolean;
  private loadedURL!: string;

  private data() {
    return {
      loaded: false,
      loadedURL: ""
    };
  }

  private mounted() {
    this.fetchImage();
    this.$watch("id", () => {
      this.loaded = false;
      this.fetchImage();
    });
  }

  private async fetchImage() {
    const url = await cardImageURL(this.id);
    this.loaded = true;
    this.loadedURL = url;
  }

  private get imageURL(): string {
    if (this.loaded) {
      return this.loadedURL;
    }
    return require("@/assets/images/cardback.webp");
  }
}
</script>
