<template>
  <div class="fp-absolute" :id="item.uuid" :style="itemStyle" @input="handleInputEvent" :contenteditable="item.bool" @blur="handleBlurEvent">
   <span> {{ item.v }}</span>
  </div>
</template>

<script>
import DivMixin from '@/mixins/DivMixin.js'
import { mapGetters } from "vuex"
export default {
  name: "FpItemText",
  mixins:[DivMixin],
  props: {
    item: {
      type: Object,
      default: () => { }
    },
    scale: {
      type: Number,
      default: 1
    }
  },
 
  computed: {
    ...mapGetters({
      'ai': 'poster/ai',
    }),
    itemStyle() {
      // 
      let styles = {
        'z-index': this.item.bool ? 1000 : 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)`,
        'font-size': (this.item.s * this.scale) + 'px',
        'font-family': `"${this.item.fn}"`,
        'color': `${this.item.c}`,
        'text-align': `${this.item.a}`,
        'font-style': 'normal',
        'box-sizing': 'content-box',
        'white-space': 'pre-line',
        'word-break':'break-all',
        'line-height': `${(this.item.s + this.item.vs) * this.scale}px`,
        'background-color': `${this.item.bgc}`,
        'letter-spacing': this.item.ls * this.scale + 'px',
        opacity: this.item.opacity,
      }
      // 粗体、斜体、下划线、删除线
      let bius = this.item.bius.split('')
      if (bius.includes('u')) {
        styles['text-decoration'] = 'underline'
      }
      if (bius.includes('s')) {
        styles['text-decoration'] = 'line-through'
      }

      if (bius.includes('b')) {
        styles['font-weight'] = 'bold'
      }
      if (bius.includes('i')) {
        styles['font-style'] = 'italic'
      }



      return styles
    }
  },
  watch: {
    'item.bool': function(val) {
      if (val) {
        this.$nextTick(() => {
          document.getElementById(this.item.uuid).focus()
        })
      }
    },
  },
  methods: {
    handleInputEvent(){
     let text = document.getElementById(this.item.uuid).innerText;
     this.ai.h = this.getDivHeight(this.ai.s,this.ai.vs ,this.ai.w, text)
    },
    handleBlurEvent(){
      let text = document.getElementById(this.item.uuid).innerText;
      if(this.ai){
        this.ai.v=text
      }
    }
  }
}
</script>

<style scoped>
.fp-absolute {
  position: absolute;
  /* overflow: hidden; */
  box-sizing: content-box;
  border: 1px solid transparent;
}

.fp-absolute:hover {
  border: 1px solid #2c8ef8;
}

[contenteditable]:focus {
  outline: none;
}
</style>
