<template>
  <el-image  class="fp-absolute" fit="fit" :style="itemStyle"  draggable="false" :src="imgSrc" :onerror="defaultImg"/>
</template>

<script>
import http from '../../../../api/fastposter'

export default {
  name: "FpItemImage",
  data() {
    return {
      defaultImg: 'this.src="' + require('@/assets/fastposter/default.png') + '"; this.style.background="#fff"'
    }
  },
  computed: {
    imgSrc() {
      return http.imgUrl(this.item.v);
    },
    itemStyle(){
      return  {
        'z-index':this.item.z,
        width: this.item.w*this.scale+'px',
        height:this.item.h*this.scale+'px',
        top:this.item.y*this.scale+'px',
        left:this.item.x*this.scale+'px',
        transform: `rotate(${this.item.angle}deg)`
      }
    }
  },
  props: {
    item: {
      type:Object,
      default:()=>{}
    },
    scale:{
      type:Number,
      default:1
    },
  },
}
</script>
<style scoped>
 .fp-absolute{
  position: absolute;
  box-sizing: border-box;
  border:1px solid  transparent; 
 }
 .fp-absolute:hover{
  border: 1px solid #2c8ef8 !important;
}
</style>