<template>
  <div class="tile">
    <div v-on:click="tileClicked(id)" 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/TileModel.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.
    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());
  },
  methods: {      
    tileClicked: function(id){
      this.$emit('tileClicked', {
         'id_tuile' : id
       });
    }
  }
}
</script>

<style>
.tile {
  
  height: 1px;
}
.tile-symbol{
  position: relative;
    border-radius: 10px;
    background: transparent;
    border: none;
    display: inline-block;
}
.tile-background{
  position: absolute;
  top: 0;
  left: 0;
    display: inline-block;
    z-index: 1;
}
.tile-front{
  position: relative;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
    display: inline-block;
    z-index: 2;
  

}
</style>
