<template>
  <div class="tile">
    <div class="tile-symbol" :id="this.tile.idobject">
      <img class="tile-background" :src="this.background" :width="this.width" :height="this.height"/>
      <!--img class="tile-background" :src="this.background" :width="this.width" :height="this.height"/-->
      <svg-button class="tile-front" :svg="this.svg" :width="this.width" :height="this.height"/>
    </div>
  </div>
</template>

<script>
import Tile from '@/model/Tile.js'
import SvgButton from './SvgButton.vue';

export default {
  components: { SvgButton },
  props: {
    id: Number,
    width: { type: [Number, String], default: 80 },
    height: {type: [Number, String], default: 80 }
  },
  data(){ //data must be a function 
    return{
      tile: {type: Tile}, //our tile object
      svg: null,
      background: null
    }
  },
  mounted(){ //hook on mounted, we init the object. It could have been done before.
  console.log(typeof(this.id));
    this.tile = new Tile(this.id);
    this.background = require("@/assets/img/mahjong-tiles/Black/Front.svg");
    this.svg = require("@/assets/img/mahjong-tiles/Black/"+ this.tile.getSVG());
    console.log(this.svg);
  }
}
</script>

<style>
.tile {
  
  height: 1px;
}
.tile-symbol{
  height: 1px;
    border-radius: 10px;
    background: transparent;
    border: none;
    display: inline-block;
}
.tile-background{
    display: inline-block;
}
.tile-front{
  margin: 0;
  padding: 0;
    display: inline-block;
  transform: translateY(-100%);   
  -webkit-transform: translateY(-100%);
  

}
</style>
