import detailState from '/src/pages/detail/state'
export class Cursor {
  img: HTMLImageElement
  x: number
  y: number
  width: number
  height: number
  src: string =
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAABCAYAAAASC7TOAAAAAXNSR0IArs4c6QAAABdJREFUGFdj3Pp5c0Ptm2oGdNAs0soAAHslBd3n2kNUAAAAAElFTkSuQmCC'
  constructor(options: any) {
    this.x = options.x
    this.y = options.y
    this.width = options.w
    this.height = options.h
    this.img = document.createElement('img')
    this.img.src = this.src
    this.img.style.position = 'absolute'
    this.img.style.zIndex = '-1'
    this.setValue()
  }
  reset(){
    const first = detailState.times?.[0]?.cursorBox
    if (first){
      this.setPosition(first)
    }
  }
  show() {
    this.img.style.display = ''
  }
  hide(){
    this.img.style.display = 'none'
  }
  setPosition({ x, y, w, h }: any){
    this.x = x
    this.y = y
    this.width = w
    this.height = h
    this.setValue()
  }
  setValue() {
    this.img.style.left = this.x + 'px'
    this.img.style.top = this.y + 'px'
    this.img.style.width = this.width + 'px'
    this.img.style.height = this.height + 'px'
    this.show()
  }
}
