<template>
  <canvas ref="hightCanvas" class="highlight-canvas"/>
</template>

<script>
export default {
  props:{
    parentDomId:{//所属父级domid
      type:String,
      default:'file-content-0'
    },
    parentIndex:{
      type:Number,
      default:0
    }
  },
  data() {
    return {
      boundingArr:[],//被选中的区域数组
      ctx:null
    };
  },
  methods: {
    //如果页面宽度发生改变，需要调用
    initCanvasStyle(){
      const parent = $(`#${this.parentDomId}`)
      this.$refs.hightCanvas.width = parent.width()
      this.$refs.hightCanvas.height = parent.height()
      this.ctx = this.$refs.hightCanvas.getContext("2d")
      if(this.boundingArr.length){
        //先清空画布
        this.ctx.clearRect(0, 0, parent.width(), parent.height())
        //重新绘制
        this.boundingArr.forEach(item=>{
          this.drawHighLight([item],'redraw')
        })
      }
    },
    drawHighLight(boundings,type='add'){
      //获取父元素的bound
      const parent = $(`#${this.parentDomId}`)[0]
      const parentBounding = parent.getBoundingClientRect()
      console.log('parentBounding',parentBounding)
      this.ctx.fillStyle = '#FFDF0C'
      for(const bounding of boundings){
        const calRect = {
          width:bounding.width,
          height:bounding.height,
          left:bounding.left-parentBounding.left,
          top:bounding.top-parentBounding.top
        }
        type==='add'&&this.boundingArr.push(bounding)
        this.ctx.fillRect(calRect.left-1,calRect.top-1,calRect.width,calRect.height)
      }
    }
  },
  mounted(){
    this.initCanvasStyle()
  }
};
</script>

<style scoped lang="scss">
.highlight-canvas{
 /*  border:2px solid black; */
  position:absolute;
  top:0;
  left:0;
  pointer-events: none;
}
</style>
