/**
 * 基于屏宽/屏高获取 scale 值
 * @param {number} width 作为基准的宽度
 * @param {number} height 作为基准的高度
 */
function getScale(width: number, height: number) {
  const { innerHeight, innerWidth } = window
  return Math.min(innerHeight / height, innerWidth / width)
}

/**
 * 修改 Scale 值
 * @param {HTMLElement} el 元素
 * @param {number} width 作为基准的宽度
 * @param {number} height 作为基准的高度
 */
export function setScale(el: HTMLElement, width: number, height: number) {
  const scale = getScale(width, height)
  const transform = `translate3d(-50%, -50%, 0) scale(${scale})`
  el.style.width = width + 'px'
  el.style.height = height + 'px'
  el.style.transform = transform
  return el
}

/**
 * 修改屏幕为1920/1080像素的 Scale 值
 * @param {HTMLElement} el 元素
 * @returns 关闭 window resize 事件监听的方法
 */
export function setW1920H1080Scale(el: HTMLElement) {
  let resize: (() => HTMLElement) | null = () => setScale(el, 1920, 1080)
  setScale(el, 1920, 1080)
  window.addEventListener('resize', resize)
  return () => {
    resize && window.removeEventListener('resize', resize)
    resize = null
  }
}

/**
 *
 * @param el 元素
 * @param uiWidth 系统设计稿宽度
 * @param uiHeight 系统设计稿高度
 */
export function setDomScale(el: HTMLElement, uiWidth: number, uiHeight: number) {
  const c = getScale(uiWidth, uiHeight)
  const transform = `translate3d(-50%, -50%, 0) scale(${c})`
  el.style.transform = transform
  return el
}